jQuery選擇器

時間  2019-12-07
標籤 jquery 選擇器 欄目 JQuery 简体版
原文   原文鏈接

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

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

不少時候寫jQuery代碼的關鍵就是怎樣設計合適的選擇器選中須要的元素。jquery

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

1、CSS基本選擇器

一、最基本的選擇器

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

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

取得文檔中類爲some-class的全部元素正則表達式

二、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

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

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

$("ancestor descendant")：選取ancestor元素裏的全部descendant元素。瀏覽器

例:$("div span")選取<div>裏的全部的<span>元素。ide

$("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()與先後位置無關，只有是同輩節點就都能匹配。

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

目的：根據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>標籤的一組元素。

2、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中的奇數行都會變色

總結：

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

二、nth-child()選擇器，相對於元素的父元素（而非當前元素）的全部元素來計算位置，可接受數值、odd或even做爲參數。

nth-child()是jQuery中惟一從1開始計數的選擇器。因此上面參數用的是odd(偶數)而不是even（奇數）。

 

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

目的：處理更復雜的選擇，是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

效果以下：

4、參考資料

JQuery所支持的css選擇器能夠參考jQuery的文檔，文檔地址爲：

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程