jQuery attribute~=value 选择器

jQuery [attribute~=value] 选择器选择所有含有特定字符串的名称属性的元素。

语法:

$("[attribute~='string']")

参数:

attribute。指定用哪个属性来查找。
string:指定要查找的字符串值。

例子1：在这个例子中，我们将使用jQuery [attributee~=value] Selector来选择所有具有name属性的元素。

<!DOCTYPE html>
<html>
   
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
   
    <script>
        (document).ready(function () {
            ("input[name~='GFG']").css("background-color",
                "LIGHTGREEN");
        });
    </script>
</head>
   
<body>
    <input name="GFG" type="text" value="GEEKSFORGEEKS">
    <input name="2" type="text" value="SITE1">
    <input name="3" type="text" value="SITE2">
    <input name="GFG" type="text" value="GEEKSFORGEEKS">
    <input name="GFG" type="text" value="GEEKSFORGEEKS">
    <input name="4" type="text" value="SITE4">
    <input name="GFG" type="text" value="GEEKSFORGEEKS">
</body>
   
</html>

输出:

jQuery attribute~=value 选择器

实例2：在这个例子中，我们将在点击函数的帮助下，改变所有具有名称属性的元素的颜色。

<!DOCTYPE html>
<html>
   
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
   
    <script>
        (document).ready(function () {
            ("button").click(function () {
                $("input[name~='GFG']").css("color",
                                            "GREEN");
            });
        });
    </script>
</head>
   
<body>
    <input name="GFG" type="text" value="GEEKSFORGEEKS">
    <input name="1" type="text" value="SITE1">
    <input name="GFG" type="text" value="GEEKSFORGEEKS">
    <input name="2" type="text" value="SITE2">
    <input name="3" type="text" value="SITE3">
    <input name="GFG" type="text" value="GEEKSFORGEEKS">
    <input name="4" type="text" value="SITE4">
    <input name="GFG" type="text" value="GEEKSFORGEEKS">
    <br><br>
    <button>Change color</button>
</body>
   
</html>