jQuery中:not選擇器用法實例
更新時間：2014年12月30日 10:04:26 投稿：shichen2014
這篇文章主要介紹了jQuery中:not選擇器用法,以實例形式分析了:not選擇器的功能、定義及移除元素的用法,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery中not選擇器用法。分享給大家供大家參考。具體分析如下：
此選擇器能夠移除元素集合中與給定選擇器匹配的元素。
語法結構:
復制代碼 代碼如下:
$(":not(selector)")
此選擇器一般也要和其他選擇器配合使用，比如類選擇器和元素選擇器等等。例如:
復制代碼 代碼如下:
$("li:not(.second)").css("color","green")
以上代碼是將li元素集合中，類名不為second的li中的字體顏色設置為綠色。
如果不和其他選擇器配合使用，則默認狀態(tài)是和*選擇器配合使用，例如$(":not")等同于$("*:not")。
參數(shù)列表:
實例代碼:
實例一:
復制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.dhdzp.com/" />
<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元素中的字體顏色設置為綠色。
實例二:
復制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.dhdzp.com/" />
<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屬性具有繼承性，所以所有元素的文本都會被設置為綠色了。
更多關于jquery選擇器相關內容感興趣的讀者可查看本站專題：《jquery選擇器用法總結》
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
下面是個應用的小例子用來統(tǒng)一處理ajax請求中利用完全透明遮罩層組織用戶和界面元素交換，當ajax出錯時提示用戶2010-08-08
這篇文章主要為大家詳細介紹了jquery實現(xiàn)拖拽table表頭改變列寬，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
接下來看一段代碼，我會給大家詳細介紹DWZ中table分頁的使用方式，以下是在MVC中實現(xiàn)的方式。2013-03-03
jquery bankInput插件是銀行卡進行格式化顯示，能控制文本框輸入最小最大個數(shù)、控制只能輸入數(shù)字、控制不能粘貼不能使用輸入法。同時插件能實現(xiàn)自動加載格式化顯示和支持非輸入框的格式話顯示2012-08-08
jQuery使用有一段時間了，但是有一些API的實現(xiàn)實在想不通。小編參考相關資料源碼，現(xiàn)在把我的學習過程和收獲分享給大家2016-05-05
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)彈幕效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
使用jquery獲取網(wǎng)頁中圖片的高度其實很簡單，目前有兩種不錯的方法可以實現(xiàn)，下面為大家詳細介紹下，有所疑惑的你可以參考下2013-09-09
這篇文章主要介紹了jquery siblings獲取同輩元素用法,結合實例形式分析了jQuery使用siblings遍歷同級元素的相關技巧,需要的朋友可以參考下2016-07-07
對jquery的ajax進行二次封裝以及ajax緩存代理組件:AjaxCache詳解
下面小編就為大家?guī)硪黄獙query的ajax進行二次封裝以及ajax緩存代理組件:AjaxCache詳解。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-04-04
JQuery DataTable刪除行后的頁面更新利用Ajax解決
使用Jquery的DataTable進行數(shù)據(jù)表處理非常方便，常遇到的一個問題就是刪除一行后頁面必須進行更新，下面與大家分享下使用Ajax的解決方法2013-05-05