jQuery 选择器

选择器：

1.id选择器

概述：

根据给定的ID匹配一个元素。

使用任何的元字符作为名称的文本部分， 它必须被两个反斜杠转义

HTML 代码:

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

jQuery 代码:

$("#myDiv");

结果:

[ <div id="myDiv">id="myDiv"</div> ]  

2.标签选择器：

HTML 代码:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery 代码:

$("div");

结果:

[ <div>DIV1</div>, <div>DIV2</div> ]

3.class选择器

一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。

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

查询dom中所有的标签对象：$("*");

4.组合选择器

将每一个选择器匹配到的元素合并后一起返回。

你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

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

5. 后代选择器  $("选择器1   选择器2");

选择器1祖先元素   找出满足条件选择器2的后代（找后代）

在给定的祖先元素下匹配所有的后代元素；

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

6. 儿子选择器  $("选择器1>选择器2")

选择器1是父元素  选择器2是匹配的条件

在给定的父元素下匹配所有的子元素

选择器2 用以匹配元素的选择器，并且它是第一个选择器的子元素

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

7.邻居选择器  $(" 选择器1  + 选择器2")

匹配所有紧跟在选择器1 后面满足选择器2 条件的 （返回的可能是一个集合）

描述:

匹配所有跟在 label 后面的 input 元素

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

8. 兄弟选择器  $("选择器1~选择器2")

匹配所有在选择器1 同一层满足  条件 选择器2 的

找到所有与表单同辈的 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="none" /> ]

总结：

    以    ，     隔开的选择器 是选择器组成的数组 （找满足条件）
    以  空格   隔开的选择器 是找出 前面开头 后面的子孙（找后代）
    以    >      隔开的  只找第一个选择器的儿子（找儿子）
    以   +       找 第一个选择器紧跟后面的一个选择器（找邻居）（可能是多个 因为第一个选择器可能有多个）
    以   ~       找兄弟