jQuery过滤选择器:not()方法介绍

蔚落 2022-04-14 06:45 163阅读 0赞

#### jQuery(':not(selector)') ####

在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如`:not(div a)` and `:not(div,a)`

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td><code>&lt;p &gt;<code>"a"</code><code>&gt;sdfsdfs&lt;/p&gt;</code></code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td><code>&lt;p &gt;<code>"b"</code><code>&gt;sdfsdfs&lt;/p&gt;</code></code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td><code>&lt;p &gt;<code>"c"</code><code>&gt;sdfsdfs&lt;/p&gt;</code></code></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td> <code>$(</code><code>"p:not(.a)"</code><code>).css({ </code><code>"color"</code><code>:</code><code>"red"</code><code>})</code> </td> 
  </tr> 
 </tbody> 
</table>

那么除了class等于a的p元素外,其他的P的文字颜色就变成了红色.

:not()伪类过滤选择器,这叫法真拗口,jQuery的:not()方法是jQuery的伪类选择器,可以过滤不需要的元素,筛选出正确的结果,简单的说我们有如下代码:

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td> <code>$(</code><code>"selector1:not(selector2)"</code><code>)</code> </td> 
  </tr> 
 </tbody> 
</table>

我们分析下上面的代码,我们要获取selector1的元素,但可能我不需要全部,怎么办,通过:not()方法来过滤,如果selector1的集合中有\#1,\#2,\#3,\#4

我们的selector2就是要过滤掉\#4，上面的代码我们最终将获得\#1,\#2,\#3

再举几个列子

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td> <code>$(‘li:not(:only-child)’)</code><code>//匹配所有的li,除了只有一个子元素的</code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td> <code>$(‘li:not(:first-child)’);</code><code>//匹配除了在他父元素中是第一个子元素的LI</code> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td> <code>$(</code><code>"li :not(:first)"</code><code>).hide();</code><code>//隐藏除了第一个LI外的所有LI</code> </td> 
  </tr> 
 </tbody> 
</table>