首页 > 代码库 > jQuery选择器总结(转)

jQuery选择器总结(转)

  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,24... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)  42  43   44  45 $("tr:odd")                选择所有的tr元素的第1,35... ...个元素  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" /> ] 

 

jQuery选择器总结(转)