jQuery选择器（一）

时间：2021-12-07 19:51:43

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的元素
 

相关文章