jquery中的dom属性总结

来源：互联网发布：淘宝详情代码生成器编辑：程序博客网时间：2024/05/18 19:43

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>

1 0

jquery中的dom属性 总结

jquery中的dom属性总结