遍歷樹 (jQuery 10)

官網連結
目前有以下14種：

.next()：取同輩的下一個
.prev()：取同輩的上一個
.nextAll()：取同輩的下一個到最後面
.prevAll()：取同輩的上一個到最前面
.siblings()：取自己同輩的，但不包括自己，也就是.nextAll()+prevAll()
.parent()：從上一層父輩到自己同輩的最後面全取
.parents()：從全部的父輩到自己同輩的最後面全取
.children()： 取自己的兒孫輩

.nextUntil()：有nextAll()的功能，而且多一個參數，可以更細的過濾
.prevUntil()：有prevAll()的功能，而且多一個參數，可以更細的過濾
.parentsUntil()：有parents()的功能，而且多一個參數，可以更細的過濾

.offsetParent()：整個樹的最上層
.find()：找下層的選擇器、元素
.closest()：很像parents()，但回傳的是0或1組

以下用.css( "background-color", "red" )來測

※HTML

<div class="a m">
    祖父母
    <div class="b n">
        父母
        <div class="c y">大兄<span>A</span></div>
        <p class="d">大姊<span>B</span></p>
        <div class="e">小兄<span>C</span></div>
        <div class="f">小姊<span>D</span></div>
        <div id="I">
            我
            <div class="g">
                我兒
                <span>孫子</span>
                <span>孫女</span>
            </div>
            <div class="h">
                我女
                <span>孫子</span>
                <span>孫女</span>
            </div>
        </div>
        <p class="i">大妹<span>a</span></p>
        <div class="j">大弟<span>b</span></div>
        <div class="k">小妹<span>c</span></div>
        <div class="l">小弟<span>d</span></div>
    </div>
</div>

※.prev()、.prevAll()、.next()、.nextAll()、.children()、.siblings()、.parent()、.parents()

※結果：
$('#I').prev()： 小姊D
$('#I').prevAll()： 大兄A、大姊B、小兄C、小姊D
$('#I').next()： 大妹a
$('#I').nextAll()： 大妹a、大弟b、小妹c、小弟d
$('#I').children()： 我兒、孫子、孫女、我女、孫子、孫女
$('#I').siblings()： 大兄A、大姊B、小兄C、小姊D、大妹a、大弟b、小妹c、小弟d
$('#I').parent()： 父母~小弟d
$('#I').parents()： 祖父母~小弟d

※這8個都可以加一個參數，放選擇器，如.children('#xxx')，以上面children的例子，結果的6個中，還要有id是xxx的才選取

※.nextUntil()、parentsUntil()、.prevUntil()：

※結果：
$('.g').parentsUntil()：等同parents()，所以是全部
$('.g').parentsUntil($('div.a'))：父母~小弟d
$('.g').parentsUntil($('div.b'))：我、我兒、孫子、孫女、我女、孫子、孫女
$('.g').parentsUntil($('div.b'), 'div')：我、我兒、孫子、孫女、我女、孫子、孫女

$('#I').nextUntil()：等同nextAll()，所以是大妹a、大弟b、小妹c、小弟d
$('#I').nextUntil($('div.k'))：大妹a、大弟b
$('#I').nextUntil($('div.k'), 'p')：大妹a

$('#I').prevUntil()：等同prevAll()，所以是大兄A、大姊B、小兄C、小姊D
$('#I').prevUntil($('div.c'))：大姊B、小兄C、小姊D
$('#I').prevUntil($('div.c'), 'div')：小兄C、小姊D

※.offsetParent()、.find()、.closest()

※結果：
$('.y').offsetParent()：祖父母~小弟d，這個我不太懂，參考官方的範例
$('.b').find('div')：大兄A~小弟d，但大姊B、大妹a沒有被選中(因為是p)
$('.b').find('.h')：我女、孫子、孫女
$('.b').find('.i, .e')：小兄C、大妹a
$('.g').closest('.b')：父母~小弟d(此範例的結果會和parents()一樣)

※.closest()和.parents()的區別

<div>
    A
    <p>
        B
        <div>
            C
            <p>
                D
                <span>E</span>
            </p>
        </div>
    </p>
</div>

※結果：
$('span').parents('div')：ABCDE
$('span').closest('div')：CDE

遍歷過濾器 (jQuery 9)

官網連結
目前有以下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

內容過濾器、能見度過濾器 (jQuery 8)

※內容過濾器

官網連結
目前有以下4種：


:contains()：抓包含的字串，大小寫有差，子字串、後面有「-」也抓的到，可以說是屬性選擇器的6種綜合體(屬性選擇器有7種，去掉!=)
:empty：只有抓空而已(tab、空格、換行、<br>、\t、\r\n都不行)
:has()：有包含其他的selector，抓的是選擇器的，不是has裡面的
:parent：父元素以下(含)都算

※:contains()

$(function(){
    $( "span:contains('abc')" ).css('color', 'green');
});
----------
<span>Abc def</span>
<span>abc def</span>
<div>abc def</div>
<span>abC def</span>
<span>abcdef</span>
<span>abc-def</span>

※會抓到2、5、6行

※變色是整行都變色，並不是包含的字變色

※:empty

$(function(){
    $( "td:empty" ).css('background-color', 'lightblue');
});
----------
<table border='1' width="20%">
    <tr>
        <td></td>
        <td> </td>
        <td>
        </td>
        <td><br/></td>
    </tr>
</table>

※只會抓到第一個

※:has()

$(function(){
    $( "div:has(p)" ).css('color', 'red');
    $( "div:has(div)" ).css('color', 'yellow');
    $( "div:has(ul)" ).css('color', 'green');
    $( "div:has(li)" ).css('color', 'blue');
    $( "div:has(span)" ).css('color', 'purple');
});
----------
<div>
    <p>
        A
        <div>B</div>
    </p>
    <ul>
        <li>C</li>
        <li>D</li>
    </ul>
    <span>E</span>
</div>
<div>
    <div>F</div>
<div>

※A~E五個都會抓到，F只有第二個會抓到

※會變顏色的是整個div，也就是選擇器上的div，並不是has裡面的

※:parent

$(function(){
    $( "#a:parent" ).css('color', 'red');
});
----------
<div id="a">
    A
    <div id="b">
        B
        <div id="c">C</div>
    </div>
    <div id="d">
        D
        <div id="e">E</div>
        <div id="f">F</div>
    </div>
    <div id="g">G</div>
</div>
<div id="h">
    H
    <div id="i">I</div>
<div>

※結果：
$( "#a:parent" )：A~G
$( "#b:parent" )：BC
$( "#c:parent" )：D
$( "#d:parent" )：DEF
$( "#e:parent" )：E
$( "#f:parent" )：F
$( "#g:parent" )：G
$( "#h:parent" )：HI
$( "#i:parent" )：I

※能見度過濾器

官網連結
只有兩種：


:hidden：抓隱藏起來的
:visible：抓沒有隱藏的

$(function(){
    alert($( "div:visible" ).text());// A
    alert($( "div:hidden" ).text());// B
    alert($( "input:visible" ).length);// 2
    $('input[disabled]').hide();
    alert($( "input:visible" ).length);// 1
});
----------
<div>A</div>
<div style="display:none;">B</div>
<input type="text" disabled="disabled" />
<input type="text" />

※disabled不算隱藏

子過濾器 (jQuery 7)

官網連結

目前總共有10個：
:first-child：取指定元素的第一筆，不會忽略其他元素，第一筆不是指定的元素，就抓不到
:last-child：取指定元素的最後一筆，不會忽略其他元素，最後一筆不是指定的元素，就抓不到

:first-of-type：取指定元素的第一筆，忽略其他元素，只看的到自己的元素
:last-of-type：取指定元素的最後一筆，忽略其他元素，只看的到自己的元素

:only-child：只有一個才會選中，所以才叫only，不會忽略其他元素，唯一的一筆不是指定的元素，就抓不到
:only-of-type：只有一個才會選中，所以才叫only，忽略其他元素，只看的到自己的元素


※以下4個都是從1開始，和:eq()、:gt()、:lt()從0開始不一樣
裡面可以放3種值(或者說4種)
1.數字，只取一筆
2.odd／even，也就是奇數、偶數(這個就不做範例了，第1個數字的會了，想一下就OK了)
3.公式，用「n」，表示每幾個的意思，大小寫沒差


:nth-child()：取指定元素的第x筆或(每x筆)，從前面開始找，不會忽略其他元素，第x筆或(每x筆)不是指定的元素，就抓不到
:nth-last-child()：取指定元素的第x筆或(每x筆)，從後面開始找，不會忽略其他元素，第x筆或(每x筆)不是指定的元素，就抓不到

:nth-of-type()：取指定元素的第x筆或(每x筆)，從前面開始找，忽略其他元素，只看的到自己的元素
:nth-last-of-type()：取指定元素的第x筆或(每x筆)，從後面開始找，忽略其他元素，只看的到自己的元素


※有child所有元素都看的到，有of-type只會看到指定的元素



※以下列出A~D四個HTML，測試8個子過濾器，剩下2個only，還有另外的範例

※A

<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>

※B

<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<em>E</em>

※C

<div>
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
    <span>G</span>
</div>
<div>
    <span>H</span>
    <span>I</span>
    <span>J</span>
    <span>K</span>
    <span>L</span>
</div>
<div>
    <span>M</span>
    <span>N</span>
    <span>O</span>
    <span>P</span>
    <span>Q</span>
    <span>R</span>
    <span>S</span>
</div>

※D

<div>
    <span>A</span>
    <span>B</span>
    <em>C</em>
    <span>D</span>
    <span>E</span>
    <span>F</span>
    <span>G</span>
</div>
<div>
    <span>H</span>
    <b>I</b>
    <span>J</span>
    <span>K</span>
    <span>L</span>
</div>
<div>
    <i>M</i>
    <span>N</span>
    <span>O</span>
    <span>P</span>
    <span>Q</span>
    <span>R</span>
    <span>S</span>
</div>

※:first-child／:last-child

A：
$('span:first-child')：A
$('span:last-child')：E

B：
$('span:first-child')：A
$('span:last-child')：無

C：
$('span:first-child')：AHM
$('span:last-child')：GLS

D：
$('span:first-child')：AH
$('span:last-child')：GLS

※:first-of-type／:last-of-type

A：
$('span:first-of-type')：A
$('span:last-of-type')：E

B：
$('span:first-of-type')：A
$('span:last-of-type')：D

C：
$('span:first-of-type')：AHM
$('span:last-of-type')：GLS

D：
$('span:first-of-type')：AHN
$('span:last-of-type')：GLS

※:nth-child()／:nth-last-child()

 A：
$('span:nth-child(5)')：E
$('span:nth-last-child(5)')：A

$('span:nth-child(2n)')：BD
$('span:nth-last-child(2n)')：BD

$('span:nth-child(2n-1)')：ACE
$('span:nth-last-child(2n-1)')：ACE


B：
$('span:nth-child(5)')：無，如果下面還有一行<span>F</span>，還是不會選到
$('span:nth-last-child(5)')：A，但如果下面還有一行<span>F</span>，會選到B

$('span:nth-child(2n)')：BD
$('span:nth-last-child(2n)')：BD

$('span:nth-child(2n-1)')：AC
$('span:nth-last-child(2n-1)')：AC


C：
$('span:nth-child(2)')：BIN
$('span:nth-last-child(2)')：FKR

$('span:nth-child(2n)')：BDF IK NPR
$('span:nth-last-child(2n)')：BDF IK NPR

$('span:nth-child(2n-1)')：ACEG HJL MOQS
$('span:nth-last-child(2n-1)')：ACEG HJL MOQS


D：
$('span:nth-child(2)')：BN
$('span:nth-last-child(2)')：FKR

$('span:nth-child(2n)')：BDF K NPR
$('span:nth-last-child(2n)')：BDF K NPR

$('span:nth-child(2n-1)')：AEG HJL OQS
$('span:nth-last-child(2n-1)')：AEG HJL OQS

※:nth-of-type()／:nth-last-of-type()

A：
$('span:nth-of-type(5)')：E
$('span:nth-last-of-type(5)')：A

$('span:nth-of-type(2n)')：BD
$('span:nth-last-of-type(2n)')：BD

$('span:nth-of-type(2n-1)')：ACE
$('span:nth-last-of-type(2n-1)')：ACE

B：
$('span:nth-of-type(5)')：無，但如果下面還有一行<span>F</span>，會選到F
$('span:nth-last-of-type(5)')：無，但如果下面還有一行<span>F</span>，會選到A

$('span:nth-of-type(2n)')：BD
$('span:nth-last-of-type(2n)')：AC

$('span:nth-of-type(2n-1)')：AC
$('span:nth-last-of-type(2n-1)')：BD

C：
$('span:nth-of-type(2)')：BIN
$('span:nth-last-of-type(2)')：FKR

$('span:nth-of-type(2n)')：BDF IK NPR
$('span:nth-last-of-type(2n)')：BDF IK NPR

$('span:nth-of-type(2n-1)')：ACEG HJL MOQS
$('span:nth-last-of-type(2n-1)')：ACEG HJL MOQS

D：
$('span:nth-of-type(2)')：BJO
$('span:nth-last-of-type(2)')：FKR

$('span:nth-of-type(2n)')：BEG JL OQS
$('span:nth-last-of-type(2n)')：ADF HK NPR

$('span:nth-of-type(2n-1)')：ADF HK NPR
$('span:nth-last-of-type(2n-1)')：BEG JL OQS

※:only-child／:only-of-type

※範例1

<span>A</span>

※結果：
$('span:only-child')：A，就算是多一行<br />或者兩個span，中間空一格，也抓不到
但如果用<div>、<p>…等包起來就可以

$('span:only-of-type')：A，多一行<br />也可以，它只認span，所以兩個span才不行，
當然用<div>、<p>…等包起來還是可以

※範例2

<em>A</em>
<span>B</span>
<b>C</b>

※結果：
$('span:only-child')：無
$('span:only-of-type')：B

※範例3

<div>
    <span>A</span>
    <span>B</span>
</div>
<div>
    <span>C</span>
</div>
<div>
    <span>D</span>
    <span>E</span>
    <span>F</span>
</div>
<div>
    <span>G</span>
</div>

※結果：
$('span:only-child')：CG
$('span:only-of-type')：CG

※範例4

<div>
    <span>A</span>
    <span>B</span>
</div>
<div>
    <span>C</span>
</div>
<div>
    <em>D</em>
    <span>E</span>
    <b>F</b>
</div>
<div>
    <span>G</span>
</div>

※結果：
$('span:only-child')：CG
$('span:only-of-type')：CEG

基本過濾器 (jQuery 6)

官網連結

目前總共有14個：

以下3個1.8(含)之後可接受負數，1.7(含)以上的我才會寫，想知道的看官網藍色的那一條最右邊都有寫
:eq()：equals，等於，從0開始，和.eq()相同，但.eq()很早就可以用負數了，兩個現在只差在寫在括號裡面或外面而已； 不過.eq()是放在遍歷裡，所以跑迴圈時，儘量用.eq，其他再用:eq
:gt()：greater than, 大於，從0開始，目前沒有.gt()這種東西
:lt()：last than小於，從0開始，目前沒有.lt()這種東西

:first：取第一筆
:last：取最後一筆

:odd：取奇數
:even：取偶數

:header：取HTML的H1~H6
:not()：取反

:lang()：抓屬性lang的字串，大小寫沒差

:root：取得HTML物件

:animated：取得有動畫的物件
:target：取得網址上#後面的字
:focus：jQuery 5介紹過，所以它是選擇器，也是過濾器

※:eq、:gt、:lt、:first、:last

$(function() {
    $("ul:eq(1) > li:eq(1)").css('background-color', 'red');
    
    for(var i=0; i<$('ul').length; i++){
        $("ul:eq(" + i + ") > li:lt(1)").css('background-color', 'red');
    }
    
    $("ul:last > li:first").css('background-color', 'red');
});
----------
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>
<ul>
    <li>F</li>
    <li>G</li>
</ul>
<ul>
    <li>H</li>
    <li>I</li>
    <li>J</li>
</ul>

※$("ul:eq(1) > li:eq(1)")，是比較好的寫法，G被選中

※$("ul > li:eq(1)")，只有B會被選中，並不是所有的ul，我試的結果也只有:eq指的是第一個，其他都是指全部的ul

※如果每一個ul都要選中，我想到的是用迴圈

※$("ul > li:lt(1)")，小於1(B)的，所以結果是A

※$("ul > li:gt(1)")，大於1(B)的，所以C~J都會被選中

※$("ul > li:first")，只有A會被選中

※$("ul > li:last")，只有J會被選中

※:odd、:even

$("ul li:odd").css('background-color', 'lightgreen');
$("ul li:even").css('background-color', 'pink');

※ul一樣指全部，也是從0開始，0是偶數，所以第一行是粉紅色

※:header、:not

$(function() {
    $(':header').css('color', 'red');
    $('input:not(:disabled)').css('color', 'green');
    $(':header').css('color', 'red');
});
----------
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>
<h7>7</h7>
<h8>8</h8>
<h9>9</h9>
<h10>10</h10>
    
<input value="a" />
<input value="b" />
<input value="c" disabled="disabled"/>
<input value="d" />
<input value="e" disabled="disabled"/>

※雖然HTML沒有H7~H9，但我試也是可以(但不會換行)，H10(含)以上就不行了

※:lang

$(function() {
    $("span:lang(en_us)").css('background-color', 'red');
    $("span:lang(zh_tw)").css('color', 'green');
});
----------
<span lang="EN_US">
    a
    <span>
        b
        <span>c</span>
    </span>
</span>
<span lang="zh_tw">
    1
    <span>
        2
        <span>3</span>
    </span>
</span>

※很多屬性都有lang，裡面的字串對應到:lang的()裡就能選中了，所以不一定要用zh_tw這種格式，大小寫沒差

※:root

$(function() {
    var xxx = $(':root');
    // debugger;
    alert(xxx[0].nodeName);
});

※取得HTML物件，但為什麼可以.nodeName呢？還可以點哪些呢？
打開註解那一行後，瀏覽器按F12，然後再按重整，如下操作(只截IE8、IE11和Chrome的圖)：

※最後的圖是IE8，要先Start Debugging再重整才有作用

※有下拉是因為滑鼠要放在變數(xxx)不動，出來後，左邊就是可以點的名稱了，右邊是值

※:animate

$(function() {
    $("div").animate({width: "500px"}, "slow");
    $("span").animate({width: "500px"}, "slow");
    var xxx = $(":animated");
    alert(xxx[0].nodeName);
    alert(xxx[1].nodeName);
});
----------
<div></div>
<span></span>

※必須先有動畫，所以前兩行讓下面的div和span有動畫，然後就可以取得物件，能點什麼名稱，和上面的圖一樣的做法

※:target

$(function($) {
    $('button').click(function(){
        test();
    });
});
    
function test(){
    $(':target').css('color', 'red');
}
----------
<button>test</button>
<div id="xxx">div</div>
<a href="#xxx">xxx</a>

※a href="#"其實就是書籤的功能，點擊超連結後，網址後面就會多個#xxx，這時再按button就會看到變化了

表單選擇器 (jQuery 5)

官網連結

※input

目前有15個，先說明下面這10個
:input：HTML元素是input、textarea、select、button
以下9個都是input裡的屬性：

:text：input type是text的
:password：input type是password的
:checkbox：input type是checkbox的
:radio：input type是radio的
:file：input type是file的
:button：input type是button、HTML元素是button的
:image：input type是image，HTML元素是img的不會選中
:reset：input type是reset的
:submit：input type是submit、HTML元素是button的(type是button不會選中)，IE瀏覽器有些版本的button不會選中，官網有寫

※測試

<style>
    .xxx{ background-color: lightgreen; }
</style>
    
    
function input(){
    $(':input').addClass('xxx');
    // $(':input').attr('checked', 'checked');
}
    
function text(){
    $(':text').addClass('xxx');
}
    
function password(){
    $(':password').addClass('xxx');
}
    
function file(){
    $(':file').addClass('xxx');
}
    
function reset(){
    $(':reset').addClass('xxx');
}
    
function submit(){
    $(':submit').addClass('xxx');
}
    
function image(){
    $(':image').addClass('xxx');
}
    
function button(){
    $(':button').addClass('xxx');
}
    
function checkbox(){
    $(':checkbox').attr('checked', 'checked');
}
    
function radio(){
    $(':radio').addClass('xxx');
}
    
function hid(){
    alert($(':input').length);
}
----------
<form>
    <input type="text" value="t" />text<br />
    <input type="password" value="p" />password<br />
    <input type="file" />file<br />
    <textarea>textarea</textarea>textarea<br />
    <input type="hidden" value="h" />hidden<br />
    <input type="reset" value="重置" />reset<br />
    <input type="submit" value="送交" />submit<br />
    
    <input type="image" />image1<br />
    <img alt="" src="">image2<br />
    
    <input type="button" value="b1" />button1<br />
    <button value="b2">Button2</button>button2<br />
    
    <input type="checkbox" name="alphabeta" value="A" />a
    <input type="checkbox" name="alphabeta" value="B" />b
    <input type="checkbox" name="alphabeta" value="C" />c<br />
    
    <input type="radio" name="digit" value="1" />one
    <input type="radio" name="digit" value="2" />two
    <input type="radio" name="digit" value="3" />three<br />
    
    <select>
        <option value="o1">Option1</option>
        <option value="o2">Option2</option>
        <option value="o3">Option3</option>
    </select><br />
</form>
<br />
<br />
<button onclick="input()">測input</button>
<button onclick="text()">測text</button>
<button onclick="password()">測password</button>
    
<button onclick="file()">測file</button>
<button onclick="reset()">測reset</button>
<button onclick="submit()">測submit</button>
    
<button onclick="image()">測image</button>
<button onclick="button()">測button</button>
<button onclick="checkbox()">測checkbox</button>
<button onclick="radio()">測radio</button>
<button onclick="hid()">測hidden</button>

※由於:input對checkbox看不出效果，所以我在input函數有註解一行，打開後，連radio也會勾選，很正常，只是要測:input對checkbox是有效的而已
有些jQuery的版本要將attr替換成prop

※使用:input時hidden也抓的到，按下測:input按鈕時，只有一個img沒抓到，算一算有27個，而按下測hidden的按鈕時，有28個
或者多刪一些不必要的來測就知道了

※我本來hid()是寫hidden()，發現沒有作用，它也不是關鍵字或保留字，但就是沒用

※狀態

:checked：判斷checkbox、radio用的勾選
:selected：判斷select option用的勾選
:disabled：判斷是disabled
:enabled：判斷不是disabled
:focus：判斷是否聚焦(游標進去的狀態)

※:enabled／:disabled

$(function() {
    $(":enabled").css('color', 'green');
    $(":disabled").css('color', 'red');
});
----------
<input type="text" value="a" />text<br />
<input type="text" value="b" disabled="disabled" />disabled<br />
<input type="text" value="c" readonly="readonly" />readonly<br />

※結果b是紅色，其他都是綠色

※:checked

$(function() {
    $("[name='digit']:checked").css('background-color', 'red');
    alert($("[name='alphabeta']:checked").length);
});
----------
<input type="checkbox" name="alphabeta" value="A" checked="checked" />a
<input type="checkbox" name="alphabeta" value="B" checked />b
<input type="checkbox" name="alphabeta" value="C" checked=true />c
<input type="checkbox" name="alphabeta" value="D" checked="true" />d
<input type="checkbox" name="alphabeta" value="E" />e<br />
    
<input type="radio" name="digit" value="1" />one
<input type="radio" name="digit" value="2" checked="checked" />two
<input type="radio" name="digit" value="3" />three<br />

※checked有四種寫法，最好的就是checked='checked'，其他的有可能瀏覽器不支援

※:selected單選

$(function() {
    alert($("option:selected").length);
});
----------
<select>
    <option>Option1</option>
    <option selected="selected">Option2</option>
    <option>Option3</option>
</select>

※:selected多選

function test(){
    $('option:selected').each(function(){
        alert($(this).val());
    });
}
----------
<select multiple="multiple">
    <option value="o1">Option1</option>
    <option value="o2" selected="selected">Option2</option>
    <option value="o3">Option3</option>
    <option value="o4">Option4</option>
    <option value="o5">Option5</option>
</select>
<button onclick="test()">測試</button>

※要按右Ctrl鍵不放，再按滑鼠左鍵

※:focus

$(function() {
    $('*').focus(function(){
        test();
    });
});
    
function test(){
    if($(':checkbox').is(':focus')){
        alert('a');
    } else if($(':radio').is(':focus')){
        alert('b');
    } else if($(':text').is(':focus')){
        alert('c');
    } else if($('#tt').is(':focus')){
        alert('d');
    }
}
----------
<input type="checkbox" />
<input type="checkbox" />
<input type="radio" />
<input type="radio" />
<input type="text" value="text" />
<textarea id="tt">textarea</textarea>

※option用這一招沒用，因為滑鼠游標進不去，或者用disabled也是點不進去，但readonly是可以的

※官網那一招進的去，還蠻厲害的，可自行參考

階層選擇器 (jQuery 4)

官網連結

※>和空格

$(function() {
    $("div > p" ).css('color', 'lightgreen');
});
----------
<div>
    div1
    <p>p1</p>
    <div>
        div2
        <p>p2</p>
    </div>
</div>
<div>
    div3
    <form>
        <p>p3</p>
    </form>
</div>

※「>」是有父子關係的，以這個例子就是div的兒子是p的，所以p1和p2會被選中

※如果下$("div p" )，就沒有父子關係了，所以不管幾層，div下有p的就被選中，所以p1、p2、p3都會被選中

※如果下$("div >")，表示div的兒子都要選中，所以p1、div2、p2、p3都會選中

※如果下$("div > div > p")，那就只有p2被選中

※+

$(function() {
    $("a + div + p" ).css('color', 'lightgreen');
});
----------
<span>span1</span>
<a>a</a>
<div>
    div
    <span>span2</span>
</div>
<p>p

※+表示同一層的下一個，英文是next，所以上一個不是喔！

※這個例子，p會被選中

※如果下$("a + div+")，p也會被選中，因為表示div的下一個，沒有特別指定是什麼元素
假設程式碼的最後是div不是p，那範例就沒有東西被選中，而這個例子div還是會被選中

※如果下$("a + div")，div和span2會被選中

※$("a + div")，a和div之間不能有其他標籤

※~

$(function() {
    $("a ~ div" ).css('color', 'lightgreen');
});
----------
<div>div1</div>
<a>a</a>
<div>div2</div>
<div>
    div3
    <span>span</span>
</div>
<input type="text" value="input" />

※~表示同一層的意思，但上一個(prev)還是不會理它，以這個例子就是和a同層，而且是div的要選中，所以會選中div2、div3、span

※如果下$("a ~" )，那div2、div3、span、input會被選中

※如果a和div中間有其他元素也是可以的


※不管那一種階層，自己都不會選中