根據 jquery官網api檔案撰寫 https://www.jq22.com/chm/jquery/index.html 鞏固一下最近幾天的學習的內容，
選擇器的作用：選擇器允許您對多個元素或單個元素進行操作，
一，基本選擇器
總共五種分別是id選擇器 ，元素選擇器 ，class選擇器，通配符選擇器，多元素選擇器(注：寫jquery語法時要導jquery框架包)
1.id選擇器給元素定義id ，為文本添加顏色 ，
eg: <div id="div1">id選擇器</div> css寫法：#div1{color: red;} jquery寫法:$("#div1").css("color","red");
2.元素(element)選擇器 （選中所選的元素)，
eg：<p>元素選擇器qwq</p> css寫法：p{color: aqua;} jquery寫法：$('p').css("color","aqua");
3.多級元素選擇器（和元素選擇器同理相當于同時選中多個元素）：
eg：<div id="div1">id選擇器</div> <div id="div3">*選擇器</div>
css寫法：#div1,#div3{font-size: 30px;}；
jquery寫法：$("#div1,#div3").css("font-size","30px"); 注：id選擇器，class選擇器，元素選擇器通用
4.class選擇器（和id同理）
eg：<div >class選擇器</div>
css寫法：.div2{color: blue;} jquery寫法：$(".div2").css("color","blue");
5.通配符選擇器（*代表所有元素，選中所有元素）
eg：css寫法：*{font-family: "bradley hand itc";} jquery寫法：$("*").css("font-family","bradley hand itc");
二，層級選擇器
//html模板
<div > <p>我是第一層div里的第一個p標簽</p> <i>我是一個跟在p標簽后的i標簽</i> <div > <p>我是第二層div里的p標簽</p> <i>我是一個跟在p標簽后的i標簽</i> <i>我是一個跟在p標簽后的i標簽</i> </div> </div>
<p>我和div同輩p標簽</p>
1.ancestor descendant（在給定的祖先元素下匹配所有的后代元素）
eg:(給第一層div下的p元素添加顏色) css寫法 .f_div p{color: blue;} jquery寫法:$(".f_div p").css("color","blue");
2.parent>child(在給定的父元素下匹配所有的子元素)
eg:(選中在父親f_div下的兒子p標簽) css寫法 .f_div>p{color: red;} jquery寫法：$(".f_div>p").css("color","red");
3.prev + next（匹配所有緊接在 prev 元素后的 next 元素）
eg（選中跟在div后的第一個p標簽） css寫法;p+i{color: orangered;} jquery寫法：$("p+i").css("color","orangered");
4.prev ~ siblings(匹配 prev 元素的所有同輩 siblings 元素)
eg(選中跟f_div同級的p標簽) css寫法：.f_div ~ p{color: deeppink;} jquery寫法：$(".f_div ~ p").css("color","deeppink");
三，基本選擇器的延伸（在基本選擇器上再做選擇）
1. :first選擇器（獲取匹配元素的第一個元素）注css寫法與jq寫法不同舉一個列子
eg; $('li:first').css('color','red'); 給li元素中第一個元素的顏色為紅色 css寫法：li:first-child{color: red;}，
2.:not(selector)選擇器（去除所有與給定選擇器匹配的元素）
eg：查找未被選中的input元素，$("input:not(:checked)")，
3.:even選擇器（匹配所有索引值為偶數的元素，從 0 開始計數）
注：css寫法可參考：https://www.cnblogs.com/2979100039-qq-con/p/12599726.html
eg:$("li:even").css('color','blue') 為li串列中索引為偶數的添加為藍色，
4.:odd選擇器（匹配所有索引值為奇數的元素，從 0 開始計數）有偶數就會有奇數，odd與even正好相對應
eg:$("li:odd").css('color','pink') 為li串列中索引為奇數的添加為粉紅色，
5.:eq(index)選擇器（匹配一個給定索引值的元素）index為索引值，根據索引查找元素 注：索引從0開始
eg:$("li:eq(3)").css('color','orange') 為li串列中索引為3的元素添加為橙色，
6.:get(index)選擇器（匹配所有大于給定索引值的元素）index為索引值 查找比給定index值大的元素
eg:$("li:eq(2)").css("font-size","30px") 給索引大于2的li字體設定為30px 如第四個li第五個li....不包含第三個li級以下，
7.:lang選擇器(選擇指定語言的所有元素) 不常見
決議：:lang選擇器,匹配有一個語言值等于所提供的語言代碼，或以提供的語言代碼開始，后面馬上跟一個“ - ”的元素，例如，
選擇器$("div:lang(en)")將匹配<div lang="en"> and <div lang="en-us">（和他們的后代<div>），但不包括<div lang="fr">，
8.:last選擇器（獲取最后個元素）與first相對應有第一個就有最后一個
eg： $('li:last').css('text-decoration','underline'); 給li元素中最后一個元素添加下劃線 ，
9:lt(index)選擇器（匹配所有小于給定索引值的元素）與get相對應 index為索引值 查找比給定index值小的元素
eg:$("li:eq(2)").css("font-size","10px") 給索引小于2的li字體設定為10px 如第一個li第二個li....不包含第三個li級以，
10.:header選擇器（匹配如 h1, h2, h3之類的標題元素）選中所有標題
eg：$(":header").css("font-weight", "bold");給頁面內所有標題元素文本加粗，
11.:animated選擇器（匹配所有正在執行影片效果的元素）
eg：（每點擊一下按鈕，div快向右移動20）
//html代碼
<button id="run">Run</button><div style="position: absolute; left: 40px;">212</div>
//jquery代碼
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
12.:focus選擇器（匹配當前獲取焦點的元素，）不常見
決議：如同其他偽類選擇器（那些以":"開始），建議:focus前面用標記名稱或其他選擇;否則，通用選擇("*")是不言而喻的，換句話說，
$(':focus')等同為$('*:focus')，如果你正在尋找當前的焦點元素，$( document.activeElement )將檢索，而不必搜索整個DOM樹，
13.:root選擇器(選擇該檔案的根元素)
eg:$(":root").css("background-color","yellow");等同于css里的 html{}
14.:target選擇器（選擇由檔案URI的格式化識別碼表示的目標元素）不常見我自己沒看懂==
決議：如果檔案的URI包含一個格式化的識別符號，或hash（哈希）， 然后:target選擇器將匹配ID和識別符號相匹配的元素， 例如，給定的URI http://example.com/#foo， $( "p:target" )，將選擇<p id="foo">元素，
四，內容選擇器
1.:contains(text)選擇器（匹配包含給定文本的元素）
eg：$("div:contains('contains')").css("color","red"); 給包含有contains文本的元素設定為紅色
2.:empty選擇器（匹配所有不包含子元素或者文本的空元素）
eg：$("p:not(:empty)").css("text-decoration","line-through");給非空的p標簽添加洗掉線 注：如果p標簽不包含內容就看不出效果所以加了個not，意為包含內容的p標簽仔細想想就明白了
3.:has(selector)選擇器（匹配含有選擇器所匹配的元素的元素）
eg：$("div:has(p)").css("background-color","#ccc");//給含有p元素的div快添加背景顏色
4.:parent(匹配含有子元素或者文本的元素) 與:empty選擇器恰恰相反
eg：$("p:parent").css("background-color","#00aaff");給非空的p標簽添加背景顏色
五，可見性選擇器
1.:hidden選擇器（匹配所有不可見元素，或者type為hidden的元素）
2.:vislble(匹配所有的可見元素)
例如：
效果如下：
六，屬性選擇器
這幾個屬性很相似
1. [attribute]選擇器（匹配包含給定屬性的元素，）
2.[attribute=value] (匹配給定的屬性是某個特定值的元素)
3.[attribute!=value](匹配所有不含有指定的屬性，或者屬性不等于特定值的元素，)
4.[attribute^=value](匹配給定的屬性是以某些值開始的元素)
5.[attribute$=value](匹配給定的屬性是以某些值結尾的元素)
6.[attribute*=value](匹配給定的屬性是以包含某些值的元素)
7[selector1][selector2][selectorN](復合屬性選擇器，需要同時滿足多個條件時使用，)
例如：
<div id="">我是含有id屬性的div</div>
<div id="attribute">我是含有style屬性的div</div>
<div id="ss"> 我的id為ss的div元素所以我沒有下劃線</div>
<div >我的class屬性是以div開頭的</div>
<div > 我的class屬性是以div結尾的</div>
<input type="text" name="我是包含我" value="https://www.cnblogs.com/2979100039-qq-con/p/我是一個name屬性值包含包含的input表單" />
<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("div[id]").css("color","red");//[attribute]選擇器，給含有id屬性的div設定為紅色
$("div[id='attribute']").css("color","blue");//[attribute=value]選擇器 設定div元素id等于attribute的顏色為藍色
$("div[id!='ss']").css("text-decoration","underline");//給div元素id不是ss的添加下劃線
$("div[class^='div']").css("font-size","30px");//給class屬性以div開頭的div字體設定為30px
$("div[class$='div']").css("font-size","10px");//給class屬性以div結尾的div字體設定為10px /* 注至于為什么有下滑線細想 */
$("input[name*='包含']").css("border","1px solid red");//為input表單name屬性值有包含的輸入框設定為紅色
</script>
效果如下：
七，子元素選擇器
個人覺得子元素選擇器是在基本選擇器延伸中再次的優化選擇，有很多方法可以用基本選擇器來完成的功能，只不過這個跟便捷
1.:first-child（匹配第一個子元素 ':first' 只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素），
2.:first-of-type（選擇所有相同的元素名稱的第一個兄弟元素，:first-of-type 選擇器匹配元素，在檔案樹中，相同的父元素并且在其他相同的元素名稱之前），
3.:last-child (與first對應 匹配第一個子元素 ':last'只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素)，
4.:last-of-type (與first-of-type 對應，選擇的所有元素之間具有相同元素名稱的最后一個兄弟元素)，
5.:nth-child() (匹配其父元素下的第N個子或奇偶元素) 語法:nth-child（index） :nth-child(even) :nth-child(odd).
index 代表索引，從1開始，even代表偶數0,2,4，odd代表奇數1,3,5
6.:nth-last-child(選擇的所有他們的父級元素的第n個子元素，計數從最后一個元素到第一個)
和上面的唯一不同點是:nth-child()從第一個開始:nth-last-child() 從最后一個開始，
7.:nth-last-of-child(選擇的所有他們的父級元素的第n個子元素，計數從最后一個元素到第一個) 同上
8.::nth-of-type(n|even|odd|formula) 選擇同屬于一個父元素之下，并且標簽名相同的子元素中的第n個，
9.:only-child (查找只有第一個子元素的父元素)
10.:only-of-type（選擇所有沒有兄弟元素，且具有相同的元素名稱的元素，）
這些出現的比較少 不常見
八,表單選擇器
可以看出表單選擇器是根據input表單中type的屬性值來進行選擇，
input表單屬性值詳情：https://www.runoob.com/html/html5-form-input-types.html（若不清楚input屬性可以學習一下）
這里就不一 一贅述簡單寫兩個列子：注：不是所有的type屬性都可以使用，比如type='tel'就不可以遵循api上面的屬性
<input type="button" value="https://www.cnblogs.com/2979100039-qq-con/p/我的type屬性值是button" />
<input type="text" value="https://www.cnblogs.com/2979100039-qq-con/p/我的type屬性值是text" />
<input type="password" value="https://www.cnblogs.com/2979100039-qq-con/p/我的type屬性值是tel" />
<script src="https://www.cnblogs.com/2979100039-qq-con/p/js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$(":input").css("background-color","aqua");//給所有的input添加背景顏色為aqua
$(":text").css("border"," 2px solid red");//給type屬性值為text的input添加紅色的邊框
$(":password").css("border"," 2px solid blue");//給type屬性值為password的input添加藍色的邊框
});
</script>
效果：
九，表單物件屬性選擇器（不常見）
1.:enabled選擇器（匹配所有可用元素）
2:disabled選擇器（匹配所有不可用元素）
3.:checked選擇器（匹配所有選中的被選中元素(復選框、單選框等，不包括select中的option)）
4.:selected選擇器（匹配所有選中的option元素）
部分案例下載：https://files.cnblogs.com/files/2979100039-qq-con/Jquery%E9%80%89%E6%8B%A9%E5%99%A8.zip
這樣子整個jquery選擇器就全部列舉出來了，個人學習，如有錯誤，還望指點
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2391.html
標籤：jQuery
上一篇：jquery處理radio示例