jQuery [attribute=value] 选择器



jQuery 中的 [attribute=value] 选择器用于选择具有特定属性和属性值的元素。

语法

以下是 [attribute=value] 选择器的语法:

$("[attribute=value]")

参数

以下是上述语法的描述:

  • attribute: 指定要匹配的属性名称。
  • value: 指定要匹配的精确属性值。

示例 1

在下面的示例中,我们使用 [attribute = value] 选择器来选择所有包含值为“text”的“type”属性的元素:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("input[type='text']").css("border", "2px solid blue");
        });
    </script>
</head>
<body>
    <input type="text" name="username" value="Varun">
    <input type="password" name="password" value="mypassword">
    <input type="text" name="email" value="[email protected]">
</body>
</html>

执行上述程序后,选定的元素将以实心蓝色边框突出显示。

示例 2

在此示例中,我们选择包含值为“password”的“type”属性的元素:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // Select input elements with a 'type' attribute equal to 'password' (case-insensitive)
            $("input[type='password']").css("background-color", "yellow");
        });
    </script>
</head>
<body>
    <input type="text" name="username" value="Varun">
    <input type="password" name="password" value="mypassword">
    <input type="text" name="email" value="[email protected]">
</body>
</html>

当我们执行上述程序时,选定的元素将以黄色背景颜色突出显示。

jquery_ref_selectors.htm
广告