Updated March 17, 2023
Introduction to jQuery Elements
jQuery works with html elements. Meaning that we select some elements of the HTML page and perform some action on it. There are many selectors in jQuery. We will see each selector in detail.
Syntax:
$(selector).action()Where $ sign is used to symbolize jQuery,
A selector is to select the HTML element and the action is to perform jquery action on the selected element. Thus, the jQuery selectors that use the syntax above would now be like the examples below.
Example:
$('div').css('background-color', 'green');
$('p').css('border','2px solid red');
$('span').css('color','red');A demo program to illustrate the above syntax and how jQuery works.
Code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>element demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<style>
div p span{
width: 120px;
height: 60px;
padding: 10px;
}
</style>
<script>
$('document').ready(function() {
$('div').css('background-color', 'green');
$('p').css('border','2px solid red');
$('span').css('color','red');
});
</script>
<div>The div element</div>
<p>the p element</p>
<span>the SPAN element</span>
</body>
</html>Output:
jQuery uses CSS syntax to select elements. jQuery selectors first find/selects the HTML element and then perform an action on the HTML elements.
Top 8 jQuery Selectors
Each element here is selected on its element name, id, classes, types, etc. Also, we can build our own user-defined selectors. The selectors we will learn in this tutorial.
- The element Selector
- The id Selector
- The class Selector
- The :eq() Selector
- The :first Selector, The: last Selector, The: even Selector, The: odd Selector
- The :first and :first_child difference
- The :last and :last_child difference
- The jQuery Method Chaining
1. The element Selector
As seen in the above program, like
$('p').css('border','2px solid red');The selector always begins with the $(dollar sign) followed by parenthesis (). This selector selects all the paragraph<p> elements on a given page. The CSS is the action to be performed on the p element here which further creates a border of 2 px, border type solid, and border color of red on each p element.
Example:
- Event: User clicks a button when the document is fully loaded( using the document event function).
- Action on this Event: To set the border of a paragraph element.
Code:
$(document).ready(function() {
$('#button').click(function() {
$('p').css('border','2px solid red');
});
});2. The id Selector
This selector starts with # followed by the id of the html element which refers to the id attribute of the html element.
Syntax:
$('#idname').someaction();Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#new").css("background-color", "green");
});
</script>
</head>
<body>
<h1>Welcome to My Page!</h1>
<p id="new">This the first element</p>
<p>This is the second Element</p>
</body>
</html>Output:
3. The class Selector
This class attribute of the HTML element having this .classname will be selected with this selector. The class attribute is used to add styling for several HTML elements.
Syntax:
$('.classname').someaction();4. The :eq() Selector
This :eq() selector selects an HTML element with the given index. This index starts at 0.
Syntax:
$(":eq(index)")Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:eq(1)").css("background-color","green");
});
</script>
</head>
<body>
<h1>Welcome to My Page</h1>
<p class="new">First Element</p>
<p>Second Element</p>
<p>Third Element</p>
<p>Foruth Elemnet</p>
<ul id="drinks">
<li>coffee</li>
<li>tea</li>
</ul>
</body>
</html>Output:
5. The :first Selector , :last Selector , :even Selector , :odd Selector
Let’s take a look at this selector.
Group
- The :first Selector – Finds the first element in a group.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:first").css("background-color","green");
});
</script>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>First Element</p>
<p>Second Element</p>
<p>Third Element</p>
<p>Foruth Elemnet</p>
</body>
</html>Output:
- The :last Selector – Finds the last element in a group.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:last").css("background-color","green");
});
</script>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>First Element</p>
<p>Second Element</p>
<p>Third Element</p>
<p>Foruth Elemnet</p>
</body>
</html>Output:
Table
- The :even Selector – Finds all even rows of a table.
- The :odd Selector – Finds all odd rows of a table.
In the below program green highlights the even rows and yellow highlights the odd rows.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr:even").css("background-color","green");
$("tr:odd").css("background-color","yellow");
});
</script>
</head>
<body>
<h1>Welcome to My Page</h1>
<table>
<thead>
<tr>
<th>S.No</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>[email protected]</td>
<td>91-799-2909878</td>
</tr>
<tr>
<td>1</td>
<td>[email protected]</td>
<td>91-777-4909878</td>
</tr>
<tr>
<td>1</td>
<td>[email protected]</td>
<td>91-789-5909878</td>
</tr>
</tbody>
<tr></tr>
</table>
</body>
</html>Output:
Since we have learned about first and last, even and odd, let’s learn about the first and first-child differences also.
6. The :first and: first_child difference
- :first – As we know the :first selects the first element.
- :first-child – Select the elements that are the first child of their respective parent.
Following is a demo that explains this difference.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#buttonfirst").click(function(){
$("p:first").css("background-color", "green");
});
$("#buttonfirstchild").click(function(){
$("p:first-child").css("background-color", "green");
});
});
</script>
</head>
<body>
<button id="buttonfirst">show first </button>
<button id="buttonfirstchild"> show first-child</button><br><br>
<div style="border:2px solid #eee; background-color: #eee">
<p>First Element</p>
<p>Second Element</p>
</div><br>
<div style="border:2px solid #eee; background-color: #eee">
<p>First Element</p>
<p>Last Element</p>
</div>
</body>
</html>This output is shown when the first button show first is clicked.
Output:
This output is shown when the second button shows the first child is clicked.
Output:
7. The :last and :last_child difference
Similarly, the difference between :last and :last-child is as same as the above, we just have to change the selector type.
Code:
<script>
$(document).ready(function(){
$("#buttonfirst").click(function(){
$("p:last").css("background-color", "green");
});
$("#buttonfirstchild").click(function(){
$("p:last-child").css("background-color", "green");
});
});
</script>8. jQuery Method Chaining
Until now, we have seen one selector with one action, but jQuery allows us to write one selector and multiple actions on the same element.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").css("background-color","red").css("color", "white");
});
});
</script>
</head>
<body>
<h1>Welcome to My Page</h1>
<div style="border:2px solid red;width:100px;height:100px;">Hello World</div>
<button>Click me</button>
</body>
</html>Before Click me Button
Output:
After Click me Button
Output:
Recommended Articles
This is a guide to jQuery Elements. Here we discuss the introduction and the top 8 jQuery selectors along with its code implementation. You may also look at the following articles to learn more –
