JavaScriptjQuery

jQuery Selectors

In this section i will show you different types of jQuery Selectors.

Basic Selectors

SelectorExampleDescription
*$("*")Selects all elements.
#id$("#foo")Selects all elements with the id="foo".
.class$(".bar")Selects all elements with the class="bar".
element$("p")Selects all <p> elements.
selector1, selector2, selectorN$("h1, p.bar, span")Selects all <h1> and <span>, but only that <p> elements that has the class="bar".

Basic Filter Selectors

SelectorExampleDescription
:first$("p:first")Selects the first <p> element.
:last$("p:last")Selects the last <p> element.
:even$("tr:even")Selects all even <tr> elements, zero-indexed.
:odd$("tr:odd")Selects all odd <tr> elements, zero-indexed.
:eq()$("tr:eq(1)")Select the 2nd <tr> element within the matched set, zero-based index.
:not()$("p:not(:empty)")Select all <p> elements that are not empty.
:lt()$("ul li:lt(3)")Select all <li> elements at an index less than three within the matched set (i.e. selects 1st, 2nd, 3rd list elements), zero-based index.
:gt()$("ul li:gt(3)")Select all <li> elements at an index greater than three within the matched set (i.e. selects 4th, 5th, … list elements), zero-based index.
:header$(":header")Selects all elements that are headers, like <h1>, <h2>, <h3> and so on.
:lang()$(":lang(en)")Selects all elements that have a language value “en” i.e. lang="en", lang="en-us" etc.
:root$(":root")Selects the document’s root element which is always <html> element in a HTML document.
:animated$(":animated")Select all elements that are animating at the time the selector is run.

Child Filter Selectors

SelectorExampleDescription
:first-child$("p:first-child")Selects all <p> elements that are the first child of their parent.
:last-child$("p:last-child")Selects all <p> elements that are the last child of their parent.
:nth-child(n)$("p:nth-child(3)")Selects all <p> elements that are the 3rd child of their parent.
:only-child$("p:only-child")Selects all <p> elements that are the only child of their parent.
:first-of-type$("p:first-of-type")Selects all <p> elements that are the first <p> element of their parent.
:last-of-type$("p:last-of-type")Selects all <p> elements that are the last <p> element of their parent.
:only-of-type$("p:only-of-type")Selects all <p> elements that have no siblings with the same element name.
:nth-last-child(n)$("p:nth-last-child(3)")Selects all <p> elements that are the 3rd-child of their parent, counting from the last element to the first.
:nth-of-type(n)$("p:nth-of-type(2)")Selects all <p> elements that are the 2nd <p> element of their parent
:nth-last-of-type(n)$("p:nth-last-of-type(2)")Selects all <p> elements that are the 2nd-child of their parent, counting from the last element to the first.

Content Filter Selectors

SelectorExampleDescription
:contains()$('p:contains("Hello")')Selects all <p> elements that contains the text “Hello”.
:empty$("td:empty")Selects all <td> elements that are empty i.e that have no children including text.
:has()$("p:has(img)")Selects all <p> elements which contain at least one <img> element.
:parent$(":parent")Select all elements that have at least one child node either an element or text.

Form Selectors

SelectorExampleDescription
:input$(":input")Selects all input, textarea, select and button elements (basically selects all form controls).
:text$(":text")Selects all input elements with type="text".
:password$(":password")Selects all input elements with type="password".
:radio$(":radio")Selects all input elements with type="radio".
:checkbox$(":checkbox")Selects all input elements with type="checkbox".
:button$(":button")Selects all input and button elements with type="button".
:submit$(":submit")Selects all input and button elements with type="submit".
:reset$(":reset")Selects all input and button elements with type="reset".
:image$(":image")Selects all input elements with type="image".
:file$(":file")Selects all input elements with type="file".
:enabled$(":enabled")Selects all elements that are enabled.
:disabled$(":disabled")Selects all elements that are disabled.
:selected$(":selected")Selects all elements that are selected, only works for <option> elements.
:checked$(":checked")Selects all elements that are checked or selected, works for checkboxes, radio buttons, and select elements.
:focus$(":focus")Selects element if it is currently focused.

Attribute Selectors

SelectorExampleDescription
[attribute]$("[href]")Selects all elements with a href attribute, with any value.
[attribute="value"]$('a[target="_blank"]')Selects all <a> elements that have the target attribute with a value equal to "_blank".
[attribute="value"]$('a[target!="_blank"]')Selects all <a> elements that don’t have the target attribute, or if have don’t with a value "_blank".
[attribute$="value"]$('img[src$=".png"]')Selects all <img> elements that have the src attribute with a value ending with ".png".
[attribute|="value"]$('a[hreflang|="en"]')Selects all <a> elements that have the hreflang attribute with a value equal to "en", or starting with "en" followed by a hyphen, like "en-US".
[attribute^="value"]$('img[title^="Smiley"]')Selects all <img> elements that have the title attribute with a value beginning exactly with a “Smiley” string.
[attribute~="value"]$('img[title~="Kites"]')Selects all <img> elements that have the title attribute with a value containing the word “Kites”, delimited by spaces.
[attribute*="value"]$('input[name*="male"]')Selects all <input> elements that have the name attribute with a value containing the substring “male”.

Shaiv Roy

Hy Myself shaiv roy, I am a passionate blogger and love to share ideas among people, I am having good experience with laravel, vue js, react, flutter and doing website and app development work from last 7 years.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button