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ù)列表:

參數(shù)	描述
selector	用于篩選的選擇器。

實例代碼:

實例一:

復制代碼代碼如下:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="http://m.fzitv.net/" />

<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://m.fzitv.net/" />

<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>