JQUERY - CLASS SELECTORS

To understand Class Selectors, let us take the below example, where we have three tags.

Example :

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

  	<body>
    	<h1> JQuery </h1>
    	<p class = "para1"> First Paragraph </p>
    	<p class = "para2"> Second Paragraph </p>
    	<p class = "para3"> Third Paragraph </p>
  	</body>
</html>

Now since, in the above code, there are three tags,

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

We have used the CSS class attributes for each tags. So that we can differentiate between the three tags.

Note : To understand Class Selectors, a little understanding of CSS class is needed.

Now, let us say, we want to change the contents of the first tag,

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

From First Paragraph to My New First Paragraph using JQuery.

Now since, there are three tags, we need to specify the Class Selectors to make use of the CSS class name i.e. para1.

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

So, let us rewrite the above code using Class Selectors of JQuery.

Example :

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

  	<body>
    	<h1> JQuery </h1>
    	<p class = "para1"> First Paragraph </p>
    	<p class = "para2"> Second Paragraph </p>
    	<p class = "para3"> Third Paragraph </p>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
			$(p.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 tag,

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

Got changed to My New First Paragraph. And this happened with the one liner code of JQuery.

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

In the JQuery code we have located the element and specified the class name followed by .' i.e. p.para1.

Just remember, in the class selector, the class name should start with a dot '.' i.e. p.para1.

The above JQuery code can also be written as,

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

So, when JQuery finds that a selector starts with a dot '.' (i.e. .para1), it assumes that we ar searching for a CSS class.

And finds that there are three elements with class attribute.

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

And the first attribute,

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

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

Example :

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

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

Output :

❮❮ PREV NEXT ❯❯