jQuery - 选择器（五）

最新推荐文章于 2020-09-14 09:46:53 发布

转载最新推荐文章于 2020-09-14 09:46:53 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/suntop/archive/2010/09/29/1838305.html

文章标签：

#javascript #ViewUI

本文详细介绍了jQuery中层次选择器的使用方法，包括祖先后代选择器、父级子级选择器、相邻兄弟选择器及通用兄弟选择器，并通过具体实例展示了它们如何应用于HTML文档中。

层次选择器（hierarchy），根据元素的层次关系来选择相应元素，主要包括：

ancestor descendant 选择所有给定祖先元素下的相匹配的后代元素，jQuery语法 jQuery('ancestor descendant')。

parent>child 选择所有给定父元素下的相匹配的直系子元素。

prev+next 选择所有紧接着prev元素后的nex元素。

prev~siblings 选择所有紧接着prev元素后的兄弟元素，这些元素要和"siblings"匹配。

具体使用的例子：

1 <!doctype>
2 <html>
3 <head>
4 <style>
5 fieldset{
6 margin:5px;
7 }
8 div,span{
9 width:100px;
10 height:100px;
11 margin:10px;
12 float:left;
13 border:1px solid red;
14 }
15 </style>
16 <script src="jquery/jquery.js"></script>
17 <script>
18 $(document).ready(
19 function(){
20 $("form input").css("border","1px solid blue");
21 $("form>input").css("color","red");
22 $("fieldset+label").css("color","red");
23 $("br~div").css("color","blue");
24 }
25 )
26 </script>
27 </head>
28 <body>
29 <form>
30 <label>Name:</label>
31 <input type="text" value="name"/>
32 <fieldset>
33 <label>Grandchild:</label>
34 <input type="text" value="grandchild"/>
35 </fieldset>
36 <label>fieldset next label</label>
37 <br/>
38 <div>div1</div>
39 <div>div2</div>
40 <span>span</span>
41 <div>div3</div>
42 </form>
43 </body>
44 </html>

显示结果：