jQuery select by id

Filed Under: jQuery

jQuery select by ID allows you to find a specific HTML element with the value of its attribute – “id”. You can select and do the intended action on an element by making its id unique.

jQuery select by ID

Here is the general syntax for using the jQuery select by id:

$(“# ID”)

ID could be any value provided in the id attributes of the HTML element. You should use # followed by its ID in the selector.

For example, if there is a HTML element in the document like <div id=”text”> some text </div>, $(“#text”) will select the div with id equal to ‘text’ and do the intended action on it.

The main importance of this jquery selector is we will get separate control over each element by its unique id and the manipulations will affect only that element.

jQuery Select by ID Example

This example demonstrates the use of jQuery select by id and changing the CSS style of the selected element.


<html>
<head>
<title>jQuery select by ID</title>

<style>
div {
width: 80px;
height: 80px;
float: left;
padding: 10px;
margin: 10px;
background-color: #eee;
}
</style>

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

</head>
<body>
<div id="div1"><p>id="div1"</p></div>
<div id="div2"><p>id="div2"</p></div>
<script>
$( "#div1" ).css( "border", "5px solid green" );
</script>
</body>
</html>

In this example you can see that <div> element with id=’div1′ is selected for manipulation.

Above HTML produces output as shown in below image.

jquery select by id

jQuery select by id summary

Every HTML element can have unique id attribute. Therefore, it’s easy to get control over the element using the jQuery select by ID.

We can use this selector whenever we want to access a specific element to execute some task. Using this selector in combination could enhance the flexibility as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages