jQuery Element Selectors
The jQuery selector selects HTML element based on the element name, id name, class name. Selectors can be used inside single or double quotation marks.
jQuery Tag Selector
Example 1: Select all 'div' elements, 'p' elements using element name.
<html>
<head>
<style>
p, div{
padding:10px;
margin:10px;
}
</style>
<script src="https://www.ankitweblogic.com/js/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$("div").css("background-color","#ffc");
$("p").css("background-color","#faa");
});
</script>
</head>
<body>
<div>
<h2>This is a heading</h2>
</div>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
jQuery Multiple Selector
You can select multiple elements by separating selectors with comas.
Example 2: Select all div, h1, p elements.
$("div,p,h1").css("background-color", "#ffc");
$("div, p, h1").css("color", "#f44");
$("div, p, #id").css("color", "#f44");
$("div, .multiple").css("color", "#f44");
$("div, .multiple, #id").css("color", "#f44");
$("*").css("background-color","red"); //Selects all elements
jQuery id Selector
Select the HTML element whose ID attribute matches the specified name. The specified name is preceded by a # (hash) symbol.
$("#div1").css("background-color", "#ffc");
jQuery Class Selector
Class Selector select the elements whose class attribute matches the specified name. The specified name is preceded by a '.'(dot symbol). Example: ".myClass" - Selects all the element that have class attribute values of myClass.
$(".myClass").css("background-color","red");
$("p.myClass").css("background-color","blue");
Hide Class
Example 3: Click Button to Hide all elements having class name myclass.
jQuery Child Selector
Selects a child element by using the following syntax. "parent > child".
Example: "div > p" - Selects all <p> elements that are children of <div> elements.
$("div > p").css("background-color","red");
jQuery First Child Selector
To Selects first child elements use the selector "div > p:first-child". This statement Selects all <p> elements that are first child of <div> elements.
$("div > p:first-child").css("background-color","red"); first child
jQuery Last Child Selector
To Selects last child elements use the selector "div > p:last-child". This statement Selects all <p> elements that are last children of <div> elements.
$("div > p:last-child").css("background-color","red"); last child
jQuery Descendant Selector
Selects a descendant element by using "ancestor descendant". Example: "div strong" - This statment Selects all <strong> elements that are descendants of <div> elements.
$("div strong").css("background-color","red");
jQuery Odd-Even Selector
Odd Selector Selects matched elements based on their position. Odd positioned elements are selected using the following syntax: "p:odd". This Selects the second and fourth <p> elements.
$("p:odd").css("background-color","red");
Even Selector Selects matched elements based on their position. Even positioned elements are selected using the following syntax: "p:even". This Selects the first and third <p> elements.
$("p:even").css("background-color","red");
jQuery this Selector
jQuery this Selector selects the current HTML element. This keyword is used without quotes.
$(this).css("color", "#f55");
Example 4: Click any tag to change its color using jquery 'this' selector.
Exercise 5: Click on heading to change the image.
Output