Open In App

Explain advance selector used in Jquery?

Improve
Improve
Like Article
Like
Save
Share
Report

Selectors in jQuery are used to select HTML elements based on their name, id, classes, types, attributes, attribute values, and much more. 

Syntax:

$( "selector" ).action ()
  • Here the $ sign is used to access jQuery.
  • the .action() method is used to perform a certain action on the selected element.
  • the selector is the query used to find or access the HTML element.

Let’s see a few examples of Types of JQuery Selectors, examples as:

1. Class selectors: Select elements with specific class names:

Syntax:

$( ".<classname>").action()

Suppose we have the following div element with the class name “GeeksforGeeks”:

<div class="GeeksforGeeks">
   GeeksforGeeks
</div>

The below line of code demonstrates how the JQuery selector will select the div element which has classname = “GeeksforGeeks”:

$(".GeeksforGeeks"));

Similarly, we have #ID selectors, the element selector, and some advanced selectors. These selectors help us in order to select or find the element in the HTML document according to the requirements.

2. ID selector: Select elements with a specific ID.

Syntax:

$( " #<ID>").action ()

Select an element whose id is GeeksforGeeks in the HTML document:

<div id="GeeksforGeeks">
   GeeksforGeeks
</div>

JQuery selector will select the div element which has id = “GeeksforGeeks”:

$("#GeeksforGeeks");

3. Element Selector: Select elements by the tag name.

Syntax:

$( "<Element>").action ()

Select all <p> elements in the HTML document.

<p>
   GeeksforGeeks
</p>

JQuery selector will select the tag in HTML:

$("p");

Jquery Advanced Selectors:

JQuery introduced some advanced selectors by which we can easily select elements without knowing their ID and classes.

Example 1: $ ( ” #first_div ~  ul ” ) Selector: 

We have an <div> element whose id is “first_div” and after this <div> element we have two <ul> elements and we want to select these <ul> elements using this selector:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>GeeksforGeeks</title>
 
    <!-- JQuery CDN Link -->
    <script src=
        integrity=
"sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA="
        crossorigin="anonymous">
      </script>
</head>
 
<body>
 
    <div id="first_div"
         style="color: green;font-size:50px;">
              GeeksforGeeks
      </div>
 
    <ul>
        <li>Web Development</li>
        <li>HTML</li>
        <li>CSS</li>
    </ul>
 
    <ul>
        <li>Interview Preparation</li>
        <li>Courses</li>
        <li>Write & Earn</li>
    </ul>
    <script>
        $("#first_div ~ ul").css("background-color", "green");
    </script>
</body>
 
</html>


Output:

 

Example 2:  $ ( ” ul li :even ” ) and $ ( ” ul li :odd ” ) Selectors:

Selecting all <ul>’s <li> elements based on the index and applying the CSS. For Even index <li> change the background color to green and for odd make it red.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>GeeksforGeeks</title>
 
    <!-- JQuery CDN Link -->
    <script src=
        integrity=
"sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA="
        crossorigin="anonymous">
      </script>
</head>
 
<body>
    <div id="first_div"
         style="color: green;font-size:50px;">
              GeeksforGeeks
      </div>
    <ul>
        <li>Web Development</li>
        <li>HTML</li>
        <li>CSS</li>
    </ul>
 
    <ul>
        <li>Interview Preparation</li>
        <li>Courses</li>
        <li>Write & Earn</li>
    </ul>
 
    <script>
        $("ul li:even").css("background-color", "green");
        $("ul li:odd").css("background-color", "red");
    </script>
</body>
 
</html>


Output:

 

List of all Advance jQuery selectors:  The following table depicts the various types of Advance selectors:

Sr No.

Selectors

Example

Description

1

:root $(“:root”) Selects the document’s root element which is always <html> element in an HTML document.

2

:last $(“div:last”) Selects the last <div> element.

3

:first $(“ul li:first”) If you want to select the first <li> element of the first unordered list <ul>, you can use this selector. It will only select the very first <ul>’s first <li> element.

4

:first-child $(“ul li:first-child”) select the first <li> element of every unordered list <ul>, you can use this selector. It will only select every<ul>’s very first <li> element.

5

 :eq() $(“ul li:eq(2)”) select the <li> element of the very first <ul> based on the indexing you may use it. suppose your first <ul> element contains three <li>’s and you want to select the third <li> then specify ‘2’ in this  $(“ul li:eq(2)”) selector because indexing starting from 0 only. To select the first <li> element use $(“ul li:eq(0)”).

6

:nth-child() $(“ul li:nth-child(2)”) select the <li> elements of every<ul> element based on the position use may use it. suppose <ul> element has three <li> elements and you want to select the 2nd position <li> element then use $(“ul li:nth-child(2)”) selector. you may use to select <li> for any positions 1,2,3….

7

:even $(“ul li:even”) select all<ul> elements <li> based on even indexes you may use it. indexing will start from 0 only. suppose first <ul> has three <li> then the index will be 0, 1, 2  and for the next <ul> index will start from 3 and so on.

8

:odd $(“ul li:odd”) select all <ul> elements <li> based on odd indexes you may use it. 

9

:visible $(“div:visible”) Selects all <p> elements that are visible.

10

:hidden $(“p:hidden”) Selects all <p> elements that are hidden.
11 parent > child $(“div > span”) Selects all <span> elements that are a direct child of their parent <div> element.
12 prev + next $(“span + h3”) Selects all <h3> elements that immediately preceded the <span> elements.
13 prev ~ siblings  $(“div ~ ul”) Selects all <ul> elements that are siblings and follow after the <div> elements.
14 :empty $(“td:empty”) Selects all <td> elements that are empty i.e that have no children including text.
15 :has() $(“div:has(h1)”) Selects all <div> elements that contain at least one <h1> tag.
16 :parent $(“:parent”) Choose all elements with at least one child node, which can be an element or text. 
17 :contains() $(‘p:contains(“GeeksforGeeks”)’) Selects all <p> elements that contain the text “GeeksforGeeks”.
18 :nth-of-type(n) $(“h2:nth-of-type(2)”) Selects all <h2> elements that are the parent’s second h2> element. 
19 :nth-last-of-type(n) $(“h2:nth-last-of-type(2)”) Selects all <h2> elements that are the parent’s second child, counting from the last to the first. 
20 :only-child $(“span:only-child”) Selects all <span> elements that are the only child of their parent.
21 :first-of-type $(“div:first-of-type”) All <div> elements that are the first div> element in their parent are selected. 
22 :header $(“:header”) Selects all  headers <h1>, <h2>, <h3>, and so on.
23 :lang() $(“:lang(en)”) Selects all items with a language value of ‘en’.
24 :not() $(“h5:not(:empty)”) select all not empty <h5> tags.
26 :submit $(“:submit”) Selects all input and button tags with type=”submit”.
27 :text $(“:text”) Selects all input tags with type=” text”.
28 :radio $(“:radio”) Selects all input tags with type=”radio”.


Last Updated : 09 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads