How to use *= operator in jQuery attribute selector ?

Last Updated : 05 Sep, 2022

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=
        "https://code.jquery.com/jquery-3.5.0.js">
    </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=
        "https://code.jquery.com/jquery-3.5.0.js">
    </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:

How to use OR Operation in jQuery Attribute Selectors ?

vkash8574

Improve

Article Tags :

How to use *= operator in jQuery attribute selector ?

Similar Reads

Thank You!

What kind of Experience do you want to share?