Jquery Selectors Tutorial Examples | Using Jquery Selectors
Jquery selectors are used to access the DOM elements of a page. Jquery selectors will return the array of the objects that match the selection criteria applied. This array contains the Jquery objects not the DOM elements. (Jquery Selectors of Elements Tutorial With Examples)
The Jquery selectors are used as we use the CSS selectors in CSS. The Jquery selectors are quite similar to the CSS selectors and work very much similarly. Let us see a list of Jquery selectors below.
|Tag name (like div)||It is used to get all elements that have this tag name (for example <div>)|
|#my_id||It will get all the elements with id as my_id|
|.my_class||It will get all the elements with class as my_class|
|p#intro span||It will select all the spans which are inside of a p tag that have an id of intro|
|p.my_class||It will select p elements that have a class of my_class name|
|P#my_id.my_class||It will get all the p elements of the page that have an id of my_id and a class with my_class name|
|* (the Wild Card character)||It is used to select all the elements of a page. (Jquery selectors wildcard)|
|p, a, li||We can give a comma separated list as Jquery selectors. (Jquery multiple selectors)|
|.my_class1 .my_class2||It will get all the elements have both my_class1 and my_class2 classes.|
|Element1 + next||It will find all the elements that are next to the element1|
|Element1 ~ siblings||It will find all the siblings of the element1(Jquery selectors child)|
|Ancestor descendant||It will find all the descendant elements which are in the ancestor element.|
|Parent > child||It will find all the direct children of parent element. (Jquery selectors child)|
Now let us see some examples of the above mentioned Jquery selectors. See the example below to understand more.
Jquery selectors code example:
<!DOCTYPE html >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//Jquery code goes here
<div id="my_div_id">First div</div>
<p class="just_element">Second Paragraph with class just_element</p>
<div class="my_div_class">Second div with class my_div_class</div>
<div class="element_div">Third div with class just_element</div>
<li class="just_element">second element with class just_element</li>
<li class="just_element">fourth element</li>
Note: you can copy the code above and replace the “//Jquery code goes here” string in the document.ready function with the following code to understand the Jquery selectors.
It will find all the <p> tags and will change the text/font color to red.
$("#my_div_id").css("border", "3px solid red");
It will find the element with id=” my_div_id” and will put a border of 3px around it. In this example it is the first div.
$("li.just_element").css("border", "3px solid red");
The above line of code will find all the <li> tags with a class=”just_element” and will put the 3px red border around them. In our example it is the 2nd and 4th <li> of the ordered list.
$("ol .just_element").css("border", "3px solid red");
This code will select only those elements which are inside the <ol> and having class=”just_element”.
$("p, a").css("border", "2px solid green");
The above code will select all the <p> and <a> tags and will put border around them.
$("div > .just_element").css("border", "3px solid red");
This above code will find the elements which are first child of <div> and having class=”just_element”.
$("div + p").css("border", "3px solid red");
It will search all the <p> tags which are right after the <div> tag and will apply the border to them.
$("ol ~ p").css("border", "3px solid red");
This above code will search for all the <p> tags that are after the <ol> in this document.