jQuery中DOM 屬性使用實(shí)例詳解上篇
DOM屬性(上)
.addClass()
為每個(gè)匹配的元素添加指定的樣式類(lèi)名
值得注意的是這個(gè)方法不會(huì)替換一個(gè)樣式類(lèi)名。它只是簡(jiǎn)單的添加一個(gè)樣式類(lèi)名到元素上。
對(duì)所有匹配的元素可以一次添加多個(gè)用空格隔開(kāi)的樣式類(lèi)名, 像這樣：
$("p").addClass("myClass yourClass");
.addClass() 方法允許我們通過(guò)傳遞一個(gè)用來(lái)設(shè)置樣式類(lèi)名的函數(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è)樣式類(lèi)名作為一個(gè)參數(shù),只有這樣式類(lèi)會(huì)被從匹配的元素集合中刪除 。 如果沒(méi)有樣式名作為參數(shù)，那么所有的樣式類(lèi)將被移除。
從所有匹配的每個(gè)元素中同時(shí)移除多個(gè)用空格隔開(kāi)的樣式類(lèi) ，像這樣:
$('p').removeClass('myClass yourClass')
這個(gè)方法通常和 .addClass() 一起使用用來(lái)切換元素的樣式, 像這樣：
$('p').removeClass('myClass noClass').addClass('yourClass');
這里從所有段落刪除 myClass 和 noClass 樣式類(lèi), 然后 yourClass 樣式被添加。
removeClass() 方法允許我們指定一個(gè)函數(shù)作為參數(shù)，返回將要被刪除的樣式。
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});
.toggleClass()
在匹配的元素集合中的每個(gè)元素上添加或刪除一個(gè)或多個(gè)樣式類(lèi),取決于這個(gè)樣式類(lèi)是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個(gè)類(lèi)。
$('#foo').toggleClass(className, addOrRemove);
等價(jià)于
if (addOrRemove) {
$('#foo').addClass(className);
}
else {
$('#foo').removeClass(className);
}
.hasClass()
確定任何一個(gè)匹配元素是否有被分配給定的（樣式）類(lèi)。
如果匹配元素上有指定的樣式，那么.hasClass() 方法將返回 true ， 即使元素上可能還有其他樣式。 舉個(gè)例子, 給上文的HTML加上下面的代碼將返回 true：
<div id="mydiv" class="foo bar"></div>
$('#mydiv').hasClass('foo')以上就是jQuery中DOM 屬性使用實(shí)例詳解上篇的詳細(xì)內(nèi)容，更多關(guān)于jQuery DOM 屬性的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取多選框的值,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面元素屬性獲取相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
jquery實(shí)現(xiàn)textarea輸入框限制字?jǐn)?shù)的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)textarea輸入框限制字?jǐn)?shù)的方法,通過(guò)keyup事件實(shí)時(shí)讀取textarea輸入框的字?jǐn)?shù)來(lái)實(shí)現(xiàn)這一功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
jQuery中iframe的操作(點(diǎn)擊按鈕新增窗口)
<iframe>也應(yīng)該是框架的一種形式，它與<frame>不同的是，iframe可以嵌在網(wǎng)頁(yè)中的任意部分。本文給大家介紹jQuery中iframe的操作(點(diǎn)擊按鈕新增窗口)，需要的朋友參考下吧2016-04-04
jquery引入外部CDN 加載失敗則引入本地jq庫(kù)
這篇文章主要介紹了網(wǎng)站加載第三方CDN，如果jQuery庫(kù)不成功則加載本地的jquery的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-05-05
用jQuery的AJax實(shí)現(xiàn)異步訪問(wèn)、異步加載
這篇文章主要介紹了用jQuery的AJax實(shí)現(xiàn)異步訪問(wèn)、異步加載，jQuery的ajax異步實(shí)現(xiàn)數(shù)據(jù)交互的相關(guān)技巧,并提供了完整示例demo供讀者參考,需要的朋友可以參考下2016-11-11
感覺(jué)這個(gè)東西很常用，很多其它js框架里有，但是太大了，用不了太多，自己寫(xiě)了個(gè)。需要的朋友可以參考下。2011-02-02
jquery實(shí)現(xiàn)模擬百分比進(jìn)度條漸變效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)模擬百分比進(jìn)度條漸變效果代碼,涉及jQuery基于時(shí)間函數(shù)操作頁(yè)面元素樣式變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
Bootstrap框架建立樹(shù)形菜單(Tree)的實(shí)例代碼
這篇文章主要介紹了在Bootstrap框架下怎么去建立一個(gè)樹(shù)形菜單，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2017-10-10
添加、刪除元素在項(xiàng)目中經(jīng)常會(huì)用到，下面為大家介紹下使用jQuery對(duì)元素進(jìn)行動(dòng)態(tài)添加和刪除，具體的實(shí)現(xiàn)如下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12