📅 最后修改于: 2020-11-25 02:33:17 🧑 作者: Mango
jQuery选择器用于选择和操作HTML元素。它们是jQuery库的重要组成部分。
使用jQuery选择器，您可以根据其ID，类，属性，类型以及来自DOM的更多内容来查找或选择HTML元素。
用简单的话来说，可以说选择器用于使用jQuery选择一个或多个HTML元素，一旦选择了元素，就可以对其执行各种操作。
所有jQuery选择器均以美元符号和括号开头，例如$()。它被称为工厂函数。
每个jQuery选择器都以$()开头。此标志称为工厂函数。它在选择给定文档中的元素时使用了三个基本构建块。
| S.No. | Selector | Description |
|---|---|---|
| 1) | Tag Name: | It represents a tag name available in the DOM. For example: $(‘p’) selects all paragraphs’p’in the document. |
| 2) | Tag ID: | It represents a tag available with a specific ID in the DOM. For example: $(‘#real-id’) selects a specific element in the document that has an ID of real-id. |
| 3) | Tag Class: | It represents a tag available with a specific class in the DOM. For example: $(‘real-class’) selects all elements in the document that have a class of real-class. |
让我们以一个简单的示例来看一下Tag选择器的用法。这将选择所有带有标签名称的元素
并且背景色设置为“粉红色”。
First jQuery Example
This is first paragraph.
This is second paragraph.
This is third paragraph.
输出：
This is first paragraph.
This is second paragraph.
This is third paragraph.
注意：1.上述所有选择器均可单独使用，也可与其他选择器组合使用。
注意：2.如果在任何JavaScript库中使用美元符号$都存在冲突，则可以使用jQuery()函数代替工厂函数$()。工厂函数$()和jQuery函数是相同的。
jQuery选择器可以单独使用，也可以与其他选择器结合使用。使用jQuery时，每个步骤都需要它们。它们用于从HTML文档中选择所需的确切元素。
| S.No. | Selector | Description |
|---|---|---|
| 1) | Name: | It selects all elements that match with the given element name. |
| 2) | #ID: | It selects a single element that matches with the given id. |
| 3) | .Class: | It selects all elements that matches with the given class. |
| 4) | Universal(*) | It selects all elements available in a DOM. |
| 5) | Multiple Elements A,B,C | It selects the combined results of all the specified selectors A,B and C. |
| Selector | Example | Description |
|---|---|---|
| * | $(“*”) | It is used to select all elements. |
| #id | $(“#firstname”) | It will select the element with id=”firstname” |
| .class | $(“.primary”) | It will select all elements with class=”primary” |
| class,.class | $(“.primary,.secondary”) | It will select all elements with the class “primary” or “secondary” |
| element | $(“p”) | It will select all p elements. |
| el1,el2,el3 | $(“h1,div,p”) | It will select all h1, div, and p elements. |
| :first | $(“p:first”) | This will select the first p element |
| :last | $(“p:last”) | This will select he last p element |
| :even | $(“tr:even”) | This will select all even tr elements |
| :odd | $(“tr:odd”) | This will select all odd tr elements |
| :first-child | $(“p:first-child”) | It will select all p elements that are the first child of their parent |
| :first-of-type | $(“p:first-of-type”) | It will select all p elements that are the first p element of their parent |
| :last-child | $(“p:last-child”) | It will select all p elements that are the last child of their parent |
| :last-of-type | $(“p:last-of-type”) | It will select all p elements that are the last p element of their parent |
| :nth-child(n) | $(“p:nth-child(2)”) | This will select all p elements that are the 2nd child of their parent |
| :nth-last-child(n) | $(“p:nth-last-child(2)”) | This will select all p elements that are the 2nd child of their parent, counting from the last child |
| :nth-of-type(n) | $(“p:nth-of-type(2)”) | It will select all p elements that are the 2nd p element of their parent |
| :nth-last-of-type(n) | $(“p:nth-last-of-type(2)”) | This will select all p elements that are the 2nd p element of their parent, counting from the last child |
| :only-child | $(“p:only-child”) | It will select all p elements that are the only child of their parent |
| :only-of-type | $(“p:only-of-type”) | It will select all p elements that are the only child, of its type, of their parent |
| parent > child | $(“div > p”) | It will select all p elements that are a direct child of a div element |
| parent descendant | $(“div p”) | It will select all p elements that are descendants of a div element |
| element + next | $(“div + p”) | It selects the p element that are next to each div elements |
| element ~ siblings | $(“div ~ p”) | It selects all p elements that are siblings of a div element |
| :eq(index) | $(“ul li:eq(3)”) | It will select the fourth element in a list (index starts at 0) |
| :gt(no) | $(“ul li:gt(3)”) | Select the list elements with an index greater than 3 |
| :lt(no) | $(“ul li:lt(3)”) | Select the list elements with an index less than 3 |
| :not(selector) | $(“input:not(:empty)”) | Select all input elements that are not empty |
| :header | $(“:header”) | Select all header elements h1, h2 … |
| :animated | $(“:animated”) | Select all animated elements |
| :focus | $(“:focus”) | Select the element that currently has focus |
| :contains(text) | $(“:contains(‘Hello’)”) | Select all elements which contains the text “Hello” |
| :has(selector) | $(“div:has(p)”) | Select all div elements that have a p element |
| :empty | $(“:empty”) | Select all elements that are empty |
| :parent | $(“:parent”) | Select all elements that are a parent of another element |
| :hidden | $(“p:hidden”) | Select all hidden p elements |
| :visible | $(“table:visible”) | Select all visible tables |
| :root | $(“:root”) | It will select the document’s root element |
| :lang(language) | $(“p:lang(de)”) | Select all p elements with a lang attribute value starting with “de” |
| [attribute] | $(“[href]”) | Select all elements with a href attribute |
| [attribute=value] | $(“[href=’default.htm’]”) | Select all elements with a href attribute value equal to “default.htm” |
| [attribute!=value] | $(“[href!=’default.htm’]”) | It will select all elements with a href attribute value not equal to “default.htm” |
| [attribute$=value] | $(“[href$=’.jpg’]”) | It will select all elements with a href attribute value ending with “.jpg” |
| [attribute|=value] | $(“[title|=’Tomorrow’]”) | Select all elements with a title attribute value equal to ‘Tomorrow’, or starting with ‘Tomorrow’ followed by a hyphen |
| [attribute^=value] | $(“[title^=’Tom’]”) | Select all elements with a title attribute value starting with “Tom” |
| [attribute~=value] | $(“[title~=’hello’]”) | Select all elements with a title attribute value containing the specific word “hello” |
| [attribute*=value] | $(“[title*=’hello’]”) | Select all elements with a title attribute value containing the word “hello” |
| :input | $(“:input”) | It will select all input elements |
| :text | $(“:text”) | It will select all input elements with type=”text” |
| :password | $(“:password”) | It will select all input elements with type=”password” |
| :radio | $(“:radio”) | It will select all input elements with type=”radio” |
| :checkbox | $(“:checkbox”) | Itwill select all input elements with type=”checkbox” |
| :submit | $(“:submit”) | It will select all input elements with type=”submit” |
| :reset | $(“:reset”) | It will select all input elements with type=”reset” |
| :button | $(“:button”) | It will select all input elements with type=”button” |
| :image | $(“:image”) | It will select all input elements with type=”image” |
| :file | $(“:file”) | It will select all input elements with type=”file” |
| :enabled | $(“:enabled”) | Select all enabled input elements |
| :disabled | $(“:disabled”) | It will select all disabled input elements |
| :selected | $(“:selected”) | It will select all selected input elements |
| :checked | $(“:checked”) | It will select all checked input elements |