jQuery [attribute=value] Selector

Quiz

The [attribute=value] selector in jQuery is used to select elements with a specific attribute and attribute value.

Syntax

Following is the syntax of [attribute=value] selector −

$("[attribute=value]")

Parameters

Here is the description of the above syntax −

attribute: Specifies the attribute name you want to match.
value: Specifies the exact attribute value you want to match against.

Example 1

In the following example, we are using the [attribute = value] selector to select every element containing "type" attribute with value "text" −

<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="Varun@tutorialspoint.com">
</body>
</html>

After executing the above program, the selected elements will be highlighted with solid blue border.

Example 2

In this example, we are selecting elements containing "type" attribute with value "password" −

<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="Varun@tutorialspoint.com">
</body>
</html>

When we execute the above program, the selected elements will be highlighted with yellow background color.

jquery_ref_selectors.htm

Print Page