jQuery选择器是jQuery框架的基础，jQuery对事件的处理、DOM操作、CSS动态控制、Ajax通信、动画设计都是在选择器基础上进行的
注意，在jQuery中通过各种选择器和方法获取的结果集合实际上都是一个jQuery对象
| 基本选择器 | 说明 | 返回值 |
| #id | 根据给定的ID匹配一个元素，如果选择器中包含特殊字符，可以用两个斜杠转义 | 单个元素 |
| element | 根据指定的元素类型名称选择该类型所有元素 | 同类型集合元素 |
| .class | 根据指定的类名选择所有同类元素 | 集合元素 |
| * | 在所限定的范围内选择所有元素 | 所有元素的集合 |
| selector1,selector2,selectorN | 分别选择选择器组中每个选择器匹配的元素，然后合并返回所有元素 | 集合元素 |
基本ID选择器：jQuery("#id") 在ID选择其中，如果选择器中包含特殊字符，可以在jQuery中使用两个斜杠对特殊字符进行转义
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 $("#div1").css("background","red"); 9 $("#a\.b").css("color","red");//等同于document.getElementById("a.b").style.color="red"; 10 $("#a\:b").css("color","red");//等同于document.getElementById("a:b").style.color="red"; 11 $("#\[div\]").css("color","red");//等同于document.getElementById("[div]").style.color="red"; 12 }) 13 </script> 14 <title>上机练习</title> 15 </head> 16 <body> 17 <div id="div1">测试盒子</div> 18 <div id="a.b">div2</div> 19 <div id="a:b">div3</div> 20 <div id="[div]">div4</div> 21 </body> 22 </html>
基本标签选择器：jQuery("element") 参数element为字符串，表示标签的名称。返回值为包含匹配标签的jQuery对象
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 $("div").css("color","red");//var divs=document.getElementsByTagName("div"); 9 //for(var i=0;i<divs.length;i++){ 10 //divs[i].style.color="red"; 11 }) 12 </script> 13 <title>上机练习</title> 14 </head> 15 <body> 16 <div>div1</div> 17 <div>div2</div> 18 <div>div3</div> 19 </body> 20 </html>
基本类选择器：jQuery(".className") 参数className为字符串，表示标签的class属性值，前缀符号.表示该选择器为类选择器。返回值为包含匹配className元素的jQuery对象
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 $(".red").css("color","red"); 9 }) 10 </script> 11 <title>上机练习</title> 12 </head> 13 <body> 14 <div class="red">div1</div> 15 <div>div2</div> 16 <div class="red">div3</div> 17 </body> 18 </html>
基本通配选择器：jQuery("*") 参数为*字符串，表示将匹配指定范围内所有的标签元素
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 $("*").css("color","red");//var all=document.getElementsByTagName("*"); 9 //for(var i=0;i<all.length;i++){ 10 //all[i].style.color="red"; 11 //} 12 }) 13 </script> 14 <title>上机练习</title> 15 </head> 16 <body> 17 <div>DIV</div> 18 <span>SPAN</span> 19 <p>P</p> 20 </body> 21 </html>
基本组选择器：jQuery("selector1,selector2,selectorN")
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 $("h2,#wrap,span.red,[title='text'").css("color","red");//注意[title='text' 9 }) 10 </script> 11 <title>上机练习</title> 12 </head> 13 <body> 14 <h2>H2</h2> 15 <div id="wrap">DIV</div> 16 <span class="red">SPAN</span> 17 <p title="text">P</p> 18 </body> 19 </html>
|
层级选择器 |
说明 |
| ancestor descendant | 在给定的祖先元素下匹配所有的后代元素，ancestor表示任何有效选择器，descendant表示用以匹配元素的选择器，并且它是第1个选择器的后代元素 |
| parent>child | 在给定的父元素下匹配所有的子元素，parent表示任何有效选择器，child表示用以匹配元素的选择器， 并且它是第1个选择器的后代元素 |
| prev+next | 匹配所有紧接在prev元素后的next元素，prev表示任何有效的选择器，next表示一个有效选择器并且紧接着第1个选择器 |
| prev~siblings | 匹配prev元素之后的所有siblings元素，prev表示任何有效选择器，siblings表示一个选择器，并且它作为第1个选择器的同级结构 |
层级包含选择器：jQuery("ancestor descendant") ancestor表示包含选择器，descendant表示被包含选择器，jQuery能够在ancestor选择器所匹配的元素中，过滤出匹配ancestor选择器的所有包含元素；注意，包含选择器不受包含结构的层级限制，只要被包含在第1个选择器中的所有匹配第2个选择器的元素都被返回
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 $("form input").css({"border":"solid 1px red","background":"blue"}); 9 }) 10 </script> 11 <title>上机练习</title> 12 </head> 13 <body> 14 <form> 15 <fieldset> 16 <label>包含的子文本框 17 <input type="text"/> 18 </label> 19 <fieldset> 20 <label>包含的孙文本框 21 <input type="text"/> 22 </label> 23 </fieldset> 24 </fieldset> 25 </form> 26 <label>非包含的文本框 27 <input type="text"/> 28 </label> 29 </body> 30 </html>
层级子选择器：jQuery("parent>child") 注意，子选择器与包含选择器在匹配结果集中有重合的部分，但是包含选择器能够匹配更多的元素，除了子元素，还包括所有嵌套的元素
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 $("div>img").css("border","solid 5px red"); 9 }) 10 </script> 11 <title>上机练习</title> 12 </head> 13 <body> 14 <div> <span><img src="1.jpg" width="250" height="250"/></span> <img src="1.jpg" width="250" height="250"/> </div> 15 <img src="1.jpg" width="250" height="250"/> 16 </body> 17 </html>
层级相邻选择器：jQuery("prev+next") jQuery能够在prev选择器所匹配的元素后，过滤出所有匹配next选择器的紧邻同级元素；注意，与子选择器和包含选择器不同，从结构上分析相邻选择器是在同级结构上进行匹配和过滤元素，而子选择器和包含选择器是在包含的内部结构中过滤元素
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 $("div+img").css("border","solid 5px red"); 9 }) 10 </script> 11 <title>上机练习</title> 12 </head> 13 <body> 14 <div> <span><img src="1.jpg" width="250" height="250"/></span> <img src="1.jpg" width="250" height="250"/> </div> 15 <img src="1.jpg" width="250" height="250"/> 16 <img src="1.jpg" width="250" height="250"/> 17 </body> 18 </html>
层级兄弟选择器：jQuery("prev~siblings") jQuery能够在prev选择器所匹配的元素后，过滤出所有匹配siblings选择器的同级元素;注意，与子选择器和包含选择器不同，从结构上分析，兄弟选择器是在同级结构上进行匹配和过滤元素，而子选择器和包含选择器是在包含的内部结构中过滤元素
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 $("div~img").css("border","solid 5px red"); 9 }) 10 </script> 11 <title>上机练习</title> 12 </head> 13 <body> 14 <div> <span><img src="1.jpg" width="250" height="250"/></span> <img src="1.jpg" width="250" height="250"/> </div> 15 <img src="1.jpg" width="250" height="250"/> 16 <img src="1.jpg" width="250" height="250"/> 17 </body> 18 </html>
综合应用
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="jquery-1.11.3.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){ 8 $("p,div").css({"margin":"0","padding":"0.5em"}); 9 $("div").css("border","solid 2px red"); 10 $("div>div").css("margin","1em"); 11 $("div div").css("background","#ff0"); 12 $("div div div").css("background","#f0f"); 13 $("div+p").css("margin","1em"); 14 $("div:eq(1)~p").css({"background":"blue","color":"white"}); 15 }) 16 </script> 17 </head> 18 <body> 19 <h1>青玉案——元夕</h1> 20 <h2>辛弃疾</h2> 21 <div> 22 <div>东风夜放花千树 23 <div>更吹落，星如雨。</div> 24 <p>宝马雕车香满路。</p> 25 <p>凤箫声动，玉壶光转，</p> 26 <p>一夜鱼龙舞。</p> 27 </div> 28 <p>蛾儿雪柳黄金缕，</p> 29 <p>笑语盈盈暗香去。</p> 30 <p>众里寻他千百度，</p> 31 </div> 32 <p>蓦然回首，那人却在，</p> 33 <p>灯火阑珊处。</p> 34 </body> 35 </html>