jQuery中:not選擇器用法實例
本文實例講述了jQuery中not選擇器用法。分享給大家供大家參考。具體分析如下:
此選擇器能夠移除元素集合中與給定選擇器匹配的元素。
語法結(jié)構(gòu):
此選擇器一般也要和其他選擇器配合使用,比如類選擇器和元素選擇器等等。例如:
以上代碼是將li元素集合中,類名不為second的li中的字體顏色設(shè)置為綠色。
如果不和其他選擇器配合使用,則默認狀態(tài)是和*選擇器配合使用,例如$(":not")等同于$("*:not")。
參數(shù)列表:
實例代碼:
實例一:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://chabaoo.cn/" />
<title>:not選擇器-腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li:not(.second)").css("color","green")
})
})
</script>
</head>
<body>
<div>
<ul>
<li class="first">html專區(qū)</li>
<li class="second">div+css專區(qū)</li>
<li class="third">jQuery專區(qū)</li>
<li class="fourth">Javascript專區(qū)</li>
</ul>
</div>
<div>
<p>腳本之家歡迎您</p>
<span class="second">太陽出來了</span>
</div>
<button>點擊查看效果</button>
</body>
</html>
以上代碼可以將li元素集合中,class屬性值不為second的li元素中的字體顏色設(shè)置為綠色。
實例二:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://chabaoo.cn/" />
<title>:not選擇器-腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(":not(.second)").css("color","green")
})
})
</script>
</head>
<body>
<div>
<ul>
<li class="first">html專區(qū)</li>
<li class="second">div+css專區(qū)</li>
<li class="third">jQuery專區(qū)</li>
<li class="fourth">Javascript專區(qū)</li>
</ul>
</div>
<div>
<p>腳本之家歡迎您</p>
<span class="second">太陽出來了</span>
</div>
<button>點擊查看效果</button>
</body>
</html>
由于以上代碼并沒有指定與:not選擇器相配合使用的選擇器,所以就默認和*選擇器配合使用,由于color屬性具有繼承性,所以所有元素的文本都會被設(shè)置為綠色了。
更多關(guān)于jquery選擇器相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery選擇器用法總結(jié)》
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery代碼實現(xiàn)圖片墻自動+手動淡入淡出切換效果
在網(wǎng)頁上經(jīng)??梢钥吹接斜尘皥D片可以自動淡入淡入切換的效果,非常漂亮,實用性也非常高,今天小編給大家分享基于jquery代碼實現(xiàn)圖片墻自動+手動淡入淡出切換效果,感興趣的朋友一起學(xué)習(xí)吧2016-05-0515款優(yōu)秀的jQuery導(dǎo)航菜單插件分享
這篇文章收集了15款優(yōu)秀的jQuery導(dǎo)航菜單插件分享給大家。jQuery 是一個非常優(yōu)秀的 JavaScript 框架,使用簡單靈活,同時還有許多成熟的插件可供選擇,jQuery 讓網(wǎng)站有更好的可用性和用戶體驗,給訪問者對網(wǎng)站留下非常好的印象。2011-07-07jQuery validate插件submitHandler提交導(dǎo)致死循環(huán)解決方法
這篇文章主要介紹了jQuery validate插件submitHandler提交導(dǎo)致死循環(huán)解決方法,對比分析了常見的錯誤寫法造成死循環(huán)與正確寫法,需要的朋友可以參考下2016-01-01jQuery調(diào)用WebService的實現(xiàn)代碼
jQuery調(diào)用WebService的實現(xiàn)代碼,需要的朋友可以參考下。2011-06-06jquery 單行滾動、批量多行滾動、文字圖片翻屏滾動效果代碼
jquery單行滾動、批量多行滾動、文字圖片翻屏滾動效果代碼,需要的朋友可以參考下。2010-05-05