jquery選擇器大全（2）

書接上回...

2. 內容過濾選擇器
——2.1 :contains(text)（取包含text文本的元素）
// dd元素中包含"jQuery"文本的會變色
 $('dd:contains("jQuery")').css('color', '#f00');

Eg：下面的代碼，第一個dd會變色

<dl>
    <dt>技術</dt>
    <dd>jQuery, .NET, CLR</dd>
    <dt>SEO</dt>
    <dd>關鍵字排名</dd>
    <dt>其他</dt>
    <dd></dd>
</dl>

如圖：


——2.2 :empty（取不包含子元素或文本為空的元素）
 $('dd:empty').html('沒有內容');

Eg：下面第三個dd會顯示"沒有內容"文本

<dl>
    <dt>技術</dt>
    <dd>jQuery, .NET, CLR</dd>
    <dt>SEO</dt>
    <dd>關鍵字排名</dd>
    <dt>其他</dt>
    <dd></dd>
</dl>

如圖：


——2.3 :has(selector)（取選擇器匹配的元素）
 // 為包含span元素的div添加邊框
 $('div:has(span)').css('border', '1px solid #000');

Eg：即使span不是div的直系子元素，也會生效

<div>
    <h2>
        A        <span>B</span>
    </h2>
</div>

如圖：


——2.4 :parent（取包含子元素或文本的元素）
 $('ol li:parent').css('border', '1px solid #000');

Eg：下面的代碼，A和D所在的li會有邊框

<ol>
    <li></li>
    <li>A</li>
    <li></li>
    <li>D</li>
</ol>

如圖：


3. 可見性過濾選擇器
——3.1 :hidden（取不可見的元素）

jQuery至1.3.2之后的:hidden選擇器僅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。這也意味著hidden只匹配那些“隱藏的”并且不占空間的元素，像visibility:hidden或 opactity:0的元素占據了空間，會被排除在外。
Eg：下面的代碼，先彈出"hello"對話框，然后hid-1會顯示，hid-2仍然是不可見的。

    /* css代碼 */
    <style type="text/css">
        div{
            margin: 10px;
            width: 200px;
            height: 40px;
            border: 1px solid #FF0000;
            display:block;
        }
        .hid-1 {
            display: none;
        }
        .hid-2{
            visibility: hidden;
        }
    <!-- html代碼 -->
    <div class="hid-1">display: none</div>
    <div class="hid-2">visibility: hidden</div>
    <input type="hidden" value="hello"/>
    /* js代碼 */
     $('div:hidden').show(500);
     alert($('input:hidden').val());

如圖：


——3.2 :visible（取可見的元素）
$('div:visible').css('backgroundColor','orange');

Eg：下面的代碼，最后一個div會有背景色。注意下面是有4個元素的。

<div class="hid-1" style="display:none;">display: none</div>
<div class="hid-2" style="visibility: hidden">visibility: hidden</div>
<input type="hidden" value="hello"/>
<div>jQuery選擇器大全</div>

如圖：


4. 屬性過濾選擇器
——4.1 [attribute]（取擁有attribute屬性的元素）
     $('a[title]').css('text-decoration', 'none');

Eg：下面的代碼，最后一個a標簽沒有title屬性，所以它仍然會帶下劃線。

   <ul>
        <li><a href="#" title="DOM對象和jQuery對象" class="item">DOM對象和jQuery對象</a></li>
        <li><a href="#" title="jQuery選擇器大全" class="item-selected">jQuery選擇器大全</a></li>
        <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
        <li><a href="#" title="基于jQuery的插件開發" class="item">基于jQuery的插件開發</a></li>
        <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
        <li><a href="#" class="item">其他</a></li>
    </ul>

如圖：
——4.2 [attribute = value]和[attribute != value]（取attribute屬性值等于value或不等于value的元素）
    $('a[class=item]').css('color', '#FF99CC');
    $('a[class!=item]').css('color', '#FF6600');

如圖：


Eg：分別為class="item"和class!=item的a標簽指定文字顏色

——4.3 [attribute ^= value], [attribute $= value]和[attribute *= value]（attribute屬性值以value開始，以value結束，或包含value值）
    $('a[title^=jQuery]').css('font-weight', 'bold');
    $('a[title$=jQuery]').css('font-size', '24px');
    $('a[title*=jQuery]').css('text-decoration', 'line-through')

如圖：


說明：在屬性選擇器中，^$符號和正則表達式的開始結束符號表示的含義是一致的，*模糊匹配，類似于sql中的like '%str%'。

——4.4 [selector1][selector2]（復合型屬性過濾器，同時滿足多個條件）
   $('a[title^=jQuery][class=item]').hide();

Eg：將title以"jQuery"開始，并且class="item"的a標簽隱藏，那么<a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a>會被隱藏.

5. 子元素過濾選擇器
——5.1 :first-child和:last-child

說明：:first-child表示第一個子元素，:last-child表示最后一個子元素。
需要大家注意的是，:fisrst和:last返回的都是單個元素，而:first-child和:last-child返回的都是集合元素。舉個 例子：div:first返回的是整個DOM文檔中第一個div元素，而div:first-child是返回所有div元素下的第一個元素合并后的集 合。
這里有個問題：如果一個元素沒有子元素，:first-child和:last-child會返回null嗎？請看下面的代碼：

  <body>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</body>
<script src="jquery.js"></script>
<script>
    var len1 = $('div:first-child').length;
    var len2 = $('div:last-child').length;
</script>

也許你覺得這個答案，是不是太簡單了？len1 = 2, len2 = 2。但實際確并不是，它們倆都等于3。
把上面的代碼稍微修改一下：

<body>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</body>
<script src="jquery.js"></script>
<script>
    var len1 = $('div:first-child').length;
    var len2 = $('div:last-child').length;
    $('div:first-child').each(function() {
        alert($(this).html());
     });
</script>
結果卻是彈出三個alert，只不過最后一個alert里面是空白的。如圖：
——5.2 :only-child

說明：當某個元素有且僅有一個子元素時，:only-child才會生效。請看下面的代碼：

$('div:only-child').css('border', '1px solid #FF0000').css('width','200px');

Eg：這里:only-child也是三個元素，從最后一個很粗的紅色邊框（實際是兩個元素的邊框重疊了）也可以看出來。

 <div>123
        <div>456
            <div></div>
        </div>
    </div>

如圖：


——5.3 :nth-child

說明：看到這個就想起英文單詞里的，fourth, fifth, sixth……，nth表示第n個，:nth-child就表示第n個child元素。要注意的是，這兒的n不像eq(x)、gt(x)或lt(x)是從 0開始的，它是從1開始的，英文里好像也沒有zeroth這樣的序號詞吧。

:nth-child有三種用法：

:nth-child有三種用法：

  1. :nth-child(x)，獲取第x個子元素
  2. :nth-child(even)和:nth-child(odd)，從1開始，獲取第偶數個元素或第奇數個元素
  3. :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0時就是3n，表示取第3n個元素（n>=0）。實際上xn+y是上面兩種的通項式。（當x=0,y>=0時，等同于:hth- child(x)；當x=2,y=0時，等同于nth-child(even)；當x=2,y=1時，等同于:nth-child(odd)）
    下面的兩個例子是針對2)和3)的，1)的例子我就不列舉了。
    例2：
    Eg：這里:only-child也是三個元素，從最后一個很粗的紅色邊框（實際是兩個元素的邊框重疊了）也可以看出來。
 <table>
      <tr><td>1. NBA 2012季后賽</td></tr>
       <tr><td>2. NBA 2011季后賽</td></tr>
       <tr><td>3. NBA 2010季后賽</td></tr>
       <tr><td>4. NBA 2009季后賽</td></tr>
       <tr><td>5. NBA 2008季后賽</td></tr>
       <tr><td>6. NBA 2007季后賽</td></tr>
  </table>
  // 偶數行背景紅色
 $('tr:nth-child(even)').css('background', '#FF0000');
  // 奇數行背景藍色
   $('tr:nth-child(odd)').css('background', '#0000FF');

如圖：


例3（html代碼和例2是一樣的）：

 $('tr:nth-child(3n)').css('background', '#0000FF');

如圖：
6. 表單對象屬性過濾選擇器
——6.1 :enabled和:disabled（取可用或不可用元素）

說明：:enabled和:diabled的匹配范圍包括input, select, textarea。請看下面的代碼：

<body>
    <div>
        <input type="text" value="可用的文本框" />
    </div>
    <div>
        <input type="text" disabled="disabled" value="不可用的文本框" />
    </div>
    <div>
        <textarea disabled="disabled">不可用的文本域</textarea>
    </div>
    <div>
        <select disabled="disabled">
            <option>English</option>
            <option>簡體中文</option>
        </select>
    </div>
</body>
<script src="jquery.js"></script>
<script>
    $(':enabled').css('border', '1px solid #FF0000');
    $(':disabled').css('border', '1px solid #0000FF');
</script>

如圖：


——6.2 :checked（取選中的單選框或復選框元素）

說明：下面的代碼，更改邊框或背景色僅在IE下有效果，chrome和firefox不會改變，但是alert都會彈出來：

<body>
    <div>
        <input type="checkbox" checked="checked" value="must"/>必須勾選
    </div>
    <div>你現在工作的企業屬于：
        <input type="radio" name="radio" checked="checked" value="外企"/>外企
        <input type="radio" name="radio" value="國企"/>國企
        <input type="radio" name="radio" value="民企"/>民企
    </div>
</body>
<script src="jquery.js"></script>
<script>
    $(':checked').css('background', '#FF0000').each(function() {
        alert($(this).val());
    });
</script>

如圖：


——6.3 :selected（取下拉列表被選中的元素）

說明：下面的代碼，更改邊框或背景色僅在IE下有效果，chrome和firefox不會改變，但是alert都會彈出來：

<body>
    <select>
        <option value="外企">外企</option>
        <option value="國企">國企</option>
        <option value="私企">私企</option>
    </select>
</body>
<script src="jquery.js"></script>
<script>
    alert($(':selected').val());
</script>

如圖：


最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 作為前端和后臺最基礎可靠的神器工具JQuery，你真的對她有足夠了解么？ 亞非拉地區苦逼的前端er們，有時候不得不...
    扭了個妞閱讀 385評論 0贊 0
  • 一、樣式篇 第1章 初識jQuery （1）環境搭建 進入官方網站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,451評論 0贊 44
  • 第一章 入門 基本功能：訪問和操作 dom 元素，控制頁面樣式，對頁面的事件處理，與ajax完美結合，有豐富的插件...
    X_Arts閱讀 1,066評論 0贊 2
  • 昨天晚上，打開得到準備繼續學習時，正巧碰到羅輯思維得到團隊在舉行每周的工作例會。先不談該工作例會的新穎性，我只想...
    詩意悅讀閱讀 323評論 3贊 3
  • 這周末去蘭溪，與禪武醫的郭師兄交流。 師兄習武經歷： 1999年開始在嵩山腳下習武，2000年秋季入少林寺慈云堂，...
    suntmei閱讀 624評論 0贊 0