選擇器
談到j(luò)query選擇器目胡，我們隨口都可以說出屬性選擇器锯七，類選擇器，id選擇器誉己，偽類選擇器等等眉尸。其實(shí)jquery的選擇器遠(yuǎn)不止這些，其實(shí)也經(jīng)尘匏可以聽到噪猾，jquery最強(qiáng)大的就是選擇器。
確實(shí)是筑累，jquery選擇器為我們提供給了很多方便袱蜡。
-
id,class,ele就不在敘述了
一次篩選多個選擇器
$('div,p,span.sel,.example')
若同時需要對多種不同元素做相同操作，我們便可以一次性都篩選出來慢宗，中間只需逗號隔開
子代選擇器 >
$('div>p')
通過大于> 由父級元素指到子級元素 不可跨級查詢
兄弟元素 +
$('div+p')
查找在指定div下坪蚁，平級或者平級元素的子級元素
~
$('div ~ p')
這些并不常用，這個是查找div之后的所有p標(biāo)簽镜沽。
當(dāng)我們項(xiàng)目做大時敏晤，這些篩選范圍太廣，我們在實(shí)際開發(fā)中運(yùn)用很少
偽類選擇器
偽類選擇器是很重要的選擇器缅茉，除了我們之前提到的大家耳熟能詳?shù)哪菐最愡x擇器之外茵典，便是偽類了
- ：first 獲取第一個元素
- ：last 獲取最后一個元素
- ：not(selector) 去除所有與給定選擇器匹配的元素
- :even :odd 匹配所有索引值為偶數(shù)/奇數(shù)的元素，從 0 開始計(jì)數(shù)
- :eq(index) 匹配一個給定索引值的元素 index從0開始
- ：lt() :gt() 匹配所有大于/小于給定索引值的元素
- ：header 匹配如 h1, h2, h3之類的標(biāo)題元素
- :animated 匹配所有正在執(zhí)行動畫效果的元素
- :contains(text) 匹配包含給定文本的元素 中文也可以
- :empty 匹配所有不包含子元素或者文本的空元素
- :hidden 匹配所有不可見元素宾舅，或者type為hidden的元素
- :visible 匹配所有的可見元素
- :first-child 匹配所給選擇器( :之前的選擇器)的第一個子元素
- :first-of-type jquery v1.9 新增選擇器统阿。官方文檔中解釋也相對模糊。ele:first-of-type 其實(shí)就是獲取當(dāng)前元素(ele)的父元素的第一個(ele)類型的孩子
- :last-child / :last-of-type
- :nth-child 通俗的講筹我，為其父元素匹配第幾個子元素扶平，nth-child(1)是從1開始計(jì)數(shù)，和:eq(0)不同的是蔬蕊，eq從索引0開始结澄。當(dāng)然，:nth-child()中可以傳一些特殊的值岸夯，如even麻献、odd，或者是變量猜扮，如3n+1,2n等
- :nth-last-child 計(jì)數(shù)從最后一個元素開始到第一個
表單元素的偽類選擇器
-:input 匹配所有 input, textarea, select 和 button 元素 不只是input標(biāo)簽 如<button>,<select>,<textarea>這種標(biāo)簽也是可以直接匹配出來的
-:text :password :reset :button :file 等等 就是直接查找type類型為這些的選擇器
屬性選擇器
[attribute] 屬性選擇器有幾種不同的篩選方式
- 例如
$('div[id]'),$('div[id="sadas"]'),$('div[id!="sadas"]') -
$('div[id^="sadas"]'),$('div[id$="sadas"]'),$('div[id*="sadas"]')等等 - 以上包括查找包含某一屬性勉吻，某藝術(shù)性為某一固定值的，或者取反旅赢，以…開頭齿桃，結(jié)尾等等，與正則的常用標(biāo)識一致
下面給出例子：
1.id選擇
1. <script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
2. <script type="text/javascript">
3. $(function(){
4. $("#li1").css("color","red");
5. })
6. </script>
7. </head>
8. <body>
9. <ul>
10. <li id="li1">列表1</li>
11. <li>列表2</li>
12. <li>列表3</li>
13. <li>列表4</li>
14. </ul>
15. </body>
2.標(biāo)簽選擇器
1. <script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
2. <script type="text/javascript">
3. $(function(){
4. $("li").css("color","red");
5. })
6. </script>
7. </head>
8. <body>
9. <ul>
10. <li id="li1">列表1</li>
11. <li>列表2</li>
12. <li>列表3</li>
13. <li>列表4</li>
14. </ul>
15. </body>
3.類選擇器
1. <script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
2. <script type="text/javascript">
3. $(function(){
4. $(".li2").css("color","red");
5. })
6. </script>
7. </head>
8. <body>
9. <ul>
10. <li id="li1">列表1</li>
11. <li class="li2">列表2</li>
12. <li>列表3</li>
13. <li>列表4</li>
14. </ul>
15. </body>
4.通配選擇器
1. <script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
2. <script type="text/javascript">
3. $(function(){
4. $("ul *").css("color","red");
5. })
6. </script>
7. </head>
8. <body>
9. <ul>
10. <li id="li1">列表1</li>
11. <li class="li2">列表2</li>
12. <li>列表3</li>
13. <li>列表4</li>
14. </ul>
15. </body>
5組合選擇器
1. <script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
2. <script type="text/javascript">
3. $(function(){
4. $("#li1,.li2").css("color","red");
5. })
6. </script>
7. </head>
8. <body>
9. <ul>
10. <li id="li1">列表1</li>
11. <li class="li2">列表2</li>
12. <li>列表3</li>
13. <li>列表4</li>
14. </ul>
15. </body>
簡單的選擇器到此結(jié)束了
