jQuery常用选择器

jQuery常用选择器

1.id选择器
概述：根据给定的ID匹配一个元素。

用法：查找 ID 为"myDiv"的元素。HTML 代码:<div id="notMe"><p>id="notMe"</p></div><div id="myDiv">id="myDiv"</div>jQuery 代码:$("#myDiv");结果:[ <div id="myDiv">id="myDiv"</div> ]

2.元素选择器
概述：根据给定的元素名匹配所有元素

用法：查找一个 DIV 元素。HTML 代码:<div>DIV1</div><div>DIV2</div><span>SPAN</span>jQuery 代码:$("div");结果:[ <div>DIV1</div>, <div>DIV2</div> ]

3.类选择器
概述：根据给定的类匹配所有元素

用法：查找一个 DIV 元素。HTML 代码:<div class="notMe">div class="notMe"</div><div class="myClass">div class="myClass"</div><span class="myClass">span class="myClass"</span>jQuery 代码:$(".myClass");结果:[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

4.通配符选择器
概述：匹配所有元素

用法：找到每一个元素HTML 代码:<div>DIV</div><span>SPAN</span><p>P</p>jQuery 代码:$("*")结果:[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

5.群组选择器
概述：将每一个选择器匹配到的元素合并后一起返回。

用法：找到匹配任意一个类的元素。HTML 代码:<div>div</div><p class="myClass">p class="myClass"</p><span>span</span><p class="notMyClass">p class="notMyClass"</p>  jQuery 代码:$("div,span,p.myClass")结果:[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

6.后代选择器
概述：在给定的祖先元素下匹配所有的后代元素

用法：找到表单中所有的 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" /> ]

7.子选择器
概述：在给定的父元素下匹配所有的子元素

用法：匹配表单中所有的子级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" /> ]

9.兄弟选择器
概述：匹配所有紧接在 prev 元素后的 next 元素

用法：匹配所有跟在 label 后面的 input 元素HTML 代码:<form>  <label>Name:</label>  <input name="name" />  <fieldset>  <label>Newsletter:</label>  <input name="newsletter" /> </fieldset></form><input name="none" />$("label + input")结果:[ <input name="name" />, <input name="newsletter" /> ]