jQuery選取器詳解及執行個體---《轉載》

標籤：

選取器是jQuery最基礎的東西，本文中列舉的選取器基本上囊括了所有的jQuery選取器，也許各位通過這篇文章能夠加深對jQuery選取器的理解，它們本身用法就非常簡單，我更希望的是它能夠提升個人編寫jQuery代碼的效率。本文配合、代碼和簡單的概括對所有jQuery選取器進行了介紹，也列舉出了一些需要注意和區分的地方。

一、基本選取器1. id選取器（指定id元素）

將id="one"的元素背景色設定為黑色。（id選取器返單個元素）

$(document).ready(function () {        $(‘#one‘).css(‘background‘, ‘#000‘);    });

2. class選取器（遍曆css類元素）

將class="cube"的元素背景色設為黑色

$(document).ready(function () {        $(‘.cube‘).css(‘background‘, ‘#000‘);    });

3. element選取器（遍曆html元素）

將p元素的文字大小設定為12px

$(document).ready(function () {        $(‘p‘).css(‘font-size‘, ‘12px‘);    });

4. * 選取器（遍曆所有元素）

$(document).ready(function () {        // 遍曆form下的所有元素，將字型顏色設定為紅色        $(‘form *‘).css(‘color‘, ‘#FF0000‘);    });

5. 並欄選取器

$(document).ready(function () {        // 將p元素和div元素的margin設為0        $(‘p, div‘).css(‘margin‘, ‘0‘);    });

 

二、 層次選取器1. parent > child（直系子項目）

$(document).ready(function () {        // 選取div下的第一代span元素，將字型顏色設為紅色        $(‘div > span‘).css(‘color‘, ‘#FF0000‘);    });

下面的代碼，只有第一個span會變色，第二個span不屬於div的一代子項目，顏色保持不變。

<div>        <span>123</span>        <p>            <span>456</span>        </p></div>

2. prev + next（下一個兄弟元素，等同於next()方法）

$(document).ready(function () {    // 選取class為item的下一個div兄弟元素    $(‘.item + div‘).css(‘color‘, ‘#FF0000‘);    // 等價代碼    //$(‘.item‘).next(‘div‘).css(‘color‘, ‘#FF0000‘);});

下面的代碼，只有123和789會變色

<p class="item"></p><div>123</div><div>456</div><span class="item"></span><div>789</div>

3. prev ~ siblings（prev元素的所有兄弟元素，等同於nextAll()方法）

$(document).ready(function () {    // 選取class為inside之後的所有div兄弟元素    $(‘.inside ~ div‘).css(‘color‘, ‘#FF0000‘);    // 等價代碼    //$(‘.inside‘).nextAll(‘div‘).css(‘color‘, ‘#FF0000‘);});

下面的代碼，G2和G4會變色

<div class="inside">G1</div><div>G2</div><span>G3</span><div>G4</div>

三、 過濾選取器1. 基本過濾選取器

——1.1 :first和:last（取第一個元素或最後一個元素）

$(document).ready(function () {            $(‘span:first‘).css(‘color‘, ‘#FF0000‘);            $(‘span:last‘).css(‘color‘, ‘#FF0000‘);        });

下面的代碼，G1（first元素）和G3（last元素）會變色

<span>G1</span><span>G2</span><span>G3</span>

——1.2 :not（取非元素）

$(document).ready(function () {            $(‘div:not(.wrap)‘).css(‘color‘, ‘#FF0000‘);        });

下面的代碼，G1會變色

<div>G1</div><div class="wrap">G2</div>

但是，請注意下面的代碼：

<div>    G1    <div class="wrap">G2</div></div>

當G1所在div和G2所在div是父子關係時，G1和G2都會變色。

——1.3 :even和:odd（取偶數索引或奇數索引元素，索引從0開始，even表示偶數，odd表示奇數）

$(document).ready(function () {            $(‘tr:even‘).css(‘background‘, ‘#EEE‘); // 偶數行顏色            $(‘tr:odd‘).css(‘background‘, ‘#DADADA‘); // 奇數行顏色        });

A、C行顏色#EEE（第一行的索引為0），B、D行顏色#DADADA

<table width="200" cellpadding="0" cellspacing="0">    <tbody>        <tr><td>A</td></tr>        <tr><td>B</td></tr>        <tr><td>C</td></tr>        <tr><td>D</td></tr>    </tbody></table>

——1.4 :eq(x) （取指定索引的元素）

$(document).ready(function () {            $(‘tr:eq(2)‘).css(‘background‘, ‘#FF0000‘);        });

更改第三行的背景色，在上面的代碼中C的背景會變色。

——1.5 :gt(x)和:lt(x)（取大於x索引或小於x索引的元素）

$(document).ready(function () {            $(‘ul li:gt(2)‘).css(‘color‘, ‘#FF0000‘);            $(‘ul li:lt(2)‘).css(‘color‘, ‘#0000FF‘);        });

L4和L5會是紅色，L1和L2會是藍色，L3是預設顏色

<ul>    <li>L1</li>    <li>L2</li>    <li>L3</li>    <li>L4</li>    <li>L5</li></ul>

——1.6 :header（取H1~H6標題元素）

$(document).ready(function () {            $(‘:header‘).css(‘background‘, ‘#EFEFEF‘);        });

下面的代碼，H1~H6的背景色都會變

<h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6>

2. 內容過濾選取器

——2.1 :contains(text)（取包含text文本的元素）

$(document).ready(function () {            // dd元素中包含"jQuery"文本的會變色            $(‘dd:contains("jQuery")‘).css(‘color‘, ‘#FF0000‘);        });

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

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

——2.2 :empty（取不包含子項目或文本為空白的元素）

$(document).ready(function () {            $(‘dd:empty‘).html(‘沒有內容‘);});

上面第三個dd會顯示"沒有內容"文本

——2.3 :has(selector)（取選取器匹配的元素）

$(document).ready(function () {            // 為包含span元素的div添加邊框            $(‘div:has(span)‘).css(‘border‘, ‘1px solid #000‘);        });

即使span不是div的直系子項目，也會生效

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

——2.4 :parent（取包含子項目或文本的元素）

$(document).ready(function () {            $(‘ol li:parent‘).css(‘border‘, ‘1px solid #000‘);        });

下面的代碼，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的元素佔據了空間，會被排除在外。

參照：http://www.jquerysdk.com/api/hidden-selector

下面的代碼，先彈出"hello"對話方塊，然後hid-1會顯示，hid-2仍然是不可見的。

<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title></title>    <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;        }    </style>    <script type="text/javascript" src="js/jquery.min.js"></script>    <script type="text/javascript">        $(document).ready(function() {            $(‘div:hidden‘).show(500);            alert($(‘input:hidden‘).val());        });    </script></head><body>    <div class="hid-1">display: none</div>    <div class="hid-2">visibility: hidden</div>    <input type="hidden" value="hello"/></body></html>

——3.2 :visible（取可見的元素）

下面的代碼，最後一個div會有背景色

<script type="text/javascript">    $(document).ready(function() {        $(‘div:visible‘).css(‘background‘, ‘#EEADBB‘);    });</script><div class="hid-1">display: none</div><div class="hid-2">visibility: hidden</div><input type="hidden" value="hello"/><div>    jQuery選取器大全</div>

4. 屬性過濾選取器

——4.1 [attribute]（取擁有attribute屬性的元素）

下面的代碼，最後一個a標籤沒有title屬性，所以它仍然會帶底線

<script type="text/javascript">        $(document).ready(function() {            $(‘a[title]‘).css(‘text-decoration‘, ‘none‘);       });    </script>           <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的元素）

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

jQuery選取器詳解及執行個體---《轉載》