日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達者為師

網(wǎng)站首頁 編程語言 正文

jQuery中DOM?屬性使用實例詳解上篇_jquery

作者：RiemannHypothesis ? 更新時間： 2022-10-26 編程語言

DOM屬性(上)

.addClass()

為每個匹配的元素添加指定的樣式類名

值得注意的是這個方法不會替換一個樣式類名。它只是簡單的添加一個樣式類名到元素上。

對所有匹配的元素可以一次添加多個用空格隔開的樣式類名, 像這樣：

$("p").addClass("myClass yourClass");

.addClass() 方法允許我們通過傳遞一個用來設(shè)置樣式類名的函數(shù)。

$("ul li:last").addClass(function(index) {
  return "item-" + index;
});

addClass還可以接受第二個參數(shù)，下面是使用例子

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background: white; }
  .red { background: red; }
  .red.green { background: green; }
  </style>
  <script src="./jquery-3.6.0.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>

.removeClass()

移除集合中每個匹配元素上一個，多個或全部樣式。

如果一個樣式類名作為一個參數(shù),只有這樣式類會被從匹配的元素集合中刪除 。 如果沒有樣式名作為參數(shù)，那么所有的樣式類將被移除。

從所有匹配的每個元素中同時移除多個用空格隔開的樣式類 ，像這樣:

$('p').removeClass('myClass yourClass')

這個方法通常和 .addClass() 一起使用用來切換元素的樣式, 像這樣：

$('p').removeClass('myClass noClass').addClass('yourClass');

這里從所有段落刪除 myClass 和 noClass 樣式類, 然后 yourClass 樣式被添加。

removeClass() 方法允許我們指定一個函數(shù)作為參數(shù)，返回將要被刪除的樣式。

$('li:last').removeClass(function() {
  return $(this).prev().attr('class');
});

.toggleClass()

在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類,取決于這個樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個類。

$('#foo').toggleClass(className, addOrRemove);

等價于

if (addOrRemove) {
    $('#foo').addClass(className);
}
else {
    $('#foo').removeClass(className);
}

.hasClass()

確定任何一個匹配元素是否有被分配給定的（樣式）類。

如果匹配元素上有指定的樣式，那么.hasClass() 方法將返回 true ， 即使元素上可能還有其他樣式。 舉個例子, 給上文的HTML加上下面的代碼將返回 true：

<div id="mydiv" class="foo bar"></div>
$('#mydiv').hasClass('foo')

原文鏈接：https://juejin.cn/post/7137467921327980551

欄目分類
最近更新