如何使用jQuery篩選排除元素以修改指定標籤的屬性

簡單案例：

$(function(){
    $("td[id][id!='']").click(function(){
           //你的逻辑
    });
});

 上述程式碼，有id且id不為空的td都會執行「你的邏輯」。

=======================轉載====================== ===

1、eq()　　  篩選指定索引號的元素
2、first()　　篩選出第一個符合的元素
3、last()　　 篩選出最後一個符合的元素
4、hasClass()　　檢查匹配的元素是否含有指定的類別
5、filter()　　篩選出與指定表達式匹配的元素集合
6、is()　　　 檢查元素是否參數裡能符合上的
7、map()
8、has()　　篩選出包含指定子元素的元素
9、not()　　排除能夠被參數中匹配的元素
10、slice( )　　　　從指定索引開始，截取指定個數的元素
11、children()　　篩選取得指定元素的資源
12、closest()　　 從目前元素開始，傳回最先符合到的符合條件的父元素
13、find()　　　　從指定元素中尋找子元素
14、next()　　　  取得指定元素的下一個兄弟元素
15、nextAll()　　  取得其後的所有兄弟元素
16 、nextUntil()　 取得其後的元素，直到參數能匹配上的為止,不包括結束條件那個
17、offsetPosition()　　傳回第一個用於定位的祖先元素，即查找祖先元素中position為relative或absolute的元素。
18、parent()　　　取得所有指定元素的直接父元素
19、parents()　　    取得所有指定元素的祖先元素，一直到
20、parentstiltil()取得指定元素的祖先元素，知道參數裡能匹配到的為止
21、prev()　　　　獲取指定元素的前一個兄弟元素
22、prevAll()　　　獲取指定元素前面的所有兄弟元素
23、prevUntil()　  取得指定元素前面的所有兄弟元素，直到參數裡的條件能夠匹配到的。 注意參數條件本身不會被符合
24、siblings()　　 取得指定元素的兄弟元素，不分前後
25、add()　　　　將選取的元素加入jQuery物件集合中
26、andSelf ()　　將自身加到選取的jQuery集合中,以方便一次性操作
27、end()　　 　 將改變目前選擇器選取的操作回退為上一個狀態。
28、contents　　不懂

************************* 篩選********** **************************

一、eq()　　篩選指定索引號的元素

　語法：eq(index|-index)　　索引號從0開始，若為負值，則從最後一個開始倒數，最後一個從-1開始

　　$("p").eq(1);　　//如果选择器改为  $("p").eq(-1)，则我是第四个P会被选中
　　　　
　　<p>
　　　　<p>我是第一个P</p>
　　　　<p>我是第二个P</p>　　//会被选中，索引值为1
　　　　<p>我是第三个P</p>
　　　　<p>我是第四个P</p>
　　</p>　　

　　語法：first()　　此方法沒有參數

　　$("p").first();
　　　　
　　<p>
　　　　<p>我是第一个P</p>　　//我的索引值是0，我是第一个，我会被选中
　　　　<p>我是第二个P</p>
　　　　<p>我是第三个P</p>
　　　　<p>我是第四个P</p>
　　</p>　　

 語法：last()　　此方法沒有參數

　　$("p").last();
　　　　
　　<p>
　　　　<p>我是第一个P</p>
　　　　<p>我是第二个P</p>
　　　　<p>我是第三个P</p>
　　　　<p>我是第四个P</p>    //我是最后一个，我会被选中
　　</p>　　

　　語法：hasClass(class)　　class為類別名稱//傳回布林值

   if($("p").hasClass("p2"))
　　{
　　　　alert("我里面含有class=p2的元素");　　//会弹出，p里的确存在class="p2"的元素
　　} 
　　<p>
　　　　<p>我是第一个P</p>
　　　　<p class="p2">我是第二个P</p>
　　　　<p>我是第三个P</p>
　　　　<p>我是第四个P</p>
　　</p>　　

　　語法：filter(expr|obj |ele|fn)　　expr：匹配表達式|obj：jQuery對象，用於匹配現有元素| DOM：用於匹配的DOM元素| function返回值作為匹配條件

　　$("p").filter(".p2");

　　<p>
　　　　<p>我是第一个P</p>
　　　　<p class="p2">我是第二个P</p>　　//我会被选中，我的class="p2"
　　　　<p>我是第三个P</p>
　　　　<p>我是第四个P</p>
　　</p>　　

　　語法：is(expr |obj|ele|fn)　　expr：匹配表達式|obj：jQuery對象，用於匹配現有元素| DOM：用於匹配的DOM元素| function返回值作為匹配條件

　　$($("p").first().is(".p2"))
　　{
　　　　alert("不会弹出，因为第一个P的class不等于p2");　
　　}

　　<p>
　　　　<p>我是第一个P</p>
　　　　<p class="p2">我是第二个P</p>　　//我会被选中，我的class="p2"
　　　　<p>我是第三个P</p>
　　　　<p>我是第四个P</p>
　　</p>　　

七、map ()

八、has()　　篩選出包含指定子元素的元素

　　語法:has(expr|ele)　　expr:選擇表達式| DOM元素選擇

　　$("p").has("p");
　
　　<p>　　　　　　　　　　　　　　　　　//本p会被选中，因为该p含有p子元素
　　　　<p>我是第一个P</p>
　　　　<p class="p2">我是第二个P</p>
　　　　<p>我是第三个P</p>
　　　　<p>我是第四个P</p>
　　</p>
　　<p>
　　　　<span>我是一个span</spam>
　　</p>

九、not()　　排除能夠被參數中匹配的元素

　  語法：not(expr|ele|fn)　　expr:選擇表達式| DOM元素選擇| fn的作用還不清楚

　　$("p").not(".p2");
　
　　<p>
　　　　<p>我是第一个P</p>　　　　　　　　//会被选中，没有class=p2
　　　　<p class="p2">我是第二个P</p>　 //不会被选中，因为有class=p2被not(".p2")排除了
　　　　<p>我是第三个P</p>　　　　　　　　//会被选中，没有class=p2
　　　　<p>我是第四个P</p> 　　　　　　　 //会被选中，没有class=p2
　　</p> 　

 十、slice()　　從指定索引開始，截取指定個數的元素

　　 語法：slice(start, [end])　　　start位置，　end可選，結束位置，不包含結束位置那個位置。如果不指定，則符合到最後一個。

　　$("p").slice(1,3)
　
　　<p>
　　　　<p>我是第一个P</p>　　　　　　　　//不会被选中，我索引为0
　　　　<p class="p2">我是第二个P</p>　 //会被选中，我索引为1
　　　　<p>我是第三个P</p>　　　　　　　　//会被选中，我索引为2
　　　　<p>我是第四个P</p> 　　　　　　　 //不会被选中，虽然我的索引为3，但是不包括我
　　</p> 　

********************** 篩選******************** *************

十一、children()　　篩選取得指定元素的資源

#　　　語法：children(expr);　　取得指定元素的資源， expr為子元素篩選條件

　　$("p").children(".p2");
　
　　<p>
　　　　<p>我是第一个P</p>　　　　　　　　//不会被选中，虽然我是p的子元素，但是我没class=p2
　　　　<p class="p2">我是第二个P</p>　 //会被选中，我既是p的子元素，又有class=p2
　　　　<p>我是第三个P</p>　　　　　　　　//不会被选中，虽然我是p的子元素，但是我没class=p2
　　　　<p>我是第四个P</p> 　　　　　　　 //不会被选中，虽然我是p的子元素，但是我没class=p2
　　</p> 　

 十二、closest()　　從當前元素開始，返回最先匹配到的符合條件的父元素

　　$("span").closest("p","p");
　　<p>　　　　　　　　　　　　　　　　　　 //不会被选中，被P抢了先机
　　　　<p>我是第一个P　　　　　　　　　　　　//P会被选中，因为P符合条件，而且是最先匹配到的，虽然p也符合条件了，但是p不是最先匹配到的。因此p不会被选中。
　　　　　　<span>我是P里的span</span>
　　　　</p>
　　</p> 　

十三、find()　　　　從指定元素中尋找子元素

　　　語法：find(expr|obj|ele)　　expr:匹配表達式| obj用於匹配的jQuery物件| DOM元素

　　$("p").find(".p2");　　　　
　　<p>
　　　　<p>我是第一个P</p>　　　　　　　　//不会被选中，虽然我是p的子元素，但是我没class=p2
　　　　<p class="p2">我是第二个P</p>　 //会被选中，我既是p的子元素，又有class=p2
　　　　<p>我是第三个P</p>　　　　　　　　//不会被选中，虽然我是p的子元素，但是我没class=p2
　　　　<p>我是第四个P</p> 　　　　　　　 //不会被选中，虽然我是p的子元素，但是我没class=p2
　　</p> 　

十四、next()取得指定元素的下一個兄弟元素

　　　語法：next(expr)　　expr:可選，篩選條件，如果下一個兄弟元素不符合改變條件，則傳回空。

　　$(".p2").next();　　　　//如果筛选改为$(".p2").next(".p4")那选中的是哪个呢？答案是：没选中任何元素，因为虽然有个class=p4的P，但它不是.p2的下一个。　　　　　　
　　<p>
　　　　<p>我是第一个P</p>　　　　　　　　
　　　　<p class="p2">我是第二个P</p>　 
　　　　<p>我是第三个P</p>　　　　　　　　//我是.p2的next
　　　　<p class="p4">我是第四个P</p>
　　</p> 　

十五、nextAll()　　  取得其後的所有兄弟元素

　　　 文法：nextAll(expr)　　expr:可選，篩選條件，取得其後符合expr條件的所有兄弟元素

　　$(".p2").nextAll();　　//如果筛选条件改为 $(".p2").nextAll(".p4");　　则只有我是第四个P会被选中
　　<p>
　　　　<p>我是第一个P</p>　　　　　　　　
　　　　<p class="p2">我是第二个P</p>　 
　　　　<p>我是第三个P</p>　　　　　　　　//会被选中，是.p2后面的兄弟元素
　　　　<p class="p4">我是第四个P</p>   //会被选中，是.p2后面的兄弟元素
　　</p> 　

十六、nextUntil()　　取得其後的元素，直到參數能匹配上的為止,不包括結束條件那個

　　　语法：nextUntil([expr|ele][,fil])　　expr筛选表达式 | DOM元素筛选，注意不包括参数里的那一个

　　$(".p2").nextUntil(".p4");　　　　//注意此方法并不会包括.p4
　　<p>
　　　　<p>我是第一个P</p>　　　　　　　　
　　　　<p class="p2">我是第二个P</p>　 
　　　　<p>我是第三个P</p>　　　　　　　　//会被选中，是.p2后面的兄弟元素
　　　　<p class="p4">我是第四个P</p>   //不会被选中，我作为结束条件，但不包括我
　　</p>

十七、offsetPosition()　　返回第一个用于定位的祖先元素，即查找祖先元素中position为relative或absolute的元素。

　　　语法：offsetPosition()　　此方法没有参数　　由于CSS的绝对定位的定位基准是相对最近的一个已定位元素，因此此方法的作用不言而喻。

　　$("span").offsetParent();
　　<p style="position:relative">　　//选中的是p，因此p是已定位元素。
　　　　<p>
　　　　　　<span>我是一个span</span>
　　　　</p>
　　</p>

十八、parent()　　　　获取指定元素的直接父元素

　　　　语法：parent(expr)　　expr为筛选条件，如果直接父元素不符合条件，则不返回任何元素(无论它的祖先是否具有能与expr匹配的)

　　$("span").parent();
　　<p style="position:relative">　　
　　　　<p>　　　　　　　　　　　　　　　　//我是span的直接父元素，我会被匹配到
　　　　　　<span>我是一个span</span>
　　　　</p>
　　</p>

十九、parents()　　 获取指定元素的所有祖先元素，一直到

　　　语法：parents(expr)　　expr为筛选条件，如果某个祖先元素不符合expr则排除

　　$("span").parents();
　　<p style="position:relative">　　//我是span的祖先元素，我也会被匹配到.另外<body></body>也会被匹配到　　
　　　　<p>　　　　　　　　　　　　　　　　//我是span的直接父元素，我会被匹配到
　　　　　　<span>我是一个span</span>
　　　　</p>
　　</p>

二十、parentsUntil()　　获取指定元素的祖先元素，知道参数里能匹配到的为止

　　　语法：parentsUntil(expr)　　expr为停止参数，一直匹配到expr为止，同时参数的条件是不会被匹配中的。

　　$("span").parentsUntil("p");
　　<p style="position:relative">　　//我是span的祖先元素，但是我作为停止条件，我也不会被选中　　
　　　　<p>　　　　　　　　　　　　　　　　//我是span的直接父元素，我会被选中
　　　　　　<span>我是一个span</span>
　　　　</p>
　　</p>

二十一、prev()　　　　获取指定元素的前一个兄弟元素

　　　　语法：prev(expr)　　　　expr：可选。当上一个兄弟元素不符合参数中的条件时，不返回任何元素。

　　$(".p2").prev();　　　　
　　<p>
　　　　<p>我是第一个P</p>　　　　　　//我会被选中，我是.p2的前一个元素。
　　　　<p class="p2">我是第二个P</p>　 
　　　　<p>我是第三个P</p>　　　　　　　　
　　　　<p class="p4">我是第四个P</p>   
　　</p>

二十二、prevAll()　　获取指定元素前面的所有兄弟元素

　　　　语法：prevAll(expr)　　expr:可选，排除所有不能够被expr匹配上的元素

　　$(".p4").prevAll(".p2");　　　　
　　<p>
　　　　<p>我是第一个P</p>　　　　　　　　//不会被选中，虽然我是.p4前面的兄弟元素，但是我没有class=p2
　　　　<p class="p2">我是第二个P</p>　 //会被选中，我既是.p4前面的兄弟元素，而且我有class=p2
　　　　<p>我是第三个P</p>　　　　　　　　//不会被选中，虽然我是.p4前面的兄弟元素，但是我没有class=p2
　　　　<p class="p4">我是第四个P</p> 　
　　</p>

二十三、prevUntil()　　获取指定元素前面的所有兄弟元素，直到参数里的条件能够匹配到的。 注意参数条件本身不会被匹配

　　　　语法：prevUntil([expr|ele][,fil])　　expr匹配表达式 | DOM元素匹配

　　$(".p4").prevUntil(".p2");　　　　
　　<p>
　　　　<p>我是第一个P</p>　　　　　　　　//不会被选中，到p2就停止了
　　　　<p class="p2">我是第二个P</p>　 //不会被选中，我是停止条件，不包括我
　　　　<p>我是第三个P</p>　　　　　　　　//会被选中，我在.p2前，递归到我在到.p2
　　　　<p class="p4">我是第四个P</p> 　//不会被选中，我自己怎么可能是我自己前面的呢？
　　</p>

/******************** 串联 *******************************/

二十四、siblings()　　获取指定元素的兄弟元素，不分前后

　　　　语法：siblings(expr);　　expr为筛选条件，不符合条件的不会选中

　　$(".p2").siblings();　　　　
　　<p>
　　　　<p>我是第一个P</p>　　　　　　　　//会被选中，我是.p2的兄弟元素
　　　　<p class="p2">我是第二个P</p>　 //不会被选中，我是自己
　　　　<p>我是第三个P</p>　　　　　　　　//会被选中，我是.p2的兄弟元素
　　　　<p class="p4">我是第四个P</p> 　//会被选中，我是.p2的兄弟元素
　　</p>

二十五、add()　　将选中的元素添加到jQuery对象集合中

　　　　add(expr|elements|html|jQueryObject)　　expr:选择器表达式 | DOM表达式 | Html片段 | jQuery对象,将jQuery对象集合一起方便操作；

　　$(".p2").add("span").css("background-color","red");　　　　
　　<p>
　　　　<p>我是第一个P</p>　　　　　　　　
　　　　<p class="p2">我是第二个P</p>　 //会变红
　　　　<p>我是第三个P</p>　　　　　　　　
　　　　<p class="p4">我是第四个P</p> 　
　　</p>
　　<span>我是一个span</span>　　　　　　//会变红

二十六、andSelf()　　将自身加到选中的jQuery集合中,以方便一次性操作

　　　　andSelf()　　此方法无参数

　　$(".p2").nextAll().andSelf().css("background-color","red");
　　<p>
　　　　<p>我是第一个P</p>　　　　　　　　
　　　　<p class="p2">我是第二个P</p>　 //会变红,这就是andSelf()的效果
　　　　<p>我是第三个P</p>　　　　　　　　//会变红
　　　　<p class="p4">我是第四个P</p> 　//会变红
　　</p>

二十七、end()　　 将改变当前选择器选中的操作回退为上一个状态。

　　　　end()　　　此方法没有参数

　　$(".p2").next().end().css("background-color","red");
　　<p>
　　　　<p>我是第一个P</p>　　　　　　　　
　　　　<p class="p2">我是第二个P</p>　 //会变红,这就end()的效果
　　　　<p>我是第三个P</p>　　　　　　　　//不会变红,尽管next()方法之后选中的是这一个，但是由于被end()方法回退了因此是上一个。
　　　　<p class="p4">我是第四个P</p>
　　</p>

以上是如何使用jQuery篩選排除元素以修改指定標籤的屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！