jQuery ID Selector

Back to: jQuery Tutorials

jQuery ID Selector with Example

In this article, I am going to discuss jQuery ID Selector with Examples. Please read our previous article, where we discussed jQuery CDN. At the end of this article, you will understand everything about the jQuery ID selector

What are selectors in jQuery?

Selectors are a very important concept of jQuery. Selectors are used for manipulating the DOM elements. Following is the syntax to use Selector in jQuery.
Syntax: $(‘selector’).action(parameters);

Different Types of selectors available in jQuery:

There are many ways to select an element in jQuery such as

  1. ID selector
  2. Element Selector
  3. Class selector
  4. Attribute selector
  5. Attribute value selector and many more

In this article, we will discuss everything about ID selector……

jQuery ID selector

To select any HTML element by its ID attribute value, we have to use the jQuery ID selector. So, the jQuery #id selector selects the element with the specific id.

Syntax: $(‘#Id’)
Here, Id could be any value provided in the id attributes of the HTML element and you should use # followed by its ID in the selector. For example, suppose we have a button element in our HTML like below.
<button id=”btn1″>Click Me</button>

To select this button element, we have to use the jQuery id selector as follows
$(‘#btn1’)

The main advantage of using this jQuery ID selector is that we will get separate control over each HTML element by its unique id and the manipulations will affect only that HTML element. The usage of selecting the element by their ID name is exactly as same as we have used in CSS. For example
$(‘#id1’): This will select any element with ID id1
$(‘div#id1’): This will select any div element which has the ID id1
$(‘#id1 #id2’): This will select any element having ID id2 which are a descendant of any element having ID id1
$(‘#id1, #id2’): This will select any element having ID id1 or id2

Examples to understand jQuery ID Selector:

Now let’s jump to the practical to understand these things

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>jQuery ID Selector</h1>
    <p>This is Some text</p>
    <p id="p1">This is some another text</p>
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('#p1').css('border', '2px solid blue');
            });
        });
    </script>
</body>
</html>

When you run the above code, you will get the below output

Examples to understand jQuery ID Selector

Now in this example, we have the button element with id value “demo” and a paragraph element with id value “p1”. We have to select the button and attach a click event handler to it. By clicking the button, we have to add a border to the paragraph element having id p1.

Notice that to select the button we have used $(‘#demo’) and to select the paragraph we have used $(‘#p1’). Let’s see what will happen after clicking the button. When you click on the Click Me button, you will get the following in the browser.

jQuery ID Selector with Example

Notice that the border has been added to it.

Some important facts about jQuery ID Selector:
  1. jQuery ID selector is the most efficient way to select a unique element in DOM. If you know the id of an element you should always use the ID selector.
  2. $(‘ID selector’) returns a jQuery object containing a collection of either zero or one DOM element.
  3. ID must be unique in the HTML. If you have two or more elements with the same id then jQuery performs the action only to the first element.

Let’s understand the above points with an example:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>jQuery ID Selector</h1>
    <p id="p1">This is Some text</p>
    <p id="p1">This is some another text</p>
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('#p1').css('border', '2px solid blue');
            });
        });
    </script>
</body>
</html>

With the above changes in place, run the code and click on the Click Me button, and you should get the following in the browser.

important facts about jQuery ID Selector

Look that we have given the same id to both of the paragraph elements but the border is applied to only the first element having that id.’

Difference between JavaScript document.getElementById() function and jQuery ID selector

jQuery ID selector uses the document.getElementById() function of JavaScript. But $(‘ID selector’) and document.getElementById() are not the same. Look at some differences of these two:

  1. JavaScript’s document.getElementById() will throw an error if the specified element is not found. But $( ‘ID selector’ ) will not throw an error at all. jQuery will return only a jQuery object with zero elements.
  2. document.getElementById() returns a raw DOM element but jQuery ID selector returns a jQuery object that wraps the DOM object and provides the jQuery methods like css(),click() etc to it. To check the underlying DOM object from a jquery object use $( ‘ID selector’ )[0].
  3. document.getElementById() is faster than $( ‘ID selector’ ). If you don’t need the additional functionalities of jQuery always go for the document.getElementById().
Example:

To check if an element is returned by the jQuery id selector, use the length property as shown in the below example.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>jQuery ID Selector</h1>
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
 	    if ($('#demo').length > 0) {
                alert('Element found')
            }
            else {
                alert('Element not found')
            }
        });
    </script>
</body>
</html>

Once you run the above code, the following alert will be popup in the browser.

Difference between JavaScript document.getElementById() function and jQuery ID selector

Every HTML element can have its unique id attribute. Therefore, it is easy to get control over the element by using the jQuery ID Selector. We can use this jQuery Id selector whenever we want to access a specific element to perform some tasks.

In the next article, I am going to discuss jQuery Element Selector with Examples. Here, in this article, I try to explain jQuery ID Selector and I hope you enjoy this article.

Leave a Reply

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