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" /> ]

(1)基本

#id
element
.class
*
selector1,selector2,selectorN

(2)层次选择器：

ancestor descendant
parent > child
prev + next
prev ~ siblings

(3)基本过滤器选择器

:first
:last
:not
:even
:odd
:eq
:gt
:lt
:header
:animated

(4)内容过滤器选择器

:contains
:empty
:has
:parent

(5)可见性过滤器选择器

:hidden
:visible

(6)属性过滤器选择器

[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]

(7)子元素过滤器选择器

:nth-child
:first-child
:last-child
:only-child

(8)表单选择器

:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden

(9)表单过滤器选择器

:enabled
:disabled
:checked
:selected