jQuery Selectors Tutorial: Learn jQuery Selectors basic concept, Different Type of jQuery Selectors, jQuery Selectors Reference Guide, jQuery Selectors Examples. In this page to learn the jQuery Selectors definition, the Purpose of using jQuery Selectors, and how to use jQuery Selectors on a web page with examples. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.
What are jQuery Selectors and its uses?
jQuery Selectors: It allows you to select or find an element and manipulate an HTML document. jQuery Selectors find an HTML element by its name, id, class, type, and attributes, etc.
Example: Use of Class Selector in an HTML Document< html >
< head >
< title >
How to include jQuery in a Document
< /title >
< script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js” > < /script >
< script >
$(document).ready(function(){ $(".div-box").click(function(){ $(this).hide(); }); });< /script >
< /head >
< body >
< div class=”div-box” > Click to hide me. < /div >
< /body >
< /html >
Explain Different Types of jQuery Selectors and their uses?
Types of jQuery Selectors: There are many types of jQuery Selectors but mainly three types are very important that being Element Selector, ID Selector, Class Selector is using to select or find an element on a web document.
Different Types of jQuery Selectors with Exaples:Selector Type | Example | Select/Find |
---|---|---|
* | $(“*”) | Select all elements |
id | $(“#lastname”) | Select the element with id=”lastname” |
.class | $(“.intro”) | Select all elements with class=”intro” |
.class,.class | $(“.intro,.demo”) | Select all elements with the class “intro” or “demo” |
element | $(“p”) | Select all <p> elements |
element1,element2,element3 | $(“h1,div,span”) | Select all <h1>, <div> and <span> elements |
:first | $(“p:first”) | Select the first <p> element |
:last | $(“p:last”) | Select the last <p> element |
:even | $(“tr:even”) | Select all even <tr> elements |
:odd | $(“tr:odd”) | Select all odd <tr> elements |
:first-child | $(“p:first-child”) | Select all <p> elements that are the first child of their parent |
:first-of-type | $(“p:first-of-type”) | Select all <p> elements that are the first <p> element of their parent |
:last-child | $(“p:last-child”) | Select all <p> elements that are the last child of their parent |
:last-of-type | $(“p:last-of-type”) | Select all <p> elements that are the last <p> element of their parent |
:nth-child(n) | $(“p:nth-child(2)”) | Select all <p> elements that are the 2nd child of their parent |
:nth-last-child(n) | $(“p:nth-last-child(2)”) | 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)”) | Select all <p> elements that are the 2nd <p> element of their parent |
:nth-last-of-type(n) | $(“p:nth-last-of-type(2)”) | Select all <p> elements that are the 2nd <p> element of their parent, counting from the last child |
:only-child | $(“p:only-child”) | Select all <p> elements that are the only child of their parent |
:only-of-type | $(“p:only-of-type”) | Select all <p> elements that are the only child, of its type, of their parent |
parent > child | $(“div > span”) | Select all <span> elements that are a direct child of a <div> element |
parent descendant | $(“div p”) | Select all <p> elements that are descendants of a <div> element |
element + next | $(“div + p”) | Select the <p> element that are next to each <div> elements |
element ~ siblings | $(“div ~ p”) | Select all <p> elements that are siblings of a <div> element |
:eq(index) | $(“ul li:eq(2)”) | Select the third element in a list (index starts at 0) |
:gt(number) | $(“ul li:gt(3)”) | Select List elements with an index greater than 3 |
:lt(number) | $(“ul li:lt(3)”) | Select the List elements with an index less than 3 |
:not(selector) | $(“input:not(:empty)”) | Select all input elements that are not empty |
:header | $(“:header”) | Select all header elements <h1>, <h2> … |
:animated | $(“:animated”) | Select all animated elements |
:focus | $(“:focus”) | Select The element that currently has focus |
:contains(text) | $(“:contains(‘hello’)”) | Select all elements which contains the text “hello” |
:has(selector) | $(“div:has(p)”) | Select all <div> elements that have a <p> element |
:empty | $(“:empty”) | Select all elements that are empty |
:parent | $(“:parent”) | Select all elements that are a parent of another element |
:hidden | $(“p:hidden”) | Select all hidden <p> elements |
:visible | $(“table:visible”) | Select all visible tables |
:root | $(“:root”) | Select The document’s root element |
:lang(language) | $(“p:lang(hi)”) | Select all <p> elements with a lang attribute value start with “hi” (hi – Hindi) |
[attribute] | $(“[href]”) | Select all elements with a href attribute |
[attribute=value] | $(“[href=’page.html’]”) | Select all elements with a href attribute value equal to “page.html” |
[attribute!=value] | $(“[href!=’page.html’]”) | Select all elements with a href attribute value not equal to “page.html” |
[attribute$=value] | $(“[href$=’.jpg’]”) | Select all elements with a href attribute value ending with “.jpg” |
[attribute|=value] | $(“[title|=’hello’]”) | Select all elements with a title attribute value equal to ‘Hello’, or start with ‘Hello’ followed by a hyphen |
[attribute^=value] | $(“[title^=’raj’]”) | Select all elements with a title attribute value starting with “Raj” |
[attribute~=value] | $(“[title~=’hello’]”) | Select all elements with a title attribute value containing the specific word “hello” |
[attribute*=value] | $(“[title*=’hello’]”) | Select all elements with a title attribute value containing the word “hello” |
:input | $(“:input”) | Select all input elements |
:text | $(“:text”) | Select all input elements with type=”text” |
:password | $(“:password”) | Select all input elements with type=”password” |
:radio | $(“:radio”) | Select 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”) | Select all input elements with type=”button” |
:image | $(“:image”) | Select all input elements with type=”image” |
:file | $(“:file”) | Select all input elements with type=”file” |
:enabled | $(“:enabled”) | Select all enabled input elements |
:disabled | $(“:disabled”) | Select all disabled input elements |
:selected | $(“:selected”) | Select all selected input elements |
:checked | $(“:checked”) | Select all checked input elements |
Web Design Reference Guide Android App for Website Developers
Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.
Also Related to this Page
- jQuery Effects Tutorial, jQuery Effects Reference, jQuery Effect Examples
- jQuery Events Tutorial, jQuery Events Reference, jQuery Events Examples
- jQuery Examples, jQuery Tutorial Examples, jQuery Reference Examples
- jQuery Tutorial, jQuery Reference, jQuery Examples