jQuery Selectors – jQuery Selectors Reference, jQuery Selectors Examples

Last Updated on: April 15, 2020   Posted By: Web Design Reference

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
Example: jQuery in a html Document
< !DOCTYPE HTML >
< 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

 
Pin0
 

Leave a Reply