jQuery中DOM屬性如何使用

發(fā)布時(shí)間：2022-08-31 11:00:44 來源：億速云閱讀：126 作者：iii 欄目：開發(fā)技術(shù)

今天小編給大家分享一下jQuery中DOM屬性如何使用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

DOM屬性(上)

.addClass()

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

值得注意的是這個(gè)方法不會(huì)替換一個(gè)樣式類名。它只是簡(jiǎn)單的添加一個(gè)樣式類名到元素上。

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

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

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

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

addClass還可以接受第二個(gè)參數(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()

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

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

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

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

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

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

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

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

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

.toggleClass()

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

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

等價(jià)于

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

.hasClass()

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

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

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

以上就是“jQuery中DOM屬性如何使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

jQuery中DOM屬性如何使用

DOM屬性(上)

.addClass()

.removeClass()

.toggleClass()

.hasClass()

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽