鋒利的Jquery解惑系列（三）------ 各路選擇器大聚會

時間 2019-12-14

標籤鋒利 jquery 解惑系列各路選擇器大聚會欄目 JQuery 简体版

原文原文鏈接

申明：初次學習Jquery的選擇器時只記得幾個和css選擇器相似的幾個，在這裏列出書上寫上的各路選擇器方便之後的查詢和如今的學習　　　　css

　　　　　　　　　　　　　　　　　　　　　　　　　　全部例子都來自書上html

測試畫面：學習

1、基本選擇器測試

#id,　　　　　　　　　　　　　　　　　　　　$("#test")選取id爲test的元素（唯一）動畫

.class　　　　　　　　　　　　　　　　　　　$(".test")選取全部class爲test的元素spa

element　　　　　　　　　　　　　　　　　　$("p")選取全部的<P>元素.net

* 　　　　　　　　　　　　　　　　　　　　　$("*")選取全部的元素orm

selector1,selector2,....,selectorN　　　　　　$("div,span,p.myClass")選取全部<div>,<span>和擁有class爲myClass的<p>標籤的一組元素htm

demo1: 改變id爲one的元素的背景色對象

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

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

demo4：改變全部元素的背景色

demo5：改變全部的<span>元素和id爲two的元素的背景色

2、層次選擇器

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

$("ancestor descendant")　　　　　　　　　　$("div span")選取<div>裏的全部的<span>元素

$("parent > child") 　　 $("div > span")選取<div>元素下元素名是<span>的子元素

二者區別在於前者檢索出全部後代，後者只是檢索兒子

$("prev + next")　　　　　　　　　　　　　　 $(".one + div")選取class爲one的下一個<div>同輩元素

$("prev~siblings")　　　　　　　　　　　　　 $("#two~div")選取id爲two的元素後面的全部<div>同輩元素

demo1：改變<body>內全部<div>的背景色

demo2：改變<body>內<div>元素的背景色

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

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

對於後面兩個選擇器有更方便的方法能夠替代：

$(".one + div") == $(".one").next("div") $("#prev~div")==$("#prev").nextAll("div");

$("prev~siblings")與siblings()方法的區別在於前者只能匹配"prev"元素後面的同輩<div>元素。然後者與位置無關只要是同輩的節點均可以。

3、過濾選擇器

1)基本過濾選擇器

:first 　　　　　　　　$("div:first")選取全部<div>元素中第一個<div>元素

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

:not(selector)　　　　$("input:not(myClass)")選取class不是myClass的<input>元素

:even　　　　　　　　$("input:even")選取索引是偶數的<input>元素 0算偶數

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

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

:gt(indfex)　　　　　$("input:gt(1)")選取索引大於1的<input>元素

:lt(index)　　　　　 $("input:lt(1)")選取索引小於1的<input>元素

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

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

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

demo1: 改變第一個<div>元素的背景色

demo2: 改變最後一個<div>元素的背景色

demo3: 改變class不爲one的<div>元素的背景色

demo4：改變索引值爲偶數的<div>元素的背景色

demo5：改變索引值爲奇數的<div>元素的背景色

demo5：改變索引值等於3的<div>元素的背景色

demo6：改變索引值大於3的<div>元素的背景色

demo7：改變索引值i小於3的<div>元素的背景色

2）內容過濾選擇器

:contains(text)　　　　　　　　$("div:contains("我")") 選取含有文本」我「的<div>元素

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

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

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

demo1:改變含有文本"di"的<div元素的背景色

demo2:改變不包含子元素的<div>空元素的背景色

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

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

3)可見性過濾選擇器

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

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

demo1:改變全部可見的<div>元素的背景色

demo2:顯示隱藏的<div>元素

4)屬性過濾選擇器

[attribute]　　　　　　　　　　$("div[id]")選取擁有屬性id的元素

[attribute=value]　　　　　　 $("div[title=test]")選取屬性title爲」test「的<div>元素

[attribute!=value]　　　　　　 $("div[title!=test]")選取屬性title不等於"test"的<div>元素（沒有屬性title的<div>元素也會被選取）

[attribute^=value]　　　　　　$("div[title^=test]")選取屬性title以」test「開始的<div>元素

[attribute$=value]　　　　　　$("div[title$=test]")選取屬性title以」test「結束的<div>元素

[attribute*=value]　　　　　　$("div[title*=test]")選取屬性title含有」test「的<div>元素

[attribute|=value]　　　　　　 $("div[title|='en']")選取屬性title等於en或以en爲前綴（該字符串後跟一個連字符‘-’）的<div>元素

[attribute~=value]　　　　　　$("div[title~='uk']")選取屬性title用空格分隔的值中包含字符uk的<div>元素

[attribute1][attribute2]...[attributeN]　　　　　　$("div[id][title$='test']")選取擁有屬性id，而且屬性title以"test"結束的<div>元素

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

demo2:改變屬性title值等於"test"的<div>元素的背景色

demo3:改變屬性值不等於」test「的<div>元素的背景色

demo4:改變屬性值以」te「開始的<div>元素的背景色

demo5:改變屬性值title以」est「結束的<div>元素的背景色

demo6:改變屬性title含有"es"的<div>元素的背景色

dmeo7:改變含有屬性id,而且屬性title含有」es「的<div>元素的背景色

測試畫面

demo8:改變屬性title等於en或以en爲前綴（該字符串後跟一個連字符'-'）的元素的背景色

demo9:改變屬性title用空格分隔的值包含字符uk的元素的背景色

5)子元素過濾選擇器

:nth-child　　　　　　:eq(index)只匹配一個元素，而:nth-child將爲每個父元素匹配子元素，而且:nth-child(index)有index從1開始，而eq(index)是從0開始的

　　　　　　:nth-child(even)能選取每一個父元素下的索引值是偶數的元素

　　　　　　:nth-child(odd)能選取每一個父元素下的索引值是奇數的元素

　　　　　　:nth-child(2)能選取每一個父元素下的索引值等於2的元素

　　　　　　:nth-child(3n)能選取每一個父元素下的索引值是3的倍數的元素（n從1開始）

　　　　　　:nth-child(3n+1))能選取每一個父元素下的索引值是3n+1的元素（n從1開始）

:first-child　　　　　　:first只返回單個元素，而first-child選擇符將爲每個父元素匹配第一個子元素，例如$("ul li:first-child");選取每一個<ul>中第一個<li>元素

:last-child　　　　　　 :一樣，:last只返回單個元素，而:last-child選擇符將爲每一個父元素匹配最後一個子元素，例如$("ul li:last-child")選取每一個<ul>中最後一個<li>元素

:only-child　　　　　　$("ul li:only-child")在<ul>中選取是唯一子元素的<li>元素

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

demo2：改變每一個class爲one的<div>父元素下的第1個子元素的背景色

demo3：改變每一個class爲one的<div>父元素下的最後一個子元素的背景色

demo4：若是class爲one的<div>父元素下只有一個子元素，那麼則改變這個子元素的背景色

6）表單對象屬性過濾選擇器

:enabled　　　　　　　　　　　　$("#form1 :enabled")選取id爲"form1"的表單內的全部元素可用的元素

:disabled　　　　　　　　　　　 $("#form2 :disabled")選取id爲「form2」的表單內的全部不可用元素

:checked　　　　　　　　　　　　$("input :checked")選取全部被選中的<input>元素(單選框，複選框)

:selected　　　　　　　　　　　　$("select option :selected")選取全部被選中的選項元素（下拉列表）

測試畫面

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

demo2：改變表單內不可用<input>元素的值

demo3：獲取多選框選中的個數

$("input :checked").length

demo4：獲取下拉框選中的內容

$("select :selected").text();

4、表單選擇器

:input　　　　　　　　　　 $(":input")選取全部<input>、<textarea>、<select>、<button>

:text　　　　　　　　　　 $(":text")選取全部的單行文本框

:password　　　　　　　 $(":password")選取全部的密碼框

:radio　　　　　　　　　 $(":radio")選取全部的單選框

:checkbox　　　　　　　 $(":checkbox")選取全部的複選框

:submit　　　　　　　　　 $(":submit")選取全部提交的按鈕

:image　　　　　　　　　 $(":image")選取全部的圖像按鈕

:reset　　　　　　　　　　 $(":reset")選取全部的重置按鈕

:button　　　　　　　　 $("button")選取全部的按鈕

:file　　　　　　　　　　　 $(":file")選取全部的上傳域

:hidden　　　　　　　　　 $(":hidden")選取全部不可見元素

有點晚，後面的例子就不寫啦！！！

相關標籤/搜索

每日一句

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