jQuery Selectors Complete Reference
jQuery selectors are used to select the HTML element(s) and allow you to manipulate the HTML element(s) in the way we want. It selects the HTML elements on a variable parameter such as their name, classes, id, types, attributes, attribute values, etc.
Syntax:
$("")Example: In this example, we will select a class by using jQuery .class Selector.
HTML
<!DOCTYPE html><html> <head> <script src= </script> <script> $(document).ready(function () { $(".GEEKS").css("background-color", "green"); }); </script></head> <body> <p class="GEEKS">GeeksforGeeks</p> <span class="GEEKS"> jQuery|.class selector </span></body> </html> |
Output:
All the jQuery selectors are listed below:
jQuery Selectors | Description |
|---|---|
| * | Selects all the elements in the document, including HTML, body, and head. |
| #id | Specifies an id for an element to be selected. |
| .class | Specifies the class for an element to be selected. |
| .class, .class | select multiple classes of an HTML document. |
| element | Select and modify HTML elements based on the element name. |
| element1, element2 | Select multiple elements of an HTML document. |
| :first | Select the first element of the specified type. |
| :last | Select the last element of the specified type. |
| :even | Select an even number index from the elements. |
| :odd | Select an odd number index from the elements. |
| ;first-child | Select every element that is the first child of its parent element. |
| :first-of-type | Select all elements that are the first child, of a particular type, of their parent. |
| :last-child | It is a jQuery Selector used to select every element that is the last child of its parent. |
| :last-of-type | Select all elements which are the last child of their parent. |
| :nth-child() | Selects all elements that are the nth-child of their parent elements. |
| :nth-last-child() | Select all elements that are the nth last child of their parent. |
| :nth-of-type() | Select all the nth-child elements of the specified parent. |
| :nth-last-of-type() | Select all children of a parent with the same element name, counting from the last to the first. |
| :only-child | Select every element that is the only child of its parent i.e only a single child is selected. |
| :only-of-type | Select all the elements that are the only child of their parent. |
| parent > child | Select all elements that are the direct child of their parent element. |
| parent descendant | Selects every element which is descendant to a specific(parent) element. |
| element + next | Select the just “next” element of the specified “element”. |
| element ~ siblings | Select all elements that are siblings of the specified element. |
| eq() | It is used to locate the selected elements directly and returns an element with a specific index. |
| :gt() | Select all elements with an index greater than the index mentioned in the matched set. |
| :lt() | Selects elements using an index number that works on less than a specified number. |
| :not() | Select all the elements which are not selected. |
| :header | Select all the heading elements that are from (<h1> to <h6>). |
| animated | Select the element that is currently animated. |
| :focus | select all the elements that have focused on the document currently. |
| :contains() | It is used to select elements containing the specified string. |
| :has() | Select all elements that have one or more elements inside of them, that match the specified selector. |
| :empty | It is used to select empty elements. |
| :parent | Select all elements that are the parent of another element, including text nodes. |
| :hidden | selects hidden elements to work upon. |
| :visible | Select all the elements that are currently visible in the document. |
| :root | Select the root element of the HTML document. |
| :lang() | Select all the elements which have the lang attribute with the specified value. |
| [attribute] | Select all the elements with the specified attribute. |
| [attribute!=value] | Select each element that doesn’t have the specified attribute and value. |
| [attribute$=value] | Select each element with a specific attribute, with a specific ending string. |
| [attribute|=value] | Select each element with a specific attribute, with a specific string value (like “geeks”). |
| [attribute^=value] | Select all elements with the given attribute specified by the attribute parameter. |
| [attribute~=value] | Select all elements with a name attribute that contains the specific string. |
| [attribute*=value] | Select all elements with attributes specified by the attribute parameter. |
| :input | It is used to select input elements. This selector is also used with a button element. |
| :text | Select an input element with a text field i.e (type==text). |
| :password | Select the input element having a password field. i.e (type==password) |
| :radio | Select all elements of type radio. |
| :checkbox | Selects input elements with type=checkbox. |
| :submit | Select the submit button and input the element having the submitted type field. |
| :reset | Select the input element having a reset field button.i.e <input type=”button”>. |
| :button | Selects button elements and input elements with type=”button”. |
| :image | Select the input elements with a type equal to the image |
| :file | Selects the input element having a file field.(type==file) |
| :enabled | Select all enabled form elements. |
| :disabled | Selecting all disabled form elements. |
| :selected | Select option elements that are pre-selected. |
| :checked | Checked checkboxes, radio buttons, and options of select elements. |
Please Login to comment...