Updated April 14, 2023
Introduction of jQuery id Selector
jQuery id selector allows you to specify an id for a specific HTML element and later find that specific element with the value of its “id” attribute.The id attribute should be unique within a document, that means, each id must be used only once within a document for finding a single, unique element. Any value can be used for the id attribute and ahash(#) character followed by the id is used to find an element with that specific id. The significance of jQuery id selector is that there is a separate control over each HTML element with its unique id and the intended actions will affect only that particular element, theid is referenced to.
Syntax:
$("#id")Where id refers to the unique id for the specific HTML element to be selected. This is a required parameter. For example, $(“#div_id”)this will select the element having the id “div_id”.
How does id Selector Work in jQuery?
- The basic purpose of using jQuery id selector is to find, select, and manipulate the HTML elements based on the values of their id attributes. Each HTML element should have a unique id which makes it easy to have separate control over all the elements.
- Each id should be used only once within a document.
- To find an element using the id attribute, you need to specify the id of that element after hash (#) character such as $(“#id”).
- Let us understand this way, if we want to select only a particular paragraph out of many other paragraphs in a web page, we can do this by assigning a unique id to that particular paragraph and then make the selection based on the assigned id.
- Using $() with an id selector passed as its argument, returns a jQuery object which contains a collection of zero or one HTML element because more than one HTML element can’t have the same id. $() is the shorthand for jQuery() function.
Examples
Let us go through a few examples to understand the implementation of id selector.
Example #1
This example demonstrates the usage of id selector in a very simple way.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#pid").css("background-color", "yellow");
});
});
</script>
<style>
#divstyle {
width: 500px;
height: 250px;
padding-top: 20px;
padding-left: 5px;
font-size: 24px;
text-align: center;
color: maroon;
background-color: cadetblue;
}
</style>
</head>
<body>
<center>
<h2>jQuery id selector</h2>
<div id="divstyle">
<p id="pid">
jquery id selector finds and selects the element with specific id.
</p>
<p>The id should be unique and is used as $("#id")</p>
<button><strong>Click Me!</strong</button>
</div>
</center>
</body>
</html>Output:
- Below screen dispalys once the code above gets executed.
- When the button is clicked, the background color of the element with id = “pid” which is a paragraph here, changes as shown below.
- The jQuery id selector selects the specified element with the help of id “pid” and then uses the .css method to turn the background color yellow.
Example #2
Here is another example that illustrates the usage of jQuery id selector.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#pid").replaceWith("<p>jQuery id selector</p>");
});
});
</script>
<style>
#divstyle {
width: 500px;
height: 250px;
padding-top: 20px;
padding-left: 5px;
font-size: 24px;
text-align: center;
color: maroon;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="divstyle">
<p id="pid">jQuery select by id</p>
<p>Selects an element with specific id</p>
<button><strong>Click Me!</strong</button>
</div>
</body>
</html>Output:
- Below screen dispalys once the code above gets executed.
- On clicking the button, the content of the element with id = “pid” which is a paragraph here, gets replaced with new content as shown below.
- The button click will select all th element with the id =”pid” and then its content is replaced with the new one.
Example #3
Let us look at one more example for jQuery id selector usage.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
$("#div2").css("border", "5px solid yellow");
});
</script>
<style>
div {
width: 150px;
height: 150px;
float: left;
padding: 10px;
margin: 10px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="div1">
<h2>jQuery id selector</h2>
</div>
<div id="div2"><h2>Selects the element with a specific id</h2></div>
</body>
</html>Output:
- The below screen displays once the code above gets executed.
- As soon as the page loads, the second div with id = “div2” is selected and a yellow colored border is added to it.
Example #4
Given below is one more example that illustrates the significance of jQuery id selector.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#pid").hide();
});
});
</script>
<style>
#divstyle {
width: 500px;
height: 250px;
padding-top: 20px;
padding-left: 5px;
font-size: 24px;
text-align: center;
color: maroon;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="divstyle">
<h2>jQuery id selector</h2>
<p>Selects an element with specific id</p>
<p id="pid">The id must be unique.</p>
<button><strong>Click me</strong></button>
</div>
</body>
</html>
Output:
- The below screen displays once the code above gets executed.
- On clicking the button, the element with id = “pid”gets hidden from the page as shown below.
- The id selector has been used on an <p> element here which will select that particular element and then the hide() function will hide that element from the page.
Note: Since each id should be used only once within a document, if the same id is assigned to more than one element, only the first matched element will be selected.
Conclusion
In this article, we discussed about the id selector implementation using jQuery using which we can access a specific element to execute a task. Each HTML element being assigned a unique id makes it easy to find and select to perform various HTML manipulations. This helps getting individual control over each element in a document.
Recommended Articles
This is a guide to jQuery id Selector. Here we also discuss the introduction and how does id selector work in jquery? along with different examples and its code implementation. You may also have a look at the following articles to learn more –
