1 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 2 3 4 5 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 6 7 $("div") 选择所有的div标签元素,返回div元素数组 8 9 $(".myClass") 选择使用myClass类的css的所有元素 10 11 $("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass") 12 13 14 15 层叠选择器: 16 17 $("form input") 选择所有的form元素中的input元素 18 19 $("#main > *") 选择id值为main的所有的子元素 20 21 $("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 22 23 $("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 24 25 26 27 基本过滤选择器: 28 29 $("tr:first") 选择所有tr元素的第一个 30 31 $("tr:last") 选择所有tr元素的最后一个 32 33 $("input:not(:checked) + span") 34 35 36 37 过滤掉:checked的选择器的所有的input元素 38 39 40 41 $("tr:even") 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始) 42 43 44 45 $("tr:odd") 选择所有的tr元素的第1,3,5... ...个元素 46 47 $("td:eq(2)") 选择所有的td元素中序号为2的那个td元素 48 49 $("td:gt(4)") 选择td元素中序号大于4的所有td元素 50 51 $("td:lt(4)") 选择td元素中序号小于4的所有的td元素 52 53 $(":header") 54 55 $("div:animated") 56 57 内容过滤选择器: 58 59 60 61 $("div:contains(‘John‘)") 选择所有div中含有John文本的元素 62 63 $("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组 64 65 $("div:has(p)") 选择所有含有p标签的div元素 66 67 $("td:parent") 选择所有的以td为父节点的元素数组 68 69 可视化过滤选择器: 70 71 72 73 $("div:hidden") 选择所有的被hidden的div元素 74 75 $("div:visible") 选择所有的可视化的div元素 76 77 属性过滤选择器: 78 79 80 81 $("div[id]") 选择所有含有id属性的div元素 82 83 $("input[name=‘newsletter‘]") 选择所有的name属性等于‘newsletter‘的input元素 84 85 86 87 $("input[name!=‘newsletter‘]") 选择所有的name属性不等于‘newsletter‘的input元素 88 89 90 91 $("input[name^=‘news‘]") 选择所有的name属性以‘news‘开头的input元素 92 93 $("input[name$=‘news‘]") 选择所有的name属性以‘news‘结尾的input元素 94 95 $("input[name*=‘man‘]") 选择所有的name属性包含‘news‘的input元素 96 97 98 99 $("input[id][name$=‘man‘]") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 100 101 102 103 子元素过滤选择器: 104 105 106 107 $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") 108 109 110 111 $("div span:first-child") 返回所有的div元素的第一个子节点的数组 112 113 $("div span:last-child") 返回所有的div元素的最后一个节点的数组 114 115 $("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组 116 117 118 119 表单元素选择器: 120 121 122 123 $(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button 124 125 126 127 $(":text") 选择所有的text input元素 128 129 $(":password") 选择所有的password input元素 130 131 $(":radio") 选择所有的radio input元素 132 133 $(":checkbox") 选择所有的checkbox input元素 134 135 $(":submit") 选择所有的submit input元素 136 137 $(":image") 选择所有的image input元素 138 139 $(":reset") 选择所有的reset input元素 140 141 $(":button") 选择所有的button input元素 142 143 $(":file") 选择所有的file input元素 144 145 $(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域 146 147 148 149 表单元素过滤选择器: 150 151 152 153 $(":enabled") 选择所有的可操作的表单元素 154 155 $(":disabled") 选择所有的不可操作的表单元素 156 157 $(":checked") 选择所有的被checked的表单元素 158 159 $("select option:selected") 选择所有的select 的子元素中被selected的元素 160 161 162 163 164 165 166 167 选取一个 name 为”S_03_22″的input text框的上一个td的text值 168 169 $(”input[@ name =S_03_22]“).parent().prev().text() 170 171 172 173 名字以”S_”开始,并且不是以”_R”结尾的 174 175 $(”input[@ name ^=‘S_‘]“).not(”[@ name $=‘_R‘]“) 176 177 178 179 一个名为 radio_01的radio所选的值 180 181 $(”input[@ name =radio_01][@checked]“).val(); 182 183 184 185 186 187 188 189 190 191 192 193 $("A B") 查找A元素下面的所有子节点,包括非直接子节点 194 195 $("A>B") 查找A元素下面的直接子节点 196 197 $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点 198 199 $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点 200 201 202 203 1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点 204 205 206 207 例子:找到表单中所有的 input 元素 208 209 210 211 HTML 代码: 212 213 214 215 <form> 216 217 <label>Name:</label> 218 219 <input name="name" /> 220 221 <fieldset> 222 223 <label>Newsletter:</label> 224 225 <input name="newsletter" /> 226 227 </fieldset> 228 229 </form> 230 231 <input name="none" /> 232 233 jQuery 代码: 234 235 236 237 $("form input") 238 239 结果: 240 241 242 243 [ <input name="name" />, <input name="newsletter" /> ] 244 245 246 247 2. $("A>B") 查找A元素下面的直接子节点 248 249 例子:匹配表单中所有的子级input元素。 250 251 252 253 HTML 代码: 254 255 256 257 <form> 258 259 <label>Name:</label> 260 261 <input name="name" /> 262 263 <fieldset> 264 265 <label>Newsletter:</label> 266 267 <input name="newsletter" /> 268 269 </fieldset> 270 271 </form> 272 273 <input name="none" /> 274 275 jQuery 代码: 276 277 278 279 $("form > input") 280 281 结果: 282 283 284 285 [ <input name="name" /> ] 286 287 288 289 3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点 290 291 例子:匹配所有跟在 label 后面的 input 元素 292 293 294 295 HTML 代码: 296 297 298 299 <form> 300 301 <label>Name:</label> 302 303 <input name="name" /> 304 305 <fieldset> 306 307 <label>Newsletter:</label> 308 309 <input name="newsletter" /> 310 311 </fieldset> 312 313 </form> 314 315 <input name="none" /> 316 317 jQuery 代码: 318 319 320 321 $("label + input") 322 323 结果: 324 325 326 327 [ <input name="name" />, <input name="newsletter" /> ] 328 329 330 331 332 333 4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点 334 335 例子:找到所有与表单同辈的 input 元素 336 337 338 339 HTML 代码: 340 341 342 343 <form> 344 345 <label>Name:</label> 346 347 <input name="name" /> 348 349 <fieldset> 350 351 <label>Newsletter:</label> 352 353 <input name="newsletter" /> 354 355 </fieldset> 356 357 </form> 358 359 <input name="none" /> 360 361 jQuery 代码: 362 363 364 365 $("form ~ input") 366 367 结果: 368 369 370 371 [ <input name="none" /> ]
时间: 2024-10-30 06:35:21