jquery中的dom属性总结

ITzhongzi

588人浏览 · 2017-03-22 23:07:08

ITzhongzi · 2017-03-22 23:07:08 发布

1、addClass（classNames）: 为每个匹配的元素增加指定的类名

解析：其中这个addClass也可以接受一个回调函数作为参数

示例demo:

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background: white; }
  .red { background: red; }
  .red.green { background: green; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
 
 <div>This div should be white</div>
 <div class="red">This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There are zero green divs</p>
 
<script>
  $("div").addClass(function(index, currentClass) {
    var addedClass;
 
    if ( currentClass === "red" ) {
      addedClass = "green";
      $("p").text("There is one green div");
    }
 
    return addedClass;
  });
</script>
 
</body>
</html>

2、attr（）方法。

功能描述：当传入一个字符串时，获取匹配的元素集合中的第一个元素的属性值

当传入连个变量时，设置每一个匹配元素的某一个变量

当传入一个对象时，设置每一个元素的多个属性的值。

示例demo：

<!DOCTYPE html>
<html>
<head>
  <style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
</style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
 
  <img />
  <img />
  <img />
 
  <div><B>Attribute of Ajax</B></div>
 
<script>
$("img").attr({
  src: "images/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
</script>
 
</body>
</html>

3、hasClass（）方法。

功能描述：确定任何一个元素是否有被分配（被给定）的类。有的话返回true，没有的话返回false。

示例demo：

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
 
  <p>This paragraph is black and is the first paragraph.</p>
  <p class="selected">This paragraph is red and is the second paragraph.</p>
 
  <div id="result1">First paragraph has selected class: </div>
  <div id="result2">Second paragraph has selected class: </div>
  <div id="result3">At least one paragraph has selected class: </div>
<script>
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());
</script>
 
</body>
</html>

4、html（）方法。

功能描述：不传入参数时，获取元素集合中第一个匹配的元素的内容

传入参数时，设置每一个匹配的元素的内容。

示例demo：

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin:8px; font-size:20px; color:blue;
      cursor:pointer; }
  b { text-decoration:underline; }
  button { cursor:pointer; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <p>
    <b>Click</b> to change the <span id="tag">html</span>
  </p>
  <p>
    to a <span id="text">text</span> node.
  </p>
  <p>
    This <button name="nada">button</button> does nothing.
  </p>
<script>
$("p").click(function () {
  var htmlStr = $(this).html();
  $(this).text(htmlStr);
});
</script>
 
</body>
</html>

5、prop（）

功能描述：传入一个参数时，获取匹配元素集合中的第一个元素的某个属性

传入连个参数时，设置元素集合中每一个元素的某个属性

传入一个对象时，设置元素集合中每一个元素的多个属性

示例demo：

<!DOCTYPE html>
<html>
<head>
  <style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
</style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
 
  <input type="checkbox" checked="checked" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox"  checked="checked" />
 
<script>
$("input[type='checkbox']").prop({
  disabled: true
});
</script>
 
</body>
</html>

6、 removeAttr（）

功能描述：

传入一个字符串时，删除元素集合中每个元素的某一个属性

示例demo：

<!DOCTYPE html>
<html>
<head>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <button>Enable</button>
<input type="text" title="hello there" />
<div id="log"></div>
 
<script>
(function() {
  var inputTitle = $("input").attr("title");
  $("button").click(function () {
    var input = $(this).next();
 
    if ( input.attr("title") == inputTitle ) {
      input.removeAttr("title")
    } else {
      input.attr("title", inputTitle);
    }
 
    $("#log").html( "input title is now " + input.attr("title") );
  });
})();
</script>
 
</body>
</html>

7、removeProp

功能描述:删除集合中所有匹配元素的某一个属性

示例demo：

<!DOCTYPE html>
<html>
<head>
  <style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
</style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
 
  <p></p>
 
<script>
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
 
</script>
 
</body>
</html>

8、toggleClass（）

功能描述：

为匹配的元素集合中的每一元素增加或者删除一个或者多个样式，

取决于这个样式类是否存在切换属性

如果原先存在就删除一个类，如果不存在九天假一个类。

示例demo：

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin: 4px; font-size:16px; font-weight:bolder;
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:red; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
  <p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
  <p class="blue">on these (<span>clicks: 0</span>)</p>
 
  <p class="blue">paragraphs (<span>clicks: 0</span>)</p>
<script>
var count = 0;
$("p").each(function() {
  var $thisParagraph = $(this);
  var count = 0;
  $thisParagraph.click(function() {
    count++;
    $thisParagraph.find("span").text('clicks: ' + count);
    $thisParagraph.toggleClass("highlight", count % 3 == 0);
  });
});
 
</script>
 
</body>
</html>

9、val（）

功能描述：

不传参数时，获取匹配元素集合中第一个元素的当前值。

传入参数时，设置每一个匹配元素集合中元素的值

示例demo：

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; margin:4px; }
  b { color:blue; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <p></p>
 
  <select id="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
 
  <select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select>
 
<script>
    function displayVals() {
      var singleValues = $("#single").val();
      var multipleValues = $("#multiple").val() || [];
      $("p").html("<b>Single:</b> " +
                  singleValues +
                  " <b>Multiple:</b> " +
                  multipleValues.join(", "));
    }
 
    $("select").change(displayVals);
    displayVals();
 
</script>
 
</body>
</html>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

小参数・大码力・易部署 | Qwen3.6-27B上线魔乐社区，基于昇腾的部署教程来了

继一周前模型开源发布后，千问再度开源Qwen3.6-27B —— 一个拥有270亿参数的稠密多模态模型，也是社区呼声最高的模型规格。Qwen3.6-27B 依然支持多模态思考与非思考模式，在智能体编程方面达到了旗舰级表现，全面超越前代开源旗舰 Qwen3.5-397B-A17B（总参数397B / 激活参数17B的MoE模型）。作为稠密架构，它无需MoE路由即可部署，是开发者在实用、可广泛部署规模