SELECTORS - ID Selector

The ID Selector is used to select the element with the id name.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	<p id = "para1"> First Paragraph </p>
    	<p id = "para2"> Second Paragraph </p>
    	<p id = "para3"> Third Paragraph </p>
    	
    	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('#para1').text("My New First Paragraph");
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above output. We can see that the content of the first <p> tag,

<p id = "para1"> First Paragraph </p>

Got changed to My New First Paragraph.

And this happened with the one liner code of JQuery.

<script>
	$('#para1').text("My New First Paragraph");
</script>

In the JQuery code we have located the <p> element and specified the ID name followed by . i.e. #para1.

Just remember, in the ID selector, the ID name should start with a hash # i.e. #para1.

$('#para1').text("My New First Paragraph");

So, when JQuery finds that a selector that starts with a hash # (i.e. #para1), it assumes that we ar searching for a CSS ID.

And finds that there are three elements with ID attribute.

<p id = "para1"> First Paragraph </p>
<p id = "para2"> Second Paragraph </p>
<p id = "para3"> Third Paragraph </p>

And the first attribute,

<p id = "para1"> First Paragraph </p>

Matches with the ID name para1. And changes its content with My New First Paragraph.

❮❮ PREV NEXT ❯❯