jquery选择器
2010-08-13 12:56 cnb_mtime 阅读(315) 评论(0) 编辑 收藏 举报
1 测试HTML代码:
2 <div id="father">
3 <div id="first">I am first</div>
4 <div id="second" class="red">I am second</div>
5 <div id="third" style="display:none">I am third</div>
6 </div>
7 <p class="red">I am forth</p>
8 <h4></h4>
9 基础:
10 #id:根据对象的id属性获取对象。
11 alert($('#first').html());
12 //显示I am first
13 element:匹配某一HTML标签的所有对象
14 alert($('div').length);
15 //显示4
16 .class:根据对象的class属性获取对象
17 alert($('.red').length);
18 //显示2
19 *:获取所有的对象
20 alert($('*').length);
21 //显示HTML中对象的和,但是不同的浏览器,结果会有所不同
22 selector1, selector2, selectorN:获取多个选择符的合集,不剔出重复项。
23 alert($('.red,#second,p').length);
24 //显示4
25 层级选择符:
26 ancestor descendant:这个选择符就是空格,表示先找到第一个选择符的所有对象,然后在他的子孙节点中找到所有符合第二个选择符的对象。
27 alert($('#father .red').html());
28 //显示I am second
29 parent > child:这个选择符就是大于号,表示先找到第一个选择符的所有对象,然后在他的子节点(不能是孙节点)中找到所有符合第二个选择符的对象。
30 alert($('#father > .red').html());
31 //显示I am second
32 prev + next:这个选择符就是加号,表示先找到第一个选择符的所有对象,然后找和他同级的紧跟着的下一个节点同时符合第二个选择符的对象。
33 alert($('#father + .red').html());
34 //显示I am forth
35 prev ~ siblings:这个选择符就是~号,表示先找到第一个选择符的所有对象,然后找和他同级的以后所有节点里面同时符合第二个选择符的对象。
36 alert($('#first ~ #third').html());
37 //显示I am third
38 基础过滤符:
39 :first:匹配多个对象中的第一个对象
40 :last:匹配多个对象中的最后一个对象
41 alert($('.red:first').html());
42 //显示I am second
43 alert($('div:last').html());
44 //显示I am third
45 :not(selector):匹配去除了not后面选择符中内容的项
46 alert($('.red:not(#second)').html());
47 //显示I am forth
48 :even:匹配所有对象中的第偶数个
49 :odd:匹配所有对象中的第奇数个
50 alert($('div:even').length);
51 //显示2
52 alert($('div:odd').length);
53 //显示2
54 :eq(index):匹配某一下表的单独某元素
55 alert($('div:eq(2)').html());
56 //显示I am second
57 :gt(index):匹配大于某一下标的所有元素
58 :lt(index):匹配小于某一下标的所有元素
59 alert($('div:gt(1)').length);
60 //显示2
61 alert($('div:lt(2)').length);
62 //显示2
63 :header:匹配所有的header元素,例如h1,h2,h3,h4,h5,h6
64 alert($(':header').length);
65 //显示1
66 :animated:匹配所有有动画效果的元素
67 function animateIt()
68 {
69 $("#second").slideToggle("slow", animateIt);
70 }
71 animateIt();
72 alert($(':animated').html());
73 //显示I am second
74 文本过滤符:
75 :contains(text):匹配内部拥有该文本元素的对象,包含间接有用的情况
76 alert($('div:contains("first")').length);
77 //显示2
78 :empty:匹配所有没有子元素的对象
79 alert($(':header:empty').length);
80 //显示1
81 :has(selector):匹配所有至少含有一个子选择符的对象
82 alert($('div:has("#third")').attr('id'));
83 //显示father
84 :parent:匹配所有的父对象,父对象包含那些只含有文本的对象
85 alert($('div:parent').length);
86 //显示4
87 可见性过滤符:
88 :hidden:匹配所有隐藏对象,或者input中的hidden类型
89 :visible:匹配所有可见的对象
90 alert($('div:hidden').length);
91 //显示1
92 alert($('div:visible').length);
93 //显示3
94 属性过滤符:
95 [attribute]:匹配拥有某一属性的所有对象
96 [attribute=value]:匹配拥有某一属性和值的对象
97 [attribute!=value]:匹配拥有某一属性,且不是某一值的对象
98 [attribute^=value]:匹配拥有某一属性,且以某一值开头的对象
99 [attribute$=value]:匹配拥有某一属性,且以某一值结尾的对象
100 [attribute*=value]:匹配拥有某一属性,且包含某一值的对象
101 alert($('div[class]').html());
102 //显示I am second
103 alert($('div[class=red]').html());
104 //显示I am second
105 alert($('div[id!=father]').length);
106 //显示3
107 alert($('div[id^=f]').length);
108 //显示2
109 alert($('div[id$=d]').length);
110 //显示2
111 alert($('div[id*=ir]').length);
112 //显示2
113 [selector1][selector2][selectorN]:匹配同时符合多个属性选择符的对象
114 alert($('div[id=second][class^=r]').length);
115 //显示I am second
116 子过滤符:
117 :nth-child(index/even/odd/equation):匹配子元素中的某一下标/偶数/奇数/等式的对象,:eq(index)只能匹配某单一对象的子元素特征,而这个方法可以匹配多个对象的某一子元素共同特征
118 alert($('#father div:nth-child(1)').html());
119 //显示I am first
120 alert($('#father div:nth-child(even)').length);
121 //显示1
122 alert($('#father div:nth-child(odd)').length);
123 //显示2
124 alert($('#father div:nth-child(3n)').length);
125 //显示1,其实是每3个一匹配
126 :first-child:匹配第一个子元素
127 :last-child:匹配最后一个子元素
128 这两个匹配符也可以对多个父对象的所有子元素进行匹配操作
129 alert($('#father div:first-child').html());
130 //显示I am first
131 alert($('#father div:last-child').html());
132 //显示I am third
133 :only-child:如果一个父元素只有一个子元素,就匹配这个子元素
134 alert($('div:only-child').length);
135 //显示0