转载:http://www.cnblogs.com/onlys/articles/jQuery.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $( "#myELement" ) 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$( "div" ) 选择所有的div标签元素,返回div元素数组
$( ".myClass" ) 选择使用myClass类的css的所有元素
$( "*" ) 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$( "#myELement,div,.myclass" )
层叠选择器: $( "form input" ) 选择所有的form元素中的input元素
$( "#main > *" ) 选择id值为main的所有的子元素
$( "label + input" ) 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$( "#prev ~ div" ) 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
基本过滤选择器: $( "tr:first" ) 选择所有tr元素的第一个
$( "tr:last" ) 选择所有tr元素的最后一个
$( "input:not(:checked) + span" )
过滤掉:checked的选择器的所有的input元素 $( "tr:even" ) 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
$( "tr:odd" ) 选择所有的tr元素的第1,3,5... ...个元素
$( "td:eq(2)" ) 选择所有的td元素中序号为2的那个td元素
$( "td:gt(4)" ) 选择td元素中序号大于4的所有td元素
$( "td:ll(4)" ) 选择td元素中序号小于4的所有的td元素
$( ":header" )
$( "div:animated" )
内容过滤选择器: $( "div:contains('John')" ) 选择所有div中含有John文本的元素
$( "td:empty" ) 选择所有的为空(也不包括文本节点)的td元素的数组
$( "div:has(p)" ) 选择所有含有p标签的div元素
$( "td:parent" ) 选择所有的以td为父节点的元素数组
可视化过滤选择器: $( "div:hidden" ) 选择所有的被hidden的div元素
$( "div:visible" ) 选择所有的可视化的div元素
属性过滤选择器: $( "div[id]" ) 选择所有含有id属性的div元素
$( "input[name='newsletter']" ) 选择所有的name属性等于 'newsletter' 的input元素
$( "input[name!='newsletter']" ) 选择所有的name属性不等于 'newsletter' 的input元素
$( "input[name^='news']" ) 选择所有的name属性以 'news' 开头的input元素
$( "input[name$='news']" ) 选择所有的name属性以 'news' 结尾的input元素
$( "input[name*='man']" ) 选择所有的name属性包含 'news' 的input元素
$( "input[id][name$='man']" ) 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
子元素过滤选择器: $( "ul li:nth-child(2)" ),$( "ul li:nth-child(odd)" ),$( "ul li:nth-child(3n + 1)" )
$( "div span:first-child" ) 返回所有的div元素的第一个子节点的数组
$( "div span:last-child" ) 返回所有的div元素的最后一个节点的数组
$( "div button:only-child" ) 返回所有的div中只有唯一一个子节点的所有子节点的数组
表单元素选择器: $( ":input" ) 选择所有的表单输入元素,包括input, textarea, select 和 button
$( ":text" ) 选择所有的text input元素
$( ":password" ) 选择所有的password input元素
$( ":radio" ) 选择所有的radio input元素
$( ":checkbox" ) 选择所有的checkbox input元素
$( ":submit" ) 选择所有的submit input元素
$( ":image" ) 选择所有的image input元素
$( ":reset" ) 选择所有的reset input元素
$( ":button" ) 选择所有的button input元素
$( ":file" ) 选择所有的file input元素
$( ":hidden" ) 选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器: $( ":enabled" ) 选择所有的可操作的表单元素
$( ":disabled" ) 选择所有的不可操作的表单元素
$( ":checked" ) 选择所有的被checked的表单元素
$( "select option:selected" ) 选择所有的select 的子元素中被selected的元素
选取一个 name 为”S_03_22″的input text框的上一个td的text值 $(”input[@ name =S_03_22]“).parent().prev().text() 名字以”S_”开始,并且不是以”_R”结尾的 $(”input[@ name ^= 'S_' ]“).not(”[@ name $= '_R' ]“)
一个名为 radio_01的radio所选的值 $(”input[@ name =radio_01][@checked]“).val(); $( "A B" ) 查找A元素下面的所有子节点,包括非直接子节点
$( "A>B" ) 查找A元素下面的直接子节点
$( "A+B" ) 查找A元素后面的兄弟节点,包括非直接子节点
$( "A~B" ) 查找A元素后面的兄弟节点,不包括非直接子节点
1. $( "A B" ) 查找A元素下面的所有子节点,包括非直接子节点
例子:找到表单中所有的 input 元素 HTML 代码: <form> <label>Name:</label> <input name= "name" />
<fieldset> <label>Newsletter:</label>
<input name= "newsletter" />
</fieldset> </form> <input name= "none" />
jQuery 代码: $( "form input" )
结果: [ <input name= "name" />, <input name= "newsletter" /> ]
2. $( "A>B" ) 查找A元素下面的直接子节点
例子:匹配表单中所有的子级input元素。 HTML 代码: <form> <label>Name:</label> <input name= "name" />
<fieldset> <label>Newsletter:</label>
<input name= "newsletter" />
</fieldset> </form> <input name= "none" />
jQuery 代码: $( "form > input" )
结果: [ <input name= "name" /> ]
3. $( "A+B" ) 查找A元素后面的兄弟节点,包括非直接子节点
例子:匹配所有跟在 label 后面的 input 元素 HTML 代码: <form> <label>Name:</label> <input name= "name" />
<fieldset> <label>Newsletter:</label>
<input name= "newsletter" />
</fieldset> </form> <input name= "none" />
jQuery 代码: $( "label + input" )
结果: [ <input name= "name" />, <input name= "newsletter" /> ]
4. $( "A~B" ) 查找A元素后面的兄弟节点,不包括非直接子节点
例子:找到所有与表单同辈的 input 元素 HTML 代码: <form> <label>Name:</label> <input name= "name" />
<fieldset> <label>Newsletter:</label>
<input name= "newsletter" />
</fieldset> </form> <input name= "none" />
jQuery 代码: $( "form ~ input" )
结果: [ <input name= "none" /> ]
|
相关推荐
Jquery选择器,Jquery选择器Jquery选择器Jquery选择器Jquery选择器Jquery选择器
jQuery选择器大全(48个代码片段 21幅图演示)
jQuery选择器全解.
jQuery选择器速查表,包括了jQuery的基本选择器、层次选择器、过滤选择器、表单选择器,方便以后查找。
Jquery选择器; 基本选择器;jQuery选择器;jQuery选择器; 层级选择器;jQuery选择器;;; 筛选选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器; 排他思想;jQuery选择器;jQuery...
jquery 选择器 描述
jQuery选择器过滤器全面的总结,老师推荐!
JQuery 选择器,方便 使用的技术
经典的jQuery选择器应用例子,直观的演示了各种选择器的应用例子。对学习jQuery很有帮助。
jQuery选择器大全(48个代码片段+21幅图演示)
这是一份比较全面的jQuery选择器基础知识,包括源代码和相应的ppt,供大家分享
Jquery选择器分类整理,基本都包含到了,学习笔记。
jquery选择器功能无比强大,用好了可以起到事半功倍的效果,这个资源把选择器单独列出来,便于方便查找
jquery选择器入门详解小案例,内附框架脚本,直接运行即可,可以查看源码!
JQuery选择器详解JQuery选择器详解
jquery初学者必备,有各种jquery的选择器,个人学习时整理
jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。
通过思维导图对知识进行梳理,以便记忆
内置详细的Jquery全部选择器,程序员或初学者必备。
(24)选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面,该页面中内嵌有几个CSS类:.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台...