目前有以下9種:
以下4個我試的結果和基本過濾器 (jQuery 6)一樣,只是寫在括號後面而已
.eq():等於
.first():取第一筆
.last():取最後一筆
.not():取反
這篇寫以下五個範例:
.filter():選擇器選到了之後,又再過濾
.has():選擇器以下有什麼元素,選中的會包括選擇器
.is():判斷是不是選擇器、DOM元素、jQuery物件
.map():取得一個集合中的全部元素
.slice():取得集合裡的一部分
※HTML
※A
都是div<div class="a">A</div> <div class="b">B</div> <div class="c">C</div> <div class="d">D</div> <div class="e">E</div>
※B
A裡面再放span<div class="a"> A <span>aa</span> </div> <div class="b"> B <span>bb</span> </div> <div class="c"> C <span>cc</span> </div> <div class="d"> D <span>dd</span> </div> <div class="e"> E <span>ee</span> </div>
※C
A裡面再放div<div class="a"> A <div>aa</div> </div> <div class="b"> B <div>bb</div> </div> <div class="c"> C <div>cc</div> </div> <div class="d"> D <div>dd</div> </div> <div class="e"> E <div>ee</div> </div>
※D
<div class="a"> A <span class="b">B</span> </div> <div class="c">C</div> <div class="d"> D <p class="e"> E <span class="f">F</span> </p> </div> <div class="g">G</div> <div class="h">H</div>
※.filter()
裡面可以放四種:1.放選擇器裡的字串
2.放選擇器:這個我無法了解,下面會說
3.放元素:這個官網和網路上沒找到相關的範例,這個我也無法了解,我試過HTML元素和DOM了,知道的分享一下吧!
4.放函數
我只會第一種和第四種,其他兩種我無法理解
※放選擇器裡的字串、放選擇器、元素
※結果:A
$('div').filter('.d')、$('div').filter($('.d')):都選到D
$('div').filter(':even'):ACE
$('div').filter($(':even')):BD,完全無法了解
$('div').filter($('div')):全部
B:要注要filter裡面要針對div去設定,假設下面的span有id,設id是沒有作用的
$('div').filter('.d')、$('div').filter($('.d')):都選到D dd
$('div').filter(':even'):A aa C cc E ee
$('div').filter($(':even')):無,完全無法了解
$('div').filter($('div')):全部
$('div').filter($('span')):無
C
$('div').filter('.d')、$('div').filter($('.d')):都選到D dd
$('div').filter(':even'):全部
$('div').filter($(':even')):aa bb cc dd ee,完全無法了解
$('div').filter($('div')):全部
D
$('div').filter('.d')、$('div').filter($('.d')):DEF
$('div').filter(':even'):AB DEF H,而:odd就是CG了
$('div').filter($(':even')):結果是DEF H,而:odd是ABC G,完全無法了解
$('div').filter($('div')):全部
$('div').filter($('span')):無
$('div').filter($('p')):無
※函數
$(function() { $('div').filter(function(i) { console.log('text=' + $(this).text()); return $('p', $(this)).length == 1; // return i % 2 == 0; }).css('color', 'red'); }); ---------- <div class="a"> A <span>aa</span> </div> <div class="b"> B <p> p1 <span>b1</span> <span>b2</span> </p> </div> <div class="c"> C <p> p2 <span>cc</span> </p> </div>
※判斷div下面有1個p元素的,所以B p1 b1 b2 C p2 cc會選中
※註解那行是偶數會選中
※.has()
可以放選擇器裡的字串和DOM元素,官方只寫字串,我也還不知道相關的做法,等知道了再補以D為例:
$('div').has('p'):DEF
$('div').has('span'):ABDEF
以下的兩個不會包括選擇器本身,以這個範例就是div
$('div p'):EF
$('div span'):BF
※.is()
和.filter()一樣可以放4種※以.filter()的函數範例為例
$(function($) { $('div').filter(function(i) { console.log('text=' + $(this).text()); if($(this).is(':last-child')){ return true; } }).css('color', 'red'); });
※結果是C p2 cc
※.map()
可以放兩個參數,index和dom 集合$(function($) { var xxx = $(':checkbox').map(function() { return this.value; }).get(); alert(xxx); }); ---------- <label for="aaa">A</label> <input type="checkbox" value="a" id="aaa" name="ya"> <label for="bbb">B</label> <input type="checkbox" value="b" id="bbb" name="ya"> <label for="ccc">C</label> <input type="checkbox" value="c" id="ccc" name="ya"> <label for="ddd">D</label> <input type="checkbox" value="d" id="ddd" name="ya">
※結果是a,b,c,d
※當然也可以用jQuery的寫法,return $(this).val();
※.slice()
以D為例:$('div').slice():等同$('div').slice(0),取全部
$('div').slice(2):第2個到最後,D是第2個,所以是D~H
$('div').slice(1, 3):注意最後一個不會取,所以是CDEF
$('div').slice(-3, -1):要注意不是(-1,-3),-3一樣不會取,所以是DEFG
$('div').slice(-3):和正數不一樣,是取到-3(含)的意思,所以是DEFGH