在本教程中，我们将学习使用jQuery中的选择器选择元素。

jQuery使用CSS之类的选择器来选择元素。

按id和类选择

如果您熟悉CSS语法，那么您就会知道要使用ID选择HTML元素，我们会使用#号哈希符号，然后加上id值。
为了按类别选择HTML元素，我们使用点号(。
)和其后的类值。

单击此处查看CSS教程。

在下面的示例中，我们有两个具有Id和Class属性HTML元素。

<p id="username"></p>
<p class="description">This is a sample description.</p>

因此，在CSS中以具有id =" username"的段落为目标，我们将编写以下内容。

#username {
	/* some css style rule */
}

为了定位CSS中具有" class =" description"的段落，我们将编写以下内容。

.description {
	/* some css style rule */
}

在jQuery中按ID和类选择

要通过ID选择HTML元素，我们编写以下代码。

$("#username");

如果我们使用" console.log($("#username"));"，那么我们将获得以下类似于结构的数组。

[p#username, context: document, selector: "#username"]

为了按类选择HTML元素，我们编写以下代码。

$(".description");

如果我们使用`console.log($(".description"));输出，我们将得到以下内容。

[p.description, prevObject: n.fn.init(1), context: document, selector: ".description"]

两个选择器都将返回类似数组的结构，其中包含选择器，长度等元素。

通过标签选择元素

要使用标签名称选择HTML元素，我们使用标签。
例如，如果我们在HTML中有一个段落，而我们想将其作为目标，那么在CSS中，我们将使用以下内容。

HTML

<p>Hello World</p>

CSS

p {
	/* some style rule goes here */
}

同样，如果我们要选择主体，则将使用body标签。

CSS

body {
	/* some style rule goes here */
}

在jQuery中按标签选择元素

为了选择该段，我们将编写以下内容。

$("p");

这还将返回一个类似于结构的数组，其中包含选择器，长度，某些方法等。

如果我们用" console.log($(" p"));"，我们将得到以下输出。

[p#username, p.description, prevObject: n.fn.init(1), context: document, selector: "p"]

为了选择主体，我们将编写以下内容。

$("body");

和console.log($(" body"));将产生以下输出。

[body, prevObject: n.fn.init(1), context: document, selector: "body"]

所选元素总数

要知道所选元素的总数，我们可以使用"长度"。

可以说，我们想知道由$(" p")选择的段落p的总数。
因此，我们将编写以下代码。

$("p").length;

可以说，页面中有三个段落，如果我们执行" console.log($(" p"));"，我们将得到3作为输出。

通过标签和ID选择元素

如果要通过标签和Id来选择元素，我们会将标签和Id值组合在一起。

假设我们要选择一个ID为" happy"的段落，然后在CSS中选择该段落，我们将编写以下内容。

p#happy {
	/* some style rule here... */
}

为了使用jQuery选择相同的元素，我们将编写以下代码。

$("p#happy");

通过标签和类别选择元素

同样，我们将tag和Class值组合在一起，以通过tag和Class选择一个元素。

可以说，我们要选择一个具有" awesome"类的段落，然后在CSS中选择它，我们将编写以下内容。

p.awesome {
	/* some style rule here... */
}

为了使用jQuery选择相同的元素，我们将编写以下代码。

$("p.awesome");

通过ID选择比Class更快

与按类选择元素相比，按ID选择元素的速度更快。
这是因为当我们按ID值选择元素时，jQuery知道页面中将只有一个具有给定ID值的元素。

假定在任何给定页面中仅将id值使用一次。
尽管页面可以多次使用相同的id值。
但这是一个坏习惯。

而按类值选择时，jQuery必须扫描整个页面(即DOM)并查找具有给定类值的元素。

选择直接后代(子代)

可以说，我们有一个无序列表。

<ul class="fruits-1">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Fruits-2 list:
  <ul class="fruits-2">
    <li>Banana</li>
    <li> Pomegranate</li>
  </ul>
</li>
</ul>

因此，具有" fruits-1"类的" ul"元素是父元素，而4个" li"元素是其直接后代(子元素)。

请注意，第4个li元素的ul元素的类为" fruits-2"，并且具有2个li元素(香蕉和石榴)。
因此，这两个li元素不是具有" fruits-1"类的ul元素的直接后代。
但是他们是后代(孙子)

因此，要选择具有" fruits-1"类的ul元素的直接后代，请在CSS中编写以下内容。

ul.fruits-1 > li {
	/* some style rule... */
}

并且，要使用jQuery选择直接后代，我们将编写以下内容。

$("ul.fruits-1 > li");

并且，如果我们console.log的长度，我们将得到4，因为ul元素只有4个直接后代具有" fruits-1"类。

console.log( $("ul.fruits-1 > li").length );	//this will print 4

为了定位直接后代，我们使用>符号。

选择后代(子孙)

如果我们考虑以下无序列表。

<ul class="fruits-1">
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
<li>Fruits-2 list:
  <ul class="fruits-2">
    <li>Banana</li>
    <li> Pomegranate</li>
  </ul>
</li>
</ul>

然后，" li"元素(香蕉，石榴)是具有"水果-2"类的" ul"元素的直接后代(子代)。
并且这两个li元素也是具有" fruits-1"类的" ul"元素的后代(孙代)。

因此，要针对具有" fruits-1"类的ul元素的所有后代(子代和孙子代)，我们将在CSS中编写以下内容。

ul.fruits-1 li {
	/* some style rule... */
}

为了针对jQuery中的后代，我们将编写以下内容。

$("ul.first-1 li");

如果我们console.log的长度，我们将得到6，因为有6个li元素作为ul元素的后代具有" fruits-1"类。

console.log( $("ul.first-1 li").length );	//this will print 6