jQuery選擇器

jQuery選擇器分爲：基本選擇器、層次選擇器、過濾選擇器、表單選擇器

其中過濾選擇器又分爲：簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器

基本選擇器

基本選擇器由元素ID，class，元素名，多個選擇符組成，能夠完成大多數頁面元素的查找

<script type="text/javascript">
    var div = $("div");
    //經過元素名選擇頁面的div元素對象
    var wra = $("#wrapper");
    //經過ID選擇對應的ID爲wrapper的元素
    var box = $(".box");
    //經過類名選擇對應的class爲box的元素
    var boxs = $("#wrapper .box");
    //多個選擇符組成
</script>
<div id="wrapper">
    <div class="box">

    </div>
</div>

層次選擇器

經過DOM元素間的層次關係獲取元素，主要的層次關係包括：後代、父子、相鄰、兄弟關係

<script type="text/javascript">
    var ap = $("div p");
    // 選擇div元素後面的因此後代p元素
    var p = $(".box>p");
    // 選擇.box的子元素p
    var next = $(".box>p").next();
    //  選擇.box的子元素p的下一個元素
    var nextall = $(".box>p").nextAll();
    //  選擇.box的子元素p的後面的全部元素
    var li = $(".ts").siblings();
    //  選擇ul下面的不含.ts樣式的li元素
</script>
<div id="wrapper">
    <div class="box">
        <p class="t">
            選擇器測試
        </p>
        <p>
            選擇器測試
        </p>
        <p>
            選擇器測試
        </p>
        <ul>
            <li class="ts">
                1
            </li>
            <li>
                2
            </li>
            <li>
                3
            </li>
        </ul>
        <div class="p">
            <p>
                今天心情不錯
            </p>
        </div>
    </div>
</div>

簡單過濾選擇器

過濾選擇器根據某過濾規則進行元素的匹配，書寫時都已 「：」 開頭

• first()或:first ------選擇第一個元素 ------返回單個元素

• last()或:last ------選擇最後一個元素 ------返回單個元素

• not(selector) ------選擇除了給定選擇器外的全部元素 ------返回元素集合

• even ------選擇全部索引值爲偶數的元素，索引號從0開始 ------返回元素集合

• odd ------選擇全部索引值爲奇數的元素，索引號從0開始 ------返回元素集合

• eq(index) ------選擇指定索引值的元素,索引號從0開始 ------返回單個元素

• gt(index) ------選擇全部大於給定索引值的元素，索引號從0開始 ------返回元素集合

• lt(index) ------選擇全部小於給定索引值的元素，索引號從0開始 ------返回元素集合

• header ------選擇全部標題類型的元素，如h1,h2.... ------返回元素集合

• animated ------選擇全部正在執行動畫的元素 ------返回元素集合

內容過濾選擇器

根據元素中的文字內容或包含的子元素特徵獲取元素

• contains(text) ------選擇包含給定文本的元素 ------返回元素集合

• empty ------獲取全部不包含子元素或者空文本的元素 ------返回元素集合

• has(selector) ------獲取全部選擇器所匹配的元素的元素 ------返回元素集合

• parent ------獲取含有子元素或包含文本的元素 ------返回元素集合

可見性過濾選擇器

• hidden ------獲取全部不可見的元素 ------返回元素集合

• visible ------獲取全部可見的元素 ------返回元素集合

屬性過濾選擇器

• [arrtibute] ------獲取包含給定屬性的元素 ------返回元素集合

• [arrtibute=value] ------獲取等於給定的屬性是某各特定值的元素 ------返回元素集合

• [arrtibute!=value] ------獲取不等於給定的屬性是某各特定值的元素 ------返回元素集合

• [arrtibute^=value] ------獲取給定的屬性是某些值開始的元素 ------返回元素集合

• [arrtibute$=value] ------獲取給定的屬性是某些值結尾的元素 ------返回元素集合

• [arrtibute*=value] ------獲取給定的屬性是包含某些值的元素 ------返回元素集合

• [selector1][selector2][selectorn] ------獲取知足多個條件的複合屬性的元素 ------返回元素集合

子元素過濾選擇器

• nth-child(eq/even/odd/index) ------獲取每一個父元素下的特定位置元素，索引從0開始 ------返回元素集合

• first-child ------獲取每一個父元素下的第一個子元素 ------返回元素集合

• last-child ------獲取每一個父元素下的最後一個子元素 ------返回元素集合

• only-child ------獲取每一個父元素下的僅有一個子元素 ------返回元素集合

表單對象屬性過濾選擇器

• enabled ------獲取表單中全部屬性爲可用的元素 ------返回元素集合

• disabled ------獲取表單中全部屬性爲不可用的元素 ------返回元素集合

• checked ------獲取表單中全部被選中的元素 ------返回元素集合

• selected ------獲取表單中全部被選中option的元素 ------返回元素集合

表單選擇器

• input ------獲取全部input、textarea、select ------返回元素集合

• text ------獲取全部單行文本框 ------返回元素集合

• password ------獲取全部密碼框 ------返回元素集合

• radio ------獲取全部單選按鈕 ------返回元素集合

• checkbox ------獲取全部複選框 ------返回元素集合

• submit ------獲取全部提交按鈕 ------返回元素集合

• image ------獲取全部圖象域 ------返回元素集合

• reset ------獲取全部重置按鈕 ------返回元素集合

• botton ------獲取全部按鈕 ------返回元素集合

• file ------獲取全部文件域 ------返回元素集合