前端之 JQuery

一.基本选择器

1.#id

概述:

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

使用任何的元字符（如 !"#$%&‘()*+,./:;<=>[email protected][\]^`{|}~）作为名称的文本部分， 它必须被两个反斜杠转义：\\。 参见示例。

参数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.element

概述:

根据给定的元素标签名匹配所有元素

参数element:

一个用于搜索的元素。指向 DOM 节点的标签名。

需求：

查找一个 DIV 元素。

实例：

HTML 代码:

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

jQuery 代码:

$("div");

结果:

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

3.class

概述:

根据给定的css类名匹配元素。

参数class:

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

需求：

查找所有类是 "myClass" 的元素.

实例：

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.selector1,selector2,selectorN

概述:

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

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

参数:

制定多个select选择器

需求：

找到匹配任意一个类的元素

实例：

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

二.层级选择器

1.ancestor descendant

概述:

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

参数:

ancestor：任何有效选择器

descendant：用以匹配元素的选择器，并且它是第一个选择器的后代元素

需求：

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