jQuery中:not選擇器用法實(shí)例
本文實(shí)例講述了jQuery中not選擇器用法。分享給大家供大家參考。具體分析如下:
此選擇器能夠移除元素集合中與給定選擇器匹配的元素。
語法結(jié)構(gòu):
此選擇器一般也要和其他選擇器配合使用,比如類選擇器和元素選擇器等等。例如:
以上代碼是將li元素集合中,類名不為second的li中的字體顏色設(shè)置為綠色。
如果不和其他選擇器配合使用,則默認(rèn)狀態(tài)是和*選擇器配合使用,例如$(":not")等同于$("*:not")。
參數(shù)列表:
實(shí)例代碼:
實(shí)例一:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.dbjr.com.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>點(diǎn)擊查看效果</button>
</body>
</html>
以上代碼可以將li元素集合中,class屬性值不為second的li元素中的字體顏色設(shè)置為綠色。
實(shí)例二:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.dbjr.com.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>點(diǎn)擊查看效果</button>
</body>
</html>
由于以上代碼并沒有指定與:not選擇器相配合使用的選擇器,所以就默認(rèn)和*選擇器配合使用,由于color屬性具有繼承性,所以所有元素的文本都會(huì)被設(shè)置為綠色了。
更多關(guān)于jquery選擇器相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery實(shí)現(xiàn)手機(jī)上輸入后隱藏鍵盤功能
最近做了這樣一個(gè)功能,讓用戶輸入手機(jī)發(fā)送驗(yàn)證碼,輸完11位手機(jī)號(hào)后,自動(dòng)隱藏鍵盤。下面通過本文給大家分享實(shí)現(xiàn)方法,一起看看吧2017-01-01jQuery代碼實(shí)現(xiàn)圖片墻自動(dòng)+手動(dòng)淡入淡出切換效果
在網(wǎng)頁上經(jīng)??梢钥吹接斜尘皥D片可以自動(dòng)淡入淡入切換的效果,非常漂亮,實(shí)用性也非常高,今天小編給大家分享基于jquery代碼實(shí)現(xiàn)圖片墻自動(dòng)+手動(dòng)淡入淡出切換效果,感興趣的朋友一起學(xué)習(xí)吧2016-05-0515款優(yōu)秀的jQuery導(dǎo)航菜單插件分享
這篇文章收集了15款優(yōu)秀的jQuery導(dǎo)航菜單插件分享給大家。jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架,使用簡(jiǎn)單靈活,同時(shí)還有許多成熟的插件可供選擇,jQuery 讓網(wǎng)站有更好的可用性和用戶體驗(yàn),給訪問者對(duì)網(wǎng)站留下非常好的印象。2011-07-07jQuery滾動(dòng)新聞實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery滾動(dòng)新聞實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06jQuery validate插件submitHandler提交導(dǎo)致死循環(huán)解決方法
這篇文章主要介紹了jQuery validate插件submitHandler提交導(dǎo)致死循環(huán)解決方法,對(duì)比分析了常見的錯(cuò)誤寫法造成死循環(huán)與正確寫法,需要的朋友可以參考下2016-01-01jQuery調(diào)用WebService的實(shí)現(xiàn)代碼
jQuery調(diào)用WebService的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-06-06jquery 單行滾動(dòng)、批量多行滾動(dòng)、文字圖片翻屏滾動(dòng)效果代碼
jquery單行滾動(dòng)、批量多行滾動(dòng)、文字圖片翻屏滾動(dòng)效果代碼,需要的朋友可以參考下。2010-05-05jQuery對(duì)象的selector屬性用法實(shí)例
這篇文章主要介紹了jQuery對(duì)象的selector屬性用法,實(shí)例分析了selector屬性返回選擇器的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12