jQuery学习笔记（二）使用选择器一

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>

时间： 2024-08-03 06:25:37

jQuery学习笔记（二）使用选择器一

jQuery学习笔记（二）使用选择器一的相关文章

jquery 学习笔记二隐藏与显示

jquery学习笔记(一)：选择器

jQuery学习笔记——jQuery常规选择器

jQuery学习笔记（一）：入门

Js脚本之jQuery学习笔记（1）

JQuery学习笔记(1)

jQuery学习笔记（2014年8月3日）事件委派

Ajax学习笔记(二)

锋利的JQuery 学习笔记

jQuery 学习笔记