jQuery #id Selector

jQuery | #id Selector: Learn about the jQuery #id selector with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on November 03, 2022

#id Selector

In jQuery, selectors are a parameter through which we can select the HTML element. Selectors can comprise – class names, ids, tag names, attributes, etc. Basically, by using selectors, the appropriate HTML-DOM element can be selected and hence performed actions on it. Here, we are discussing the jQuery #id Selector.

The jQuery #id selector helps to select the element through its Id. The 'id' of an element is a unique attribute that no other element can have. It is specified within the 'id attribute of the element. Generally, an Id should not start with a numerical value as it is not accepted by some browsers.

When selecting the DOM element using the id of the element, always make sure to pass the id name along with the '#' prepending it.

#id Selector Syntax

$('#id_name');

Once the element is selected, you can access those and perform the actions that you want to perform on them. The example given below shows the selection of all the elements on click by passing the appropriate id name.

jQuery #id Selector Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery - #id Selector</h2>
    <p>Click the button to Select the element with id - 'two'.</p>
    <button>Select with Id</button>
    <hr>
    <div>
      <p id="one" style="color:darkblue; font-size: large; font-weight: bold;">Welcome to Include Help !</p>
      <p id="two">This is a jQuery Tutorial for Selectors.</p>
      <p id="three" style="color:darkblue; font-size: large; font-weight: bold;">Thanks for visiting !</p>
    </div>
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('#two').appendTo('h3');
        });
    });
  </script>
</html>

Output: