jquery选择器选择父类_jQuery选择器介绍：类选择器，ID选择器等

jquery选择器选择父类

jQuery选择器 (jQuery Selectors)

jQuery uses CSS-style selectors to select parts, or elements, of an HTML page. It then lets you do something with the elements using jQuery methods, or functions.

jQuery使用CSS样式选择器选择HTML页面的部分或元素。 然后，您可以使用jQuery方法或函数对元素进行操作。

To use one of these selectors, type a dollar sign and parentheses after it: $(). This is shorthand for the jQuery() function. Inside the parentheses, add the element you want to select. You can use either single- or double-quotes. After this, add a dot after the parentheses and the method you want to use.

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

In jQuery, the class and ID selectors are like those in CSS. Let's have a quick review of that before we go on.

在jQuery中，类和ID选择器类似于CSS中的选择器。 在继续之前，让我们快速回顾一下。

CSS中的ID选择器 (ID Selector in CSS)

The CSS ID selector applies styles to a specific html element. The CSS ID selector must match the ID attribute of an HTML element. Unlike classes, which can be applied to multiple elements throughout a site, a specific ID may only be applied to one single element on a site. CSS ID will override CSS Class properties. To select an element with a specific id, write a hash (#) character, followed by the id of the element.

CSS ID选择器将样式应用于特定的html元素。 CSS ID选择器必须与HTML元素的ID属性匹配。 与类(可以应用于整个站点的多个元素)不同，特定ID只能应用于站点上的单个元素。 CSS ID将覆盖CSS Class属性。 要选择具有特定ID的元素，请写一个井号(＃)字符，后跟该元素的ID。

句法 (Syntax)

#specified_id { /* styles */ }

You can combine the ID selector with other types of selectors to style a very specific element.

您可以将ID选择器与其他类型的选择器结合使用，以对非常特定的元素进行样式设置。

section#about:hover { color: blue; }

div.classname#specified_id { color: green; }

关于ID的注意事项 (Note about IDs)

ID should be avoided when styling if possible. As it has high specificity and it can be overriden only if you inline styles, or add styles into <style>. The weight of ID override class selectors and type selectors.

如果可能的话，应避免使用ID。 因为它具有很高的特异性，并且仅当您内联样式或将样式添加到<style> ，才可以覆盖它。 ID的权重覆盖类选择器和类型选择器。

Remember, the ID selector must match an HTML element’s ID attribute.

请记住，ID选择器必须与HTML元素的ID属性匹配。

<div id="specified_id"><!-- content --></div>

特异性 (Specificity)

ID selectors have a high specificity making them difficult to override. Classes have a much lower specificity and are generally the preferred way to style elements in order to avoid specificity issues.

ID选择器具有高度的特异性，使其难以覆盖。 类具有低得多的特异性，并且通常是样式元素的首选方式，以避免特殊性问题。

Here’s an example of a jQuery method that selects all paragraph elements, and adds a class of “selected” to them:

这是一个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 (Ok, back to jQuery)

In jQuery, the class and ID selectors are the same as in CSS. If you want to select elements with a certain class, use a dot (.) and the class name. If you want to select elements with a certain ID, use the hash symbol (#) and the ID name. Note that HTML is not case-sensitive, therefore it is best practice to keep HTML markup and CSS selectors lowercase.

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

Selecting by class:

按班级选择：

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

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

Selecting by ID:

按ID选择：

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

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

You can also select certain elements along with their classes and IDs:

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

按班级选择 (Selecting by class)

If you want to select elements with a certain class, use a dot (.) and the class name.

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

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

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

You can also use the class selector in combination with a tag name to be more specific.

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

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

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

通过ID选择 (Selecting by ID)

If you want to select elements with a certain ID value, use the hash symbol (#) and the ID name.

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

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

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

As with the class selector, this can also be used in combination with a tag name.

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

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

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

充当过滤器的选择器 (Selectors that act as filters)

There are also selectors that act as filters - they will usually start with colons. For example, the :first selector selects the element that is the first child of its parent. Here’s an example of an unordered list with some list items. The jQuery selector below the list selects the first <li> element in the list—the “One” list item—and then uses the .css method to turn the text green.

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

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

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

Note: Don’t forget that applying css in JavaScript is not a good practice. You should always give your styles in css files.

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

Another filtering selector, :contains(text), selects elements that have a certain text. Place the text you want to match in the parentheses. Here’s an example with two paragraphs. The jQuery selector takes the word “Moto” and changes its color to yellow.

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

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

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

Similarly, the :last selector selects the element that is the last child of its parent. The JQuery selector below selects the last <li> element in the list—the “Three” list item—and then uses the .css method to turn the text yellow.

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

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

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

Note: In the jQuery selector, World is in single-quotes because it is already inside a pair of double-quotes. Always use single-quotes inside double-quotes to avoid unintentionally ending a string.

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

Multiple Selectors In jQuery, you can use multiple selectors to apply the same changes to more than one element, using a single line of code. You do this by separating the different ids with a comma. For example, if you want to set the background color of three elements with ids cat,dog,and rat respectively to red, simply do:

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

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

These are just a few of the selectors available for use in jQuery. See the More Information section for a link to the complete list on the jQuery website.

这些只是jQuery中可用的一些选择器。 请参阅“更多信息”部分，以获取指向jQuery网站上完整列表的链接。

更多信息： (More Information:)

• Full list of jQuery selectors

  jQuery选择器的完整列表

翻译自: https://www.freecodecamp.org/news/jquery-selectors/

jquery选择器选择父类