Jquery selectors
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.