初學jQuery之選擇器

時間 2019-12-06

原文原文鏈接

選擇器

選擇器是什麼

jQuery的選擇器是用於定位HTML頁面中的元素，其用法最初設計是源於CSS的選擇其用法，可是jQuery的選擇器進行了擴展，遠比CSS的選擇器更增強大。css

基本選擇器

基本選擇去具備如下幾種：
1.ID選擇器
2.元素選擇器
3.類選擇器
4.通配符選擇器
5.組合選擇器
示例代碼以下：html

<body>
<div id="d1">臥龍學苑</div>
<div id="d2" class="cls">前端開發</div>
<script>
    console.log($('#d1'));
    console.log($('div'));
    console.log($('.cls'));
    // 通配符選擇器 - 匹配全部
    console.log($('*'));
    // 組合選擇器 - 多個選擇器之間使用逗號分隔(並集)
    console.log($('#d1, .cls'));
    // 組合選擇器 - 多個選擇器之間沒有任何分隔(交集)
    console.log($('#d2.cls'));

</script>
</body>

層級選擇器

jQuery的層級選擇器具備如下幾種：
1.後代選擇器根據給定元素的祖先元素下匹配全部的後代元素
2.子選擇器根據給定的父元素下匹配全部的子元素
3.相鄰兄弟選擇器根據給定的目標元素匹配下一個相鄰兄弟元素
4.普通兄弟選擇器根據給定的目標元素匹配後面全部兄弟元素
因爲jQuery對象是類數組對象，及時匹配的元素只有一個，返回的結果依舊是類數組對象。
示例代碼以下：前端

<body>
<div id="parent">
    <div id="child">
        <div id="d6"></div>
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d4"></div>
        <div id="d5"></div>
    </div>
    <div id="child2">
        <div id="d3"></div>
    </div>
</div>
<script>
    console.log($('#parent div'));
    //父子選擇器
    console.log($('#parent>div'));
    // 指定元素的下一個相鄰兄弟元素
    console.log($('#d1+div'));
    // 指定元素的後面全部的兄弟元素
    console.log($('#d1~div'));
    // siblings()方法 - 獲取指定元素全部的兄弟元素(前面+後面)
    console.log($('#d1').siblings('div'));

</script>
</body>

基本過濾選擇器

jQuery的基本過濾選擇器具備如下幾種：
1.:first過濾選擇器獲取第一個元素
2.：last過濾選擇器獲取最後一個元素
3.：even過濾選擇器匹配全部索引值爲偶數的元素，從0開始
4.：odd過濾選擇器匹配全部索引值爲奇數的元素，從0開始
5.:eq（）過濾選擇器匹配一個給定索引值的元素
6.:gt（）過濾選擇器匹配全部大於給定索引值的元素
7.:lt（）過濾選擇器匹配全部小於給定索引值的元素
8.:not（）過濾選擇器去除全部與給定選擇器匹配的元素
9.:header過濾選擇器匹配如h1 h2 h3 h4 h5 h6之類的標題元素
10.:animated過濾選擇器匹配正在執行動畫效果的元素（由jQuery實現的動畫）
示例代碼以下：數組

<body>
<h1>這是標題</h1>
<h2>這是標題</h2>
<div>臥龍學苑</div>
<div id="d2">
    <div id="child"></div>
</div>
<div></div>
<div></div>
<div>前端開發</div>

<div id="animated"></div>

<script>
    // 在指定範圍匹配的元素中進行篩選
    console.log($('div:first'));
    console.log($('div:last'));
    // 索引值爲偶數時 -> 奇數元素；索引值爲奇數時 -> 偶數元素
    console.log($('div:even'));
    console.log($('div:odd'));
    // :eq(index) -> index表示索引值
    console.log($('div:eq(0)'));// 等於
    console.log($('div:gt(2)'));// 大於
    console.log($('div:lt(2)'));// 小於
    // :header -> 匹配h1~h6元素
    console.log($(':header'));

    function animated(){
        $('#animated').slideToggle(animated);
    }
    animated();
    // :animated -> 只能匹配由jQuery實現的動畫
    console.log($(':animated'));

    console.log($('div:not("#child")'));

</script>
</body>

內容過濾選擇器

jQuery中提供瞭如下幾種內容過濾選擇器
1.：contains（）過濾選擇器匹配包含給定位版本的元素
2.：empty過濾選擇器匹配不包含子元素或者文本的空元素
3.：parent過濾選擇器匹配有子元素或者文本的元素
4.：has（）過濾選擇去匹配含有選擇器所匹配的元素的元素
示例代碼以下：ide

<body>
<div>這是div元素</div>
<div></div>
<div>
    <div id="child"></div>
</div>
<script>
    console.log($('div:contains("di")'));
    console.log($('div:empty'));
    console.log($('div:parent'));
    // :has() - 表示包含匹配指定選擇器元素的父級元素
    console.log($('div:has("#child")')[0]);

</script>
</body>

可見性過濾選擇器

1.：hidden過濾選擇器匹配全部不可見元素，或者type爲hidde的元素
2.：visible過濾器選擇器匹配全部可見的元素動畫

<body>
<div id="d1">臥龍學苑</div>
<div id="d2">前端開發</div>
<input type="hidden" value="用戶名">
<input type="text" name="username">
<script>
    /*
        :hidden選擇器
        * 不能匹配CSS樣式屬性visibility設置爲hidden的隱藏元素
        * 還能匹配HTML頁面中不作任何顯示效果的元素
        * 用法 - 儘可能肯定元素類型或指定範圍
     */
    console.log($(':hidden'));
    /*
        :visible選擇器
        * 匹配CSS樣式屬性visibility設置爲hidden的隱藏元素
          * 當visibility設置爲hidden時的元素，依舊佔有頁面空間
        * 還能匹配HTML頁面中<html>和<body>元素
     */
    console.log($(':visible'));

</script>
</body>

屬性過濾選擇器

1.[attr]過濾選擇器匹配包含給定屬性的元素
2.[attr=value]過濾選擇器匹配給定的屬性是某個特定值的元素
3.[attr！=value]過濾選擇器匹配不含有特定的屬性，或者屬性不等於特定值的元素
4.[attr^=value]過濾選擇器匹配給定的屬性是以某些值開始的元素
5.[attr$=value]過濾選擇器匹配給定的屬性是以某些值結尾的元素
6.[attr*=value]過濾選擇器匹配給定的屬性是包含某些值的元素
7.組合過濾選擇器匹配元素須要同時知足多個屬性過濾器spa

<body>
<div id="username" name="d1" class="mydiv"></div>
<div id="password" name="d2" class="mycls"></div>
<div id="d3"></div>
<div class="myd"></div>
<script>
    console.log($('div[name]'));
    console.log($('div[class=mydiv]'));
    // [attr!=value]選擇器 - 包含沒有attr屬性的元素
    console.log($('div[class!=mydiv]'));

    console.log($('div[class^=my]'));
    // 屬性過濾選擇器組合用法 -> 交集
    console.log($('div[name=d1][class^=my]'));

</script>
</body>

子元素過濾選擇器

1.：nth-child（）過濾選擇器匹配其父元素下的第N個子或奇偶元素
2.：first-child過濾選擇器匹配第一個子元素
3.：last-child過濾選擇器匹配最後一個子元素
4.：only-child過濾選擇器若是某個元素是父元素中惟一的子元素，就會被匹配設計

<body>
<div id="parent">
    <div id="d1">這是id爲d1的div元素</div>
    <div id="d2">這是id爲d2的div元素</div>
    <div id="d3">這是id爲d3的div元素
        <div id="child"></div>
    </div>
</div>
<script>
    // :first-child - 當前元素是否爲第一個子元素
    console.log($('div:first-child'));
    console.log($('div:last-child'));
    /*
        :nth-child(index)
        * 做用 - 匹配當前元素做爲第index個子元素
        * 注意 - index是從 1 開始，表示第幾個
     */
    console.log($('div:nth-child(1)'));

    console.log($('div:only-child'));

</script>
</body>

表單對象屬性過濾器

1.：enabled過濾選擇器匹配全部可用元素
2.：disabled過濾選擇器匹配全部不可用元素
3.：checked過濾選擇器匹配全部選中的被選中元素
4.：selected過濾選擇器匹配全部選中的<option>元素code

<body>
<form action="#">
    <input type="text" disabled>
    <input type="checkbox">html
    <input type="checkbox" checked>css
    <select>
        <option>北京</option>
        <option selected>南京</option>
        <option>天津</option>
    </select>
</form>
<script>
    console.log($('input:disabled'));
    console.log($('input:checked'));
    console.log($('option:selected'));

</script>
</body>