Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
How to select a single element which matches the given ID using jQuery?
To select a single element which matches with the given ID using jQuery, use the element id selector. The syntax is straightforward ?
$('#elementid')
The # symbol followed by the element's ID allows jQuery to locate and select that specific element from the DOM. Since IDs are unique within an HTML document, this selector will always return a single element.
Example
You can try to run the following code to learn how to select a single element which matches with the given ID using jQuery ?
<html>
<head>
<title>Selector Example</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
/* This would select second division only*/
$("#div2").css("background-color", "yellow");
});
</script>
</head>
<body>
<div class = "demo1" id = "div1">
<p>This is first division of the DOM.</p>
</div>
<div class = "demo2" id = "div2">
<p>This is second division of the DOM.</p>
</div>
<div class = "demo3" id = "div3">
<p>This is third division of the DOM</p>
</div>
</body>
</html>
In this example, $("#div2") selects only the div element with ID "div2" and applies a yellow background color to it. The other div elements remain unaffected.
Conclusion
The jQuery ID selector $('#elementid') is the most efficient way to select a single, specific element from the DOM. It leverages the uniqueness of HTML IDs to provide precise element targeting.
352 Views
