ID Selector in jQuery
jQuery’s #id selector is a useful tool for choosing a single HTML element by its distinct id attribute. Finding a specified area of a web page’s Document Object Model (DOM) quickly is regarded as a fundamental jQuery action. In the Document Object Model (DOM), jQuery’s ID selector is essential for targeting and manipulating HTML components. Its main function is to select a unique HTML element on a web page with an id attribute. Prefixing the ID name with a pound sign (#) and passing the expression to the $( ) function in quotation marks is the ID selector syntax. For instance, $(‘#elementid’) picks an element with that ID, and you can use a tag name like $(‘div#yourid’).
Syntax:
$('#elementid')- $: This is the shorthand alias for jQuery(), the jQuery factory routine. All jQuery selections start with these parentheses () and the dollar sign.
- : In your jQuery code, this pound sign must appear before the ID name.
- elementid: Your HTML element’s real ID. Backslashes are needed to escape special characters like colons and periods in the id.
How it Works
Uniqueness: HTML elements’ id attributes store a page-wide identification. Therefore, no two page components should share an index number.
DOM Access: jQuery searches the DOM for the element with the supplied id using $(‘#some-id’). JavaScript interacts with web pages via the Document Object Model (DOM), which represents HTML as a network of objects. Accessing web page components with JavaScript through the DOM was formerly difficult and error-prone due to browser-dependent peculiarities and missing methods.
Cross-Browser Compatibility: jQuery offers a condensed and standardised method for using DOM elements. It is especially useful since it automatically corrects for browser-specific peculiarities and adds functionality that normal JavaScript access methods (such as document.getElementById()) may not have, guaranteeing consistent performance across browsers.
jQuery Object: A new jQuery object instance is returned by the $( ) function after a successful selection. You can quickly apply jQuery style changes, content manipulation, and event attachments to this object’s DOM element.
ID Rules: Identity Rules The id selector requires a unique page id property with only letters, numerals, hyphens, underscores, colons, and periods that starts with a letter. It is also susceptible to case. Finding elements quickly is a well-known feature of the #id selector.
Code Example
This example uses $(document).ready() to construct the DOM before the code runs, then selects a div element by its id and dynamically changes its background colour when the page loads:
<html>
<head>
<title>The Selector Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
/* This selects the division with the specific ID and changes its background color */
$("#div2").css("background-color", "yellow");
});
</script>
</head>
<body>
<div class="big" id="div1">
<p>This is the first division.</p>
</div>
<div class="medium" id="div2">
<p>This is the second division.</p>
</div>
<div class="small" id="div3">
<p>This is the third division.</p>
</div>
</body>
</html>Output:
This is the first division.
This is the second division.
This is the third division.In this example:
$(‘#div2’).css(“background-color”, “yellow”); utilises the #div2 selector to first identify the HTML div element with id=”div2″ before applying the CSS property background-color with a value of yellow to that specific element.When you open this HTML file, the background of “This is the second division.” turns yellow.