jQuery選擇器

xiemuran發表於2021-12-25
jQuery

jQuery的核心思想就是：選取元素，對其操作。

jquery選擇器對開發有以下優勢：寫法簡潔，不需要考慮主流瀏覽器是否支援某些選擇器（jquery支援css1-css3），不需要考慮瀏覽器報錯（jquery有完善的錯誤處理機制）。

很多時候寫jQuery程式碼的關鍵就是怎樣設計合適的選擇器選中需要的元素。

jQuery選擇器主要有三大類，即css基本選擇器，css位置選擇器和過濾選擇器。

一、CSS基本選擇器

1、最基本的選擇器

jQuery的css選擇器借鑑了css選擇器的語法。有3種最基本的選擇器：標籤名、ID和類。

選擇器 css jQuery 說明
標籤名 p{} $('p') 取得文件中所有的段落
ID #some-id{} $('#some-id') 取得文件中ID為some-id的一個元素
類 .some-class $('.come-class')

取得文件中類為some-class的所有元素

2、jQuery支援的css3基本選擇器

選擇器 說明
*、E、E F、E。C、E#I等CSS1選擇器 萬用字元、標記選擇器，後代選擇器，交集選擇器，ID選擇器等CSS1中的選擇器
E>F 子選擇器，只選中第一代
E+F 所有名稱為F的標記，並且該標記緊接著前面的E標記，下一個兄弟元素
E~F 所有名稱為F的標記，如果F和E是兄弟關係，並且F位於E後面（不需要緊跟E）
E：has(F) 所有名稱為E的標記，並且該標記包含F標記
E[A] 所有名稱為E的標記，並且具有屬性A
E[A=V] 所有名稱為E的標記，並且屬性A的值等於V
E[A^=V] 所有名稱為E的標記，並且屬性A的值以V開頭
E[A$=V] 所有名稱為E的標記，並且屬性A的值以V結尾
E[A*=V] 所有名稱為E的標記，並且屬性A的值包含V

3、css3基本選擇器中可細分出層次選擇器

通過DOM元素之間的層次關係來獲取特定元素，例如後代元素，子元素，相鄰元素和同輩元素等。

$("ancestor descendant")：選取ancestor元素裡的所有descendant元素。

例:$("div span")選取<div>裡的所有的<span>元素。

$("parent>child")選取parent元素下的child元素，與$("ancestor descendant")的區別是$("ancestor descendant")選取的是後代元素。

例:$("div >span")選取<div>下元素名是<span>的子元素。

$("prev+next")選取緊接在prev元素後面的next元素。

例：$(".one+div")選取class為one的下一個<div>同輩元素。

$("prev~siblings")選取prev元素之後的所有siblings元素。

例：$("#two~div")選取id為two的元素後面所有<div>同輩元素。

注意：

jquery中next()來代替$("prev+next")選擇器。

jquery中nextAll()來代替$("prev~siblings")選擇器。

$("prev~siblings")和jquery中siblings()的區別：

$("prev~siblings")只能選中"prev"後面的同輩<div>元素。

siblings()與前後位置無關，只有是同輩節點就都能匹配。

4、以基本選擇器中屬性選擇器舉例

目的：根據html元素的屬性來選擇元素。比如選擇帶有alt屬性的所有圖片，$('img[alt]')。

語法：jQuery的屬性選擇器借鑑了正規表示式中萬用字元的語法——以^表示要匹配的的值在字串的開始，$表示要匹配的值在字串的結尾，*表示要匹配的值在字串中的任意位置，!表示取反。

舉例：用jQuery給普通連結新增link類，給郵件連結新增emailto類，給pdf連結新增pdf類。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.1.min.js"></script>
    <style>
        a.mailto{
            background:url(images/email.png) no-repeat right top;
            padding-right:18px;
        }
        a.pdf{
        background:url(images/pdf.png) no-repeat right top;
            padding-right:18px;
        }
        a.link{
            background-color:#eee;
            padding:1px 10px;
            border:1px solid orange;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="http://www.baidu.com">百度</a></li>
    <li><a href="mailto:xiaoyanliug@gmail.com">email</a></li>
    <li><a href="xxx.pdf">pdf</a></li>
</ul>
<script>
    $(document).ready(function(){
       $('a[href^="mailto"]').addClass("mailto");
        $('a[href$="pdf"]').addClass("pdf");
        $('a[href*="http"]').addClass("link");
    });
</script>
</body>
View Code

效果如下：

補充:2016-4-20

此外還可以多個 選擇器一起選中進行操作。

選擇器：selector1,selector2,......,selectorN將每一個選擇器匹配到的元素合併後一起返回。

例：$('div,span,p.myClass')選中所有<div>，<span>和擁有class為myClass的<p>標籤的一組元素。

二、CSS位置選擇器

目的：基於元素的位置選擇元素，又不侷限於此。

語法：jQuery的位置選擇器借鑑了css中偽類的語法，即選擇器以冒號（：）開始，可以看做是CSS為類的一種擴充套件。

jQuery支援的CSS3位置選擇器
選擇器 說明
:first 第一個元素，例如div p:first選中頁面中所有p元素的第一個，且該p元素是div的子元素
:last 最後一個元素，例如div p:last選中頁面中所有p元素的最後一個，且該p元素是div的子元素
:first-child 第一個子元素，例如ul:first-child選中所有的ul元素，且該ul元素是其父元素的第一個子元素
:last-child 最後一個子元素，例如ul:last-child選中所有的ul元素，且該ul元素是其父元素的最後一個子元素
:only-child　　 所有沒有兄弟的子元素，例如p:only-child選中所有的p元素，如果該p元素是其父元素的唯一子元素
:nth-child(n) 第n個子元素，例如li:nth-child(3)選中所有li元素，且該li元素是其父元素的第3個子元素（從1開始計數）
:nth-child(odd|even) 所有的奇數號或偶數號的子元素
:nth-child(nX+Y) 利用公式來計運算元元素的位置，例如:nth-child(5n+1)選中第5n+1個子元素（n從0開始計數，即1,6,11,...）
:odd或:even　　 對於整個頁面而言，選中奇數或偶數號元素，例如p:even為頁面中所有排在偶數位的p元素（從0開始計算）
:eq(n) 頁面中第n個元素，例如p:eq(4)為頁面中第5個p元素
:gt(n) 頁面中第n個元素之後的所有元素（不包括第n個元素）
:lt(n) 頁面中第n個元素之前的所有元素（不包括第n個元素）

 

舉例：以強大的jQuery隔行變色為例：

程式碼一:【//lxy:jQuery使用$('tr:even').addClass("alt");】：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.1.min.js"></script>
    <style>
        table{
            border-collapse: collapse;
        }
        .alt{
            background-color:#ccc;
        }
    </style>
</head>
<body>
<h2>Shakespeare's Plays</h2>
<table>
    <tr>
        <td>As You Like It</td>
        <td>Comedy</td>
        <td></td>
    </tr>
    <tr>
        <td>All's Well that Ends Well</td>
        <td>Comedy</td>
        <td>1601</td>
    </tr>
    <tr>
        <td>Hamlet</td>
        <td>Tragedy</td>
        <td>1604</td>
    </tr>
    <tr>
        <td>Macbeth</td>
        <td>Tragedy</td>
        <td>1606</td>
    </tr>
    <tr>
        <td>Romeo and Juliet</td>
        <td>Tragedy</td>
        <td>1595</td>
    </tr>
    <tr>
        <td>Henry IV, Part I</td>
        <td>History</td>
        <td>1596</td>
    </tr>
    <tr>
        <td>Henry V</td>
        <td>History</td>
        <td>1599</td>
    </tr>
</table>
<h2>Shakespeare's Sonnets</h2>
<table>
    <tr>
        <td>The Fair Youth</td>
        <td>1–126</td>
    </tr>
    <tr>
        <td>The Dark Lady</td>
        <td>127–152</td>
    </tr>
    <tr>
        <td>The Rival Poet</td>
        <td>78–86</td>
    </tr>
</table>
<script>
    $(document).ready(function(){
    $('tr:even').addClass("alt");
    });
</script>
</body>
</html>
View Code

程式碼二【//lxy:jQuery 使用 $('tr:nth-child(odd)').addClass('alt');】：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.1.min.js"></script>
    <style>
        table{
            border-collapse: collapse;
        }
        .alt{
            background-color:#ccc;
        }
    </style>
</head>
<body>
<h2>Shakespeare's Plays</h2>
<table>
    <tr>
        <td>As You Like It</td>
        <td>Comedy</td>
        <td></td>
    </tr>
    <tr>
        <td>All's Well that Ends Well</td>
        <td>Comedy</td>
        <td>1601</td>
    </tr>
    <tr>
        <td>Hamlet</td>
        <td>Tragedy</td>
        <td>1604</td>
    </tr>
    <tr>
        <td>Macbeth</td>
        <td>Tragedy</td>
        <td>1606</td>
    </tr>
    <tr>
        <td>Romeo and Juliet</td>
        <td>Tragedy</td>
        <td>1595</td>
    </tr>
    <tr>
        <td>Henry IV, Part I</td>
        <td>History</td>
        <td>1596</td>
    </tr>
    <tr>
        <td>Henry V</td>
        <td>History</td>
        <td>1599</td>
    </tr>
</table>
<h2>Shakespeare's Sonnets</h2>
<table>
    <tr>
        <td>The Fair Youth</td>
        <td>1–126</td>
    </tr>
    <tr>
        <td>The Dark Lady</td>
        <td>127–152</td>
    </tr>
    <tr>
        <td>The Rival Poet</td>
        <td>78–86</td>
    </tr>
</table>
<script>
    $(document).ready(function(){
    $('tr:nth-child(odd)').addClass('alt');
    });
</script>
</body>
</html>
View Code

程式碼一效果：在第二個table中第一個tr沒有變色                 程式碼二效果：每個table中的奇數行都會變色

總結：

1、在jQuery中，:eq()選擇器，:odd和:even選擇器都是從0開始編號。

2、nth-child()選擇器，相對於元素的父元素（而非當前元素）的所有元素來計算位置，可接受數值、odd或even作為引數。

nth-child()是jQuery中唯一從1開始計數的選擇器。所以上面引數用的是odd(偶數)而不是even（奇數）。

 

三、過濾選擇器（自定義選擇器）

目的：處理更復雜的選擇，是jQuery自定義的，不是CSS3中的選擇器。

語法：jQuery的過濾選擇器借鑑了css中偽類的語法，即選擇器以冒號（：）開始。

　　　　jQuery常用的過濾選擇器

選擇器 說明
:animated　 所有處於動畫中的元素
:button 所有按鈕，包括input[type=button]、input[type=submit]、input[type=reset]和<button>標記
:checkbox 所有核取方塊，等同於input[type=checkbox]
:checked 選擇被選中的核取方塊或單選框
:contains(characters) 選擇所有包含了文字"characters"的元素
:disabled 頁面中被禁用了的元素
:enabled 頁面中沒有被禁用的元素
:file 表單中的檔案上傳元素，等同於input[type=file]
:header 選中所有標題元素，例如<h1>~<h6>
:hidden 匹配所有的不可見元素，例如設定為display:none的元素或input元素的type屬性為“hidden”的元素
:image 表單中的圖片按鈕，等同於input[type=image]
:input 表單輸入元素，包括<input>、<select>、<textarea>、<button>
:not(filter) 反向選擇
:parent 選擇所有擁有子元素(包括文字)的元素，即除空元素外的所有元素
:password 表單中的密碼域，等同於input[type=password]
:radio 表單中的單選按鈕，等同於input[type=radio]
:reset 表單中的重置按鈕，等同於input[type=radio]和button[type=reset]
:selected 下拉選單中的被選中項
:submit 表單中的提交按鈕，包括input[type=submit]和button[type=submit]
:text 表單中的文字域，等同於input[type=text]
:visible 頁面中的所有可見元素

舉例：以否定選擇器舉例【：not（.some-class）不包含some-class類的元素】

給網頁中除第一個p元素之外的所有p元素新增背景色。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<p>第一個段落</p>
<p>第二個段落</p>
<p>第三個段落</p>
<script>
    $(document).ready(function() {
        $('p:not(:first)').css("backgroundColor", "orange");
    });
</script>
</body>
</html>
View Code

效果如下：

四、參考資料

JQuery所支援的css選擇器可以參考jQuery的文件，文件地址為：

http://api.jquery.com/category/selectors/

 

相關文章