jQuery选择器（一）

1、#id根据给定的ID匹配一个元素。

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
$("#myDiv");

2、element根据给定的元素名匹配所有元素

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
$("div");

3、.class根据给定的类匹配元素。

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
$(".myClass");

4、*匹配所有元素

<div>DIV</div>
<span>SPAN</span>
<p>P</p>
$("*")

5、selector1,selector2,selectorN将每一个选择器匹配到的元素合并后一起返回。

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、ancestor descendant在给定的祖先元素下匹配所有的后代元素

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、parent > child在给定的父元素下匹配所有的子元素

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

8、prev + next匹配所有紧接在 prev 元素后的 next 元素

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

9、prev ~ siblings匹配 prev 元素之后的所有 siblings 元素

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

:first获取第一个元素$('li:first');

:last()获取最后个元素$('li:last')

:not(selector)去除所有与给定选择器匹配的元素$("input:not(:checked)")

:even匹配所有索引值为偶数的元素，从 0 开始计数$("tr:even")

:odd匹配所有索引值为奇数的元素，从 0 开始计数

:eq(index)匹配一个给定索引值的元素

:gt(index)匹配所有大于给定索引值的元素

:lt(index)匹配所有小于给定索引值的元素

:header匹配如 h1, h2, h3之类的标题元素

:animated匹配所有正在执行动画效果的元素

:focus匹配当前获取焦点的元素。

:contains(text)匹配包含给定文本的元素

:empty匹配所有不包含子元素或者文本的空元素

:has(selector)匹配含有选择器所匹配的元素的元素

:parent匹配含有子元素或者文本的元素

:hidden匹配所有不可见元素，或者type为hidden的元素

巴特西

jQuery选择器（一）

HTML 代码:

jQuery 代码:

结果:

HTML 代码:

jQuery 代码:

结果:

HTML 代码:

jQuery 代码:

结果:

HTML 代码:

jQuery 代码:

结果:

HTML 代码:

jQuery 代码:

结果:

最新文章

热门文章