jquery選擇器demo

時間 2019-11-30

原文原文鏈接

大部分選擇器都是基於下面這個簡單的頁面：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div,span,p{
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border:#000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana, Geneva, sans-serif;
        }
        div.mini{
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }
        div.hide{
            display: none;
        }
    </style>
    <script src="http://code.jquery.com/jquery-2.2.3.js" ></script>
</head>
<body>
    <div class="one" id="one">
        id 爲one，class爲one的div
        <div class="mini">class爲mini</div>
    </div>
    <div class="one" id="two" title="test">
        id爲two,class爲one,title爲test的div
        <div class="mini" title="other">class爲mini,title爲other</div>
        <div class="mini" title="test">class爲mini,title爲test</div>
    </div>
    <div class="one">
        <div class="mini">class爲mini</div>
        <div class="mini">class爲mini</div>
        <div class="mini">class爲mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class爲mini</div>
        <div class="mini">class爲mini</div>
        <div class="mini">class爲mini</div>
        <div class="mini" title="tesst">class爲mini,title爲tesst</div>
    </div>
    <div class="none" style="display: none;">
        style的display爲"none"的div
    </div>
    <div class="hide">class爲「hide」的div</div>
    <div>
        包含input的type爲"hidden"的div <input type="text" class="hidden" size="8">
    </div>
    <span id="mover">正在執行動畫的span元素.</span>
</body>
</html>

View Code

效果以下：html

1、基本選擇器

改變id爲one的元素的背景色：jquery

$("#one").css("background","#bbffaa");

改變class爲mini的全部元素的背景色：ide

$(".mini").css("background","#bbffaa");

改變元素名是<div> 的全部元素的背景色post

$("div").css("background","#bbffaa");

改變全部元素的背景色學習

$("*").css("background","#bbffaa");

改變全部的<span>元素和id未two的元素的背景色動畫

$("span,#two").css("background","#bbffaa");

2、層次選擇器

改變<body>內全部<div>的背景色。spa

$("body div").css("background","#bbffaa");

改變<body>內子<div>的背景色。3d

$("body>div").css("background","#bbffaa");

改變class爲one的下一個<div>同輩元素的背景色。code

$(".one+div").css("background","#bbffaa");

等價於

$(".one").next("div").css("background","#bbffaa");

包含input的type爲"hidden"的div並非class爲one的下一個同輩元素，由於中間有有兩個元素隱藏了。

改變id爲two的元素後面的全部<div> 同輩元素的背景色。

$("#two~div").css("background","#bbffaa");

等價於

$("#two").nextAll("div").css("background","#bbffaa");

$("prev~siblings")和jquery中siblings()的區別： siblings()與先後位置無關，只有是同輩節點就都能匹配。

$("#two").siblings("div").css("background","#bbffaa");

3、過濾選擇器

過濾選擇器按過濾規則可分爲基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾、和表單對象屬性過濾選擇器。

一、基本過濾選擇器

：first選取第一個元素。

例：$("div:first")選取全部<div>中第一個<div>。

:last選取最後一個元素。

例:$("div:last")選取全部<div>中最後一個<div>。

:not(selector)去除全部與給定選擇器匹配的元素。

例：$("input:not(.myClass)") 選取class不是myClass的<input>元素。

改變class不爲one的元素的背景色。

$("div:not(.one)").css("background","#bbffaa");

：even選取索引是偶數的全部元素，索引從0開始。

例：$("input:even")選取索引是偶數的<input>元素。

:odd選取索引是奇數的全部元素，索引從0開始。

例：$("input:odd")選取索引是奇數的<input>元素。

：eq(index) 選取索引等於index的元素（index從0開始）。

例：$("input:eq(1)")選取索引等於1的<input>元素。

:gt(index)選取索引大於index的元素(index從0開始)。

例：$("input:gt(1)")選取索引大於1的<input>元素。（大於1而不等於1）

：lt(index)選取索引小於index的元素（index從0開始）。

例：$("input:lt(1)")選取索引小於1的<input>元素。（小於1而不等於1）

:header選取全部的標題元素，例如h1,h2,h3等。

例：$("：header")選取網頁中全部的<h1>,<h2>...

:animated:選取當前正在執行動畫的全部元素。

例：$("div:animated")選取正在執行動畫的<div>元素。

：focus：選取當前獲取焦點的元素。

例：$(":focus")選取當前獲取焦點的元素。

二、內容過濾選擇器

內容過濾選擇器的過濾規則主要體如今它所包含的子元素或文本內容上。

:contains(text)：選取含有文本內容爲"text"的元素。

$("div:contains('我')")選取含有文本"我"的<div>元素。

:empty選取不包含子元素或者文本的空元素

$("div:empty")選取不包含子元素(包括文本元素)的<div>空元素。

:has(selector)選取含有選擇器所匹配的元素的元素。

$("div:has(p)")選取含有<p>元素的<div>元素。

:parent選取含有子元素或者文本的元素。

$("div:parent")選取擁有子元素(包括文本元素)的<div>元素。

例子：

改變含有文本「di」的<div>元素的背景色。

$("div:contains('di')").css("background","#bbffaa");

改變不包含子元素（包括文本元素）的<div>空元素背景色。

$("div:empty").css("background","#bbffaa");

改變含有class爲mini元素的<div> 元素的背景色。

$("div:has('.mini')").css("background","#bbffaa");

改變含有子元素（包含文本元素）的<div>元素的背景色。

$("div:parent").css("background","#bbffaa");

三、可見性過濾選擇器

可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素。

:hidden選取全部不可見的元素。

$("hidden")選取全部不可見的元素。包括<input type="hidden">，<div style="display:none">和<div style="visibility:hidden">等元素，若是隻想選取<input>元素，能夠使用$("input :hidden")。

:visible選取全部可見的元素。

$("div:visible")選取全部可見的<div>元素。

例：顯示隱藏的<div> 元素。show（）是jquery方法，3000是事件，單位毫秒。

$("div:hidden").show(3000);

四、屬性過濾選擇器

屬性過濾選擇器經過元素的屬性來獲取相應的元素。

[attribute]:選取擁有此屬性的元素。

[attribute1][attribute2][attributeN]用屬性選擇器合併成一個符合屬性選擇器，知足多個條件。每選擇一次，縮小一次範圍。

[attribute=value]選取屬性值爲value的元素。

[attribute!=value]選取屬性值不爲value的元素。

[attribute^=value]選取屬性值以value開始的元素。

[attribute$=value]選取屬性值以value結束的元素。

[attribute*=value]選取屬性值含有value的元素。

[attribute|=value]選取屬性等於給定字符串或以給定字符串爲前綴(該字符串後跟一個連字符「-」)的元素。

[attribute~=value]選取屬性用空格分隔的值中包含一個給定值的元素。

改變含有屬性爲title的<div>元素的背景色。

正確寫法：

$("div[title]").css("background","#bbffaa");

錯誤寫法：

$("div['title']").css("background","#bbffaa"); //title不能加引號

改變title值等於「test」的<div>元素的背景色

正確寫法：

$("div[title='test']").css("background","#bbffaa");  //test值加引號
$("div[title=test]").css("background","#bbffaa");   //test值不加引號

一個專爲易混屬性選擇器準備的demo。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border:#000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana, Geneva, sans-serif;
        }
    </style>
</head>
<body>
    <div title="en">title爲en的div元素</div>
    <div title="en-UK">title爲en-UK的div元素</div>
    <div title="english">title爲engliashi的div元素</div>
    <div title="en uk">title爲en uk的div元素</div>
    <div title="uken">title爲uken 的div元素</div>
</body>
</html>

$("div[title^=en]").css("background","#bbffaa");    //改變title值以"en"開始的<div>的背景色
$("div[title*=en]").css("background","#bbffaa");    //改變title值含有"en"的<div>的背景色

$("div[title|=en]").css("background","#bbffaa");    //改變屬性title等於en或以en爲前綴(該字符串後面跟一個連字符「-」)的字符串。

$("div[title~=uk]").css("background","#bbffaa");    //改變屬性title用空格分隔的值中包含字符串uk的元素的背景色

五、子元素過濾選擇器

:first-child 選取元素，且該元素是其父元素的第一個子元素。

:last-chld 選取元素，且該元素是其父元素的最後一個子元素。

:only-child 選取元素，且該元素是其父元素的惟一子元素。

:nth-child(index/even/odd/equation)經常使用且重要

:nth-child(even) 選取每一個父元素下的索引指是偶數的元素。
:nth-child(odd) 選取每一個父元素下的索引值是奇數的元素。
:nth-child(2) 選取每一個父元素下的索引值等於2的元素。
:nth-child(3n) 選取每一個父元素下的索引值是3的倍數的元素。（n從1開始）。
:nth-child(3n+1) 選取每一個父元素下的索引值是(3n+1)的元素。（n從1開始）。

demo:改變每一個class爲one的<div> 父元素下的第2個子元素的背景色。

$("div.one :nth-child(2)").css("background","#bbffaa");

對比：

eq(index) 只匹配一個元素。eq(index)的index從0開始。

:nth-child(index) 將爲每個符合條件的父元素匹配子元素。:nth-child(index)的index從0開始。

六、表單對象屬性過濾選擇器

對所選擇的表單元素進行過濾，例如選擇被選中的下拉框，多選框等元素。

:enabled 選取全部可用元素。http://i.cnblogs.com/EditPosts.aspx?postid=5411457

:disabled 選取全部不可用的元素。

:checked 選取全部被選中的元素（單選框，複選框）。

:selected 選取全部被選中的選項元素（下拉列表）。

專爲表單對象屬性過濾選擇器準備的例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo of starof</title>
    <script src="http://code.jquery.com/jquery-2.2.3.js"></script>
</head>

<body>
    <form action="#" id="form1">
        可用元素：
        <input type="text" name="add" value="可用文本框">
        <br> 不可用元素：
        <input type="text" name="email" disabled="disabled" value="不可用文本框">
        <br> 可用元素：
        <input type="text" name="che" value="可用文本框">
        <br> 不可用元素：
        <input type="text" name="name" disabled="disabled" value="不可用文本框">
        <br>
        <br> 多選框：
        <br>
        <input type="checkbox" name="newsletter" checked="checked" value="test1"> test1
        <input type="checkbox" name="newsletter" value="test2"> test2
        <input type="checkbox" name="newsletter" value="test3"> test3
        <input type="checkbox" name="newsletter" checked="checked" value="test4">test4
        <input type="checkbox" name="newsletter" value="test5"> test5
        <div></div>
        <br>
        <br>
        <select name="test" id="" multiple style="height:100px;">
            <option value="">浙江</option>
            <option value="" selected="selected">湖南</option>
            <option value="">北京</option>
            <option value="" selected="selected">天津</option>
            <option value="">廣州</option>
            <option value="">湖北</option>
        </select>
        <br>
        <br> 下拉列表2：
        <br>
        <select name="test2" id="">
            <option value="">浙江</option>
            <option value="">湖南</option>
            <option value="" selected="selected">北京</option>
            <option value="">天津</option>
            <option value="">廣州</option>
            <option value="">湖北</option>
        </select>
    </form>
</body>

</html>

View Code

改變表單內可用<input>元素的值。

Note:像input（select，checkbox textarea radio）這樣的替換元素，獲取值和賦值只能用value。瞭解更多可參考：DOM

    //$("#form1 input:enabled").text("變化了");    //錯誤
    //$("#form1 input:enabled").html("變化了");    //錯誤
    $("#form1 input:enabled").val("變化了");        //正確

獲取多選框選中的個數：

$("#form1 input:checked").length

獲取下拉框選中的內容：

$("#form1 :selected").text()

4、表單選擇器

：input 選取全部的<input> ，<textarea>,<select>和<button>元素。

例：$(":input")選取全部<input>，<textarea>,<select>和<button>元素。

:text 選取全部的單行文本框。

:password 選取全部的密碼框。

:radio 選取全部的單選框。

:checkbox 選取全部的多選框。

:submit選取全部的提交按鈕。

:image 選取全部的圖像按鈕。

:reset 選取全部的重置按鈕。

:button 選取全部的按鈕。

:file選取全部的上傳域。

:hidden 選取全部不可見元素。

表單選擇器例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo of starof</title>
    <script src="http://code.jquery.com/jquery-2.2.3.js"></script>
</head>
<body>
    <form action="#" id="form1">
        <input type="button" value="Button"><br>
        <input type="checkbox" name="c">1
        <input type="checkbox" name="c">2
        <input type="checkbox" name="c">3 <br>
        <input type="file"><br>
        <input type="hidden"><div style="display:none">test</div><br>
        <input type="image"><br>
        <input type="password"><br>
        <input type="radio" name="a">1<input type="radio" name="a">2 <br>
        <input type="reset">    <br>    
        <input type="submit" value="提交">    <br>    
        <input type="text">    <br>    
        <select>
            <option>Option</option>
        </select><br>    
        <textarea></textarea><br>    
        <button>Button</button><br>
    </form>
</body>
</html>

View Code

區別：$("#form1 :input")和$("#form1 input")

<script>
        alert($("#form1 :input").length);        //表單內表單元素的個數16
        alert($("#form1 input").length);         //表單內input元素個數13
        
</script>

本文做者starof,因知識自己在變化，做者也在不斷學習成長，文章內容也不定時更新，爲避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/5411457.html有問題歡迎與我討論，共同進步。

1. jQuery-jQuery選擇器
2. jQuery選擇器
3. jQuery 選擇器
4. jquery選擇器
5. JQuery選擇器
6. Jquery 選擇器
7. JQuery - * 選擇器
8. jquery——選擇器
更多相關文章...
• jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
• XQuery 選擇和過濾 - XQuery 教程
• Docker容器實戰(七) - 容器眼光下的文件系統
• Docker容器實戰(六) - 容器的隔離與限制

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。