Home >>jQuery Tutorial >jQuery Selectors
jQuery Selectors
jQuery Selectors
A jQuery Selector is a function is used to manipulates HTML elements and to select HTML elements based on their classes, id, attributes, types and etc. jQuery Selectors is the very important part of jQuery library. You can select one or more HTML elements using jQuery and once the element is selected.
The $() factory function
By using the sign $() the jQuery selector starts. This $() is known as the factory function.
| S.No. | Selector | Description |
|---|---|---|
| 1. | Tag Name: | It represents a tag name. For example: $('p') selects all paragraphs’ in the document. |
| 2. | Tag ID: | A tag available with a specific ID in the DOM is represented by this selector. For example: $('#demo’) selects a specific element in the document. |
| 3. | Tag Class: | A tag available with a specific class in the DOM. For example: $(‘.demo') selects all elements in the document. |
You can use the jQuery selectors single or with the combination of other selectors that you want from your HTML document.
| S.No. | Selector | Description |
|---|---|---|
| 1. | Name: | It is used to selects all elements which match with the given element name. |
| 2. | #ID: | It is used to selects a single element which matches with the given id. |
| 3. | .Class: | It is used to selects all elements which matches with the given class. |
| 4. | Universal(*) | It is used to selects all elements available in a DOM. |
| 5. | Multiple Elements A,B,C | It is used to selects the combined results of all the specified selectors X,Y and Z. |
| Selector | Example | Description |
|---|---|---|
| * | $("*") | It is used to select all elements. |
| #id | $("#firstname") | It is used to select the element with id="firstname" |
| .class | $(".primary") | It is used to select all elements with class="primary" |
| class,.class | $(".primary,.secondary") | It is used to select all elements with the class "primary" or "secondary" |
| element | $("p") | It is used to select all p elements. |
| el1,el2,el3 | $("h1,div,p") | This selector is used to select all h1, div, and p elements. |
| :first | $("p:first") | This selector help to select the first p element |
| :last | $("p:last") | Tt is used to select he last p element |
| :even | $("tr:even") | This is used to select all even tr elements |
| :odd | $("tr:odd") | to select all odd tr elements by this selector |
| :first-child | $("p:first-child") | By using this selector will select all p elements that are the first child of their parent |
| :first-of-type | $("p:first-of-type") | It is used to select all p elements that are the first p element of their parent |
| :last-child | $("p:last-child") | It is used to select all p elements that are the last child of their parent |
| :last-of-type | $("p:last-of-type") | It helps to select all p elements that are the last p element of their parent |
| :nth-child(n) | $("p:nth-child(2)") | This selector is used to select all p elements that are the 2nd child of their parent |
| :nth-last-child(n) | $("p:nth-last-child(2)") | This selector is used to 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 is used to 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 selector is used to select all p elements that are the 2nd p element of their parent, counting from the last child |
| :only-child | $("p:only-child") | It is used to select all p elements that are the only child of their parent |
| :only-of-type | $("p:only-of-type") | It is used to select all p elements that are the only child, of its type, of their parent |
| parent > child | $("div > p") | It is used to select all p elements that are a direct child of a div element |
| parent descendant | $("div p") | It is used to select all p elements that are descendants of a div element |
| element + next | $("div + p") | This selector selects the p element that are next to each div elements |
| element ~ siblings | $("div ~ p") | It is used to select all p elements that are siblings of a div element |
| :eq(index) | $("ul li:eq(3)") | It is used to select the fourth element in a list (index starts at 0) |
| :gt(no) | $("ul li:gt(3)") | It is used to select the list elements with an index greater than 3 |
| :lt(no) | $("ul li:lt(3)") | It will Select the list elements with an index less than 3 |
| :not(selector) | $("input:not(:empty)") | It is used to Select all input elements that are not empty |
| :header | $(":header") | It helps to Select all header elements h1, h2 ... |
| :animated | $(":animated") | It helps to Select all animated elements |
| :focus | $(":focus") | It is used to Select the element that currently has focus |
| :contains(text) | $(":contains('Hello')") | It is used to Select all elements which contains the text "Hello" |
| :has(selector) | $("div:has(p)") | It is used to select all div elements that have a p element |
| :empty | $(":empty") | It is used to select all elements that are empty |
| :parent | $(":parent") | It is used to select all elements that are a parent of another element |
| :hidden | $("p:hidden") | It helps to Select all hidden p elements |
| :visible | $("table:visible") | This selector Select all visible tables |
| :root | $(":root") | It is used to select the document's root element |
| :lang(language) | $("p:lang(de)") | This selector Select all p elements with a lang attribute value starting with "de" |
| [attribute] | $("[href]") | It is used to Select all elements with a href attribute |
| [attribute=value] | $("[href='default.htm']") | This selector is used to Select all elements with a href attribute value equal to "default.htm" |
| [attribute!=value] | $("[href!='default.htm']") | It is used to select all elements with a href attribute value not equal to "default.htm" |
| [attribute$=value] | $("[href$='.jpg']") | It is used to select all elements with a href attribute value ending with ".jpg" |
| [attribute|=value] | $("[title|='Tomorrow']") | This selector will help to Select all elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen |
| [attribute^=value] | $("[title^='Tom']") | It will Select all elements with a title attribute value starting with "Tom" |
| [attribute~=value] | $("[title~='hello']") | It is used to Select all elements with a title attribute value containing the specific word "hello" |
| [attribute*=value] | $("[title*='hello']") | It is used to select all elements with a title attribute value containing the word "hello" |
| :input | $(":input") | It is used to select all input elements |
| :text | $(":text") | It is used to select all input elements with type="text" |
| :password | $(":password") | It is used to select all input elements with type="password" |
| :radio | $(":radio") | It is used to select all input elements with type="radio" |
| :checkbox | $(":checkbox") | It is used to select all input elements with type="checkbox" |
| :submit | $(":submit") | It is used to select all input elements with type="submit" |
| :reset | $(":reset") | It is used to select all input elements with type="reset" |
| :button | $(":button") | It is used to select all input elements with type="button" |
| :image | $(":image") | It is used to select all input elements with type="image" |
| :file | $(":file") | It is used to select all input elements with type="file" |
| :enabled | $(":enabled") | It is used to Select all enabled input elements |
| :disabled | $(":disabled") | It is used to select all disabled input elements |
| :selected | $(":selected") | It is used to select all selected input elements |
| :checked | $(":checked") | It is used to select all checked input elements |
jQuery Tutorial
jQuery History
jQuery Example
jQuery Selectors
jQuery – Effects
jQuery animate() Method
jQuery delay() Method
jQuery dequeue() Method
jQuery fadeIn() Method
jQuery fadeOut() Method
jQuery fadeTo() method
jQuery clearQueue() Method
jQuery fadeToggle() Method
jQuery finish() Method
jQuery hide() Method
jQuery show() Method
jQuery slideDown() Method
jQuery slideToggle() Method
jQuery slideUp() Method
jQuery stop() Method
jQuery toggle() Method
jQuery queue() Method
jQuery HTML / CSS Methods
jQuery Events
jQuery Selector Lists
jQuery Traversing Methods
jQuery AJAX Methods
No Sidebar ads