jQuery中DOM 屬性使用實例詳解上篇
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')以上就是jQuery中DOM 屬性使用實例詳解上篇的詳細內(nèi)容,更多關(guān)于jQuery DOM 屬性的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
jQuery 更改checkbox的狀態(tài),無效的解決方法
下面小編就為大家?guī)硪黄猨Query 更改checkbox的狀態(tài),無效的解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
通過jquery-ui中的sortable來實現(xiàn)拖拽排序的簡單實例
下面小編就為大家?guī)硪黄ㄟ^jquery-ui中的sortable來實現(xiàn)拖拽排序的簡單實例。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jquery $.each 和for怎么跳出循環(huán)終止本次循環(huán)
如何在jquery 中的循環(huán)中終止本次循環(huán)或者跳出循環(huán)呢?經(jīng)搜索發(fā)現(xiàn)個不錯的方法,大家不妨參考下,希望對大家有所幫助2013-09-09

