❮❮ PREV NEXT ❯❯

SELECTORS - attribute|=value Selector

The 'attribute|=value Selector' is used to select the elements, that matches an attribute that begins with(followed by '-') or equals to class name with a particular value.

Say, for example, <p>, <div>, <h1> e.t.c. are called elements in HTML.

And the <p> or <div> element can have a 'class' or 'id'.

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

These 'class' or 'id' are called as attribute in HTML.

Let us learn more with the below example.

Example :

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

  	<body>
    	<h1> JQuery </h1>
    
    	<p class = "Para"> First Paragraph </p>
    	<p class = "Paragraph"> Next Paragraph </p>
   		<p class = "Para-next"> New Next Paragraph </p>
    	
    	<button> Click me </button>

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('button').click( function() { 
            	$('[class |= "Para"]').text("The contents of the elements got changed")
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there are three <p> elements,

<p class = "Para"> First Paragraph </p>
<p class = "Paragraph"> Next Paragraph </p>
<p class = "Para-next"> New Next Paragraph </p>

And we only want to change the contents of those elements that has a class name that is equal to 'Para', or begins with 'Para' followed by a '-'.

And as we can see,

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

Matches with the class name 'Para'.

And,

<p class = "Para-next"> New Next Paragraph </p>

Begins with 'Para', followed by '-'.

But the contents of,

<p class = "Paragraph"> Next Paragraph </p>

Doesn't match the condition because the class name might begin with 'Para' but is not followed by '-'.

Thus the contents of,

<p class = "Para"> First Paragraph </p>
<p class = "Para-next"> New Next Paragraph </p>

Gets changed.

And this happened with the '[class |= "Para"]' element selector.

$('button').click( function() {
	$('[class |= "Para"]').text("The contents of the elements got changed")
});

The moment the button is clicked, JQuery statement gets triggered.

$('[class |= "Para"]').text("The contents of the elements got changed")

And the JQuery code locates those elements that has a class name that is equal to 'Para', or begins with 'Para' followed by a '-'.

And changes the contents of,

<p class = "Para"> First Paragraph </p>
<p class = "Para-next"> New Next Paragraph </p>

❮❮ PREV NEXT ❯❯