:not()偽類過濾選擇器
在jQuery的早期版本中,:not()篩選器只支持簡單的選擇器,說明我們傳入到:not這個filter中的selector可以任意復雜,比如:not(div a) and :not(div,a)
<p class="a"> </p>
<p class="b"> </p>
<p class="c"> </p>
$("p:not(.a)").css({"color":"red"})
那麼除了class等於a的p元素外,其他的P的文字顏色就變成了紅色.
偽類過濾選擇器,這叫法真拗口,jQuery的:not()方法是jQuery的偽類選擇器,可以過濾不需要的元素,篩選出正確的結果,簡單的說我們有如下代碼:
$("selector1:not(selector2)")
我們分析下上面的代碼,我們要獲取selector1的元素,但可能我不需要全部,怎麼辦,通過:not()方法來過濾,如果selector1的集合中有#1,#2,#3,#4
我們的selector2就是要過濾掉#4，上面的代碼我們最終將獲得#1,#2,#3
再舉幾個列子
$('li:not(:only-child)')//匹配所有的li,除了只有一個子元素的
$('li:not(:first-child)');//匹配除了在他父元素中是第一個子元素的LI
$("li :not(:first)").hide();//隱藏除了第一個LI外的所有LI
下面再看看一個例子：
<body>
<input name="apple" />
<input name="orange" />
<input name="flower" checked="checked" />
</body>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('input:not(:checked)').each(function(){
alert(this.name);
});
});
</script>
為什麼把所有的input都打印出來了？應該是未checked的才打印呢？ 看看下面就明白了：
<body>
<input type="checkbox" name="apple" />
<input type="checkbox" name="orange" />
<input type="checkbox" name="flower" checked="checked" />
</body>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("input:not(:checked)").each(function(){
alert(this.name);
});
});
</script>