Jquery Selectors of Elements Tutorial With Examples

jquery selector element examplesjquery selector element examples

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.

Jquery Selector Explanation
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 >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<title>Untitled Document</title>

<script>

$(document).ready(function(e) {

//Jquery code goes here

});

</script>

</head>

 

<body>

<p>First Paragraph</p>

<div id="my_div_id">First div</div>

<div class="parent_element">

<p class="just_element">Second Paragraph with class just_element</p>

<div class="my_div_class">Second div with class my_div_class</div>

<p>Third Paragraph</p>

</div>

<div class="element_div">Third div with class just_element</div>

<ol>

<li>first element</li>

<li class="just_element">second element with class just_element</li>

<li>third element</li>

<li class="just_element">fourth element</li>

</ol>

<div>Last div</div>

<p>Last p</p>

</body>

</html>

In the above code we have used two script tags in the head section. The first one is to include the Jquery library. The second one is used for the Jquery code. Document.ready works similar to the window.onload function of JavaScript.

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.

$("p").css("color", "red");

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.

Comments