Open In App

How to use *= operator in jQuery attribute selector ?

Last Updated : 05 Sep, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

This article will show you an idea of using the *= operator in jQuery attribute selectors. The *= operator is used to select the sub-string attribute and apply operations on it.

Syntax:

$("div[myAttr*='GFG']").jQueryMethod({
    // Code
})

Approach: We will create HTML div elements with some attributes. We will use *= selector to select attributes with some specific values. After selecting the div elements, we will apply CSS styles to that element.

Example 1: In this example, we will use the *= operation to select the elements with specific sub-string and add CSS styles using jQuery. The output image shows that the CSS styles are not applied for the class which does not have the “GFG” sub-string.

HTML




<!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=
    </script>
      
    <title>
        How to use *= operator in 
        jQuery attribute selector?
    </title>
  
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>
        How to use *= operator in 
        jQuery attribute selector?
    </h3>
  
    <div class="GFG1">Web Technology</div>
    <div class="GFG2">C Programming</div>
    <div class="GFG3">JavaScript</div>
    <div class="GFG4">Java Programming</div>
    <div class="GFG5">Angular.js</div>
    <div class="GFG6">Computer Network</div>
    <div class="divClass">Algorithm</div>
  
    <script>
        $(document).ready(function () {
            $( "div[class*='GFG']" ).css({
                "background": "green",
                "color": "white",
                "width": "350px",
                "margin": "auto"
            });
        });
    </script>
</body>
</html>


Output:

 

Example 2: In this example, we will use the *= operation to select the elements with specific sub-string and add CSS styles using jQuery. The output image shows that the CSS styles are not applied for the class which does not have the “Geeks” sub-string with the “gfgid”.

HTML




<!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=
    </script>
      
    <title>
        How to use *= operator in 
        jQuery attribute selector?
    </title>
  
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>
        How to use *= operator in 
        jQuery attribute selector?
    </h3>
  
    <div gfgid="Geeks123">Web Technology</div>
    <div gfgid="Geeks">C Programming</div>
    <div gfgid="Geeks345">JavaScript</div>
    <div gfgid="Geeksfor">Java Programming</div>
    <div gfgid="GeeksforGeeks">Angular.js</div>
    <div gfgid="Geeks678">Computer Network</div>
    <div gfgid="divClass">Algorithm</div>
  
    <script>
        $(document).ready(function () {
            $( "div[gfgid*='Geeks']" ).css({
                "background": "green",
                "color": "white",
                "width": "350px",
                "margin": "auto"
            });
        });
    </script>
</body>
  
</html>


Output: 

 



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads