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 “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 >
< 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 >
< 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
Share your thoughts in the comments
Please Login to comment...