jQuery过滤选择器:not()方法介绍
fmms
13年前
<h4>jQuery(':not(selector)')</h4> <p>在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如<code>:not(div a)</code> and <code>:not(div,a)</code></p> <div> <div> <table class="ke-zeroborder"> <tbody> <tr> <td><code></code><br /> </td> <td><code><p ><code>"a"</code><code>>sdfsdfs</p></code></code></td> </tr> </tbody> </table> </div> <div> <table class="ke-zeroborder"> <tbody> <tr> <td><code></code><br /> </td> <td><code><p ><code>"b"</code><code>>sdfsdfs</p></code></code></td> </tr> </tbody> </table> </div> <div> <table class="ke-zeroborder"> <tbody> <tr> <td><code></code><br /> </td> <td><code><p ><code>"c"</code><code>>sdfsdfs</p></code></code></td> </tr> </tbody> </table> </div> <div> <table class="ke-zeroborder"> <tbody> <tr> <td><code></code><br /> </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> </div> </div> <p>那么除了class等于a的p元素外,其他的P的文字颜色就变成了红色.</p> <p>:not()伪类过滤选择器,这叫法真拗口,jQuery的:not()方法是jQuery的伪类选择器,可以过滤不需要的元素,筛选出正确的结果,简单的说我们有如下代码: </p> <div> <div> <div> <table class="ke-zeroborder"> <tbody> <tr> <td><code></code><br /> </td> <td><code>$(</code><code>"selector1:not(selector2)"</code><code>)</code></td> </tr> </tbody> </table> </div> </div> </div> <p>我们分析下上面的代码,我们要获取selector1的元素,但可能我不需要全部,怎么办,通过:not()方法来过滤,如果selector1的集合中有#1,#2,#3,#4</p> <p>我们的selector2就是要过滤掉#4，上面的代码我们最终将获得#1,#2,#3</p> <p>再举几个列子</p> <div> <table class="ke-zeroborder"> <tbody> <tr> <td><code></code><br /> </td> <td><code>$(‘li:not(:only-child)’)</code><code>//匹配所有的li,除了只有一个子元素的</code></td> </tr> </tbody> </table> </div> <div> <table class="ke-zeroborder"> <tbody> <tr> <td><code></code><br /> </td> <td><code>$(‘li:not(:first-child)’);</code><code>//匹配除了在他父元素中是第一个子元素的LI</code></td> </tr> </tbody> </table> </div> <table class="ke-zeroborder"> <tbody> <tr> <td><code></code><br /> </td> <td><code>$(</code><code>"li :not(:first)"</code><code>).hide();</code><code>//隐藏除了第一个LI外的所有LI</code></td> </tr> </tbody> </table>