jQuery使用CSS样式选择器来选择HTML页面的部分或元素。然后，它允许您使用jQuery方法或函数对元素执行某些操作。

要使用其中一个选择器，请在其后键入美元符号和括号： $() 。这是jQuery()函数的简写。在括号内，添加要选择的元素。您可以使用单引号或双引号。在此之后，在括号和要使用的方法之后添加一个点。

在jQuery中，类和ID选择器与CSS中的类似。

这是一个选择所有段落元素的jQuery方法的示例，并为它们添加了一个“selected”类：

<p>This is a paragraph selected by a jQuery method.</p>
 <p>This is also a paragraph selected by a jQuery method.</p>

 $("p").addClass("selected");

在jQuery中，类和ID选择器与CSS中的相同。如果要选择具有特定类的元素，请使用点（ . ）和类名。如果要选择具有特定ID的元素，请使用井号（ # ）和ID名称。请注意，HTML不区分大小写，因此最好将HTML标记和CSS选择器保持为小写。

按班级选择：

<p class="p-with-class">Paragraph with a class.</p>

 $(".p-with-class").css("color", "blue"); // colors the text blue

按ID选择：

<li id="li-with-id">List item with an ID.</li>

 $("#li-with-id").replaceWith("<p>Socks</p>");

您还可以选择某些元素及其类和ID：

如果要选择具有特定类的元素，请使用点（。）和类名。

<p class="pWithClass">Paragraph with a class.</p>

$(".pWithClass").css("color", "blue"); // colors the text blue

您还可以将类选择器与标记名称结合使用，以使其更具体。

<ul class="wishList">My Wish List</ul>`<br>

$("ul.wishList").append("<li>New blender</li>");

如果要选择具有特定ID值的元素，请使用井号（＃）和ID名称。

<li id="liWithID">List item with an ID.</li>

$("#liWithID").replaceWith("<p>Socks</p>");

与类选择器一样，它也可以与标签名称结合使用。

<h1 id="headline">News Headline</h1>

$("h1#headline").css("font-size", "2em");

还有一些选择器充当过滤器 - 它们通常以冒号开头。例如， :first选择器选择其父元素的第一个子元素。这是一个包含一些列表项的无序列表的示例。列表下方的jQuery选择器选择列表中的第一个<li>元素 - “One”列表项 - 然后使用.css方法将文本变为绿色。

<ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
   </ul>

$("li:first").css("color", "green");

注意： 不要忘记在JavaScript中应用css不是一个好习惯。您应该始终在css文件中提供样式。

另一个过滤选择器:contains(text) ，选择具有特定文本的元素。将要匹配的文本放在括号中。这是一个有两段的例子。 jQuery选择器使用单词“Moto”并将其颜色更改为黄色。

<p>Hello</p>
    <p>World</p>

$("p:contains('World')").css("color", "yellow");

类似地， :last选择器选择其父级的最后一个子元素。下面的JQuery选择器选择列表中的最后一个<li>元素 - “三”列表项 - 然后使用.css方法将文本变为黄色。

$("li:last").css("color", "yellow");

注意：在jQuery选择器中， World是单引号，因为它已经在一对双引号内。始终在双引号内使用单引号以避免无意中结束字符串。

多个选择器 在jQuery中，您可以使用多个选择器，使用一行代码将相同的更改应用于多个元素。您可以通过用逗号分隔不同的ID来完成此操作。例如，如果要将ids cat，dog和rat的三个元素的背景颜色分别设置为红色，只需执行以下操作：

$("#cat,#dog,#rat").css("background-color","red");

这些只是可用于jQuery的一些选择器。有关jQuery网站上完整列表的链接，请参阅“更多信息”部分。

更多jQuery教程