Jquery selectors
admin
Aug 12, 2020
1759
2
Jquery selectors:
An important part of the Jquery Library is the Jquery Selector. To apply a JQuery method to an element, you must first select that element.
Jquery selectors at a glance:
| Selector | Example | Which selects |
|---|---|---|
| * | $("*") | Selects all the elements. |
| #id | $("#test") | id = "test" Selects all the associated elements. |
| .class | $(".samp") | Selects all elements with class = "samp". |
| .class, .class | $(".samp, .test") | The class selects all the elements with "samp" or "test". |
| element | $("div") | Selects all <div> elements. |
| el1,el2,el3 | $("h3,div,p") | Selects all <h3>, <div> and <p> elements. |
| :first | $("p:first") | Selects the first <p> element. |
| :last | $("p:last") | Selects the last <p> element. |
| :even | $("tr:even") | All pairs select the <tr> element. |
| :odd | $("tr:odd") | Selects all odd <tr> elements. |
| :first-child | $("p:first-child") | Selects all those <p> elements that are their parent's first child elements. |
| :first-of-type | $("p:first-of-type") | Selects all the <p> elements that are the first <p> elements of their parent. |
| :last-child | $("p:last-child") | Selects all the <p> elements that are the last child element of their parent. |
| :last-of-type | $("p:last-of-type") | Selects all the <p> elements that are the last <p> elements of their parent. |
| :nth-child(n) | $("p:nth-child(2)") | Selects all the <p> elements that are the second <p> element of their parent. |
| :nth-last-child(n) | $("p:nth-last-child(2)") | Selects all the <p> elements that are the second child element of their parent element from below. |
| :nth-of-type(n) | $("p:nth-of-type(2)") | Selects all the <p> elements that are the second <p> element of their parent element. |
| :nth-last-of-type(n) | $("p:nth-last-of-type(2)") | Selects all the <p> elements that are the second <p> element of the parent element from the bottom. |
| :only-child | $("p:only-child") | Selects all the <p> elements that are the only child in their pants. |
| :only-of-type | $("p:only-of-type") | Selects all the <p> elements that are their parent's only <p> elements. |
| parent > child | $("div > p") | Selects all those <p> elements that are directly child elements of the <div> element. |
| parent descendant | $("div p") | Selects all the <p> elements that are the successors of the <div> element. |
| element + next | $("div + p") | Selects all the <p> elements that are next to the <div> element. |
| element ~ siblings | $("div ~ p") | Selects all the <p> elements that are siblings of the <div> element. |
| :eq(index) | $("ul li:eq(2)") | Selects the third element of a list. In this case the index starts with 0 (zero). |
| :gt(index) | $("ul li:gt(2)") | Selects a list element with more than two index numbers. |
| :lt(index) | $("input:not(:empty)") | Selects input elements that are not empty. |
| :header | $(":header") | Selects all the heading elements; <h1>, <h2> ... |
| :animated | $(":animated") | Selects all the elements with animation. |
| :focus | $(":focus") | Selects all the elements that are in focus at the moment. |
| :contains(string) | $(":contains('onlylearn')") | Selects all the elements that are in the text "onlylearn". |
| :has(selector) | $("div:has(p)") | Selects all the elements that are in the text "onlylearn". |
| :has(selector) | $("div:has(p)") | Selects the <div> elements that contain the <p> element. |
| :empty | $(":empty") | Selects all blank elements. |
| :parent | $(":parent") | Elements that are parents of another element are selected. |
| :hidden | $("p:hidden") | Selects all invisible <p> elements. |
| :visible | $("div:visible") | Selects all visible div elements. |
| :root | $(":root") | Selects the main element of the document. |
| :lang(language) | $("p:lang(bn)") | lang: Selects the <p> element with the attribute "bn". |
| [attribute] | $("[href]") | Selects all the elements associated with the href attribute. |
| [attribute=value] | $("[href='index.php']") | The value of the href attribute selects all the elements containing "index.php". |
| [attribute!=value] | $("[href!='index.php']") | Selects elements whose href attribute value is not "index.php". |
| [attribute$=value] | $("[href$='.png']") | Selects the elements whose href attribute value ends with ".png". |
| [attribute|=value] | $("[title|='Academy']") | Selects the elements whose value of the title attribute is equal to 'Academy' or starts with 'Academy'. |
| [attribute^=value] | $("[title^='Aca']") | Selects the elements whose title begins with the value of the attribute "Aca". |
| [attribute~=value] | $("[title~='satt']") | Selects the value of the title attribute of the element that contains a certain word "satt". |
| [attribute*=value] | $("[title*='satt']") | Selects the elements that contain "satt" in the value of the title attribute. |
| :input | $(":input") | Selects all the input elements. |
| :text | $(":text") | Selects all input elements with type = "text". |
| :password | $(":password") | Select all input elements with type = "password". |
| :radio | $(":radio") | Selects all input elements with type = "radio". |
| :checkbox | $(":checkbox") | Select all input elements with type = "checkbox". |
| :submit | $(":submit") | Select all input elements with type = "submit". |
| :reset | $(":reset") | Select all input elements with type = "reset". |
| :button | $(":button") | Selects all input elements with type = "button". |
| :image | $(":image") | Selects all input elements with type = "image". |
| :file | $(":file") | Selects all input elements with type = "file". |
| :enabled | $(":enabled") | Selects all enabled input elements. |
| :disabled | $(":disabled") | Selects all disabled input elements. |
| :selected | $(":selected") | Selects all the selected input elements. |
| :checked | $(":checked") | Selects all checked input elements. |
shelleyakter
So nice post, Thank You.
shelleyakter
Thank You.