Explain advance selector used in Jquery?

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 “w3wiki”:

<div class="w3wiki">
   w3wiki
</div>

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

$(".w3wiki"));

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 w3wiki in the HTML document:

<div id="w3wiki">
   w3wiki
</div>

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

$("#w3wiki");

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

Syntax:

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

Select all <p> elements in the HTML document.

<p>
   w3wiki
</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:

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.

Output:

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