jQuery Attribute Value Selector

jQuery Attribute Value Selector with Examples

In this article, I am going to discuss jQuery Attribute Value Selector with Examples. Please read our previous article, where we discussed jQuery Attribute Selector. At the end of this article, you will understand everything about the jQuery Attribute Value Selector.

jQuery Attribute Value Selectors

Following are the lists of jQuery Attribute Value Selectors.

Attribute Equals Selector:
Syntax: [name = “value”]
Example: $(‘[title=”sample1Title”]’)
Selects all the elements that have title attribute value equal to sample1Title.

Attribute Not Equal Selector:
Syntax: [name != “value”]
Example: $(‘[title !=”sample1Title”]’)
Selects all the elements that have title attribute value not equal to sample1Title.

Attribute Contains Selector:
Syntax: [name *= “value”]
Example: $(‘[title *=”Title”]’)
Selects all the elements that have title attribute value containing given substring ‘Title’.

Attribute Contains Word Selector:
Syntax: [name ~= “value”]
Example: $(‘[title ~=”mySample”]’)
Selects all the elements that have title attribute value containing the given word – mySample, delimited by space

Attribute Contains Prefix Selector:
Syntax: [name |= “value”]
Example: $(‘[title |=”mySample”]’)
Selects all the elements that have title attribute value mySample or starting with mySample followed by hyphen(-).

Attribute Starts with Selector:
Syntax: [name ^= “value”]
Example: $(‘[title ^=”div”]’)
Selects all the elements that have title attribute value starting with div

Attribute Ends with Selector:
Syntax: [name $= “value”]
Example: $(‘[title $=”Heading”]’)
Selects all the elements that have title attribute value ending with Heading.

Let us jump to the practical session to understand these selectors.

Example: Attribute Equals Selector: [name = “value”]

In the below example, we are selecting all the elements that have title attribute value equal to sample1Title and applying the border by clicking the button

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Attribute Equals Selector</title>
</head>
<body>
    <h3>jQuery Atrribute Value Selector</h3>
    <section class="test">
        <p title="sample1Title">This is a paragraph</p>
        <span title="sample1Title">This is a Span </span>
        <div title="sample">This is a DIV</div>
    </section>
    
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $('[title="sample1Title"]').css('border','2px solid red');
            });
        });
    </script>
</body>
</html>

Run the above HTML Code and then click on the Click Me button and you should get the following output.

Attribute Equals Selector in jQuery

Example: Attribute Not Equal Selector: [name != “value”]

In the below example, we are selecting all the elements inside the section that have title attribute value not equal to sample1Title and applying the border by clicking the button. Notice that only the div element is matching the criteria.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Attribute Not Equal Selector</title>
</head>
<body>
    <h3>jQuery Atrribute Value Selector</h3>
    <section>
        <p title="sample1Title">This is a paragraph</p>
        <span title="sample1Title">This is a Span </span>
        <div title="sample">This is a DIV</div>
    </section>
    
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $( 'section [title !="sample1Title"]').css('border','2px solid red');
            });
        });
    </script>
</body>
</html>

Run the above HTML Code and then click on the Click Me button and you should get the following output.

jQuery Attribute Not Equal Value Selector

Example: Attribute Contains Selector: [name *= “value”]

In the below example, we are selecting all the elements that have title attribute value containing the given substring ‘Title’ and applying those to the border. Notice that, Paragraph and span tag is matching the criteria.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Attribute Contains Selector</title>
</head>
<body>
    <h3>jQuery Atrribute Value Selector</h3>
    <section>
        <p title="sample1Title">This is a paragraph</p>
        <span title="sample1Title">This is a Span </span>
        <div title="sample">This is a DIV</div>
    </section>
    
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $( '[title *= "Title"]' ).css('border','2px solid red');
            });
        });
    </script>
</body>
</html>

Run the above HTML Code and then click on the Click Me button and you should get the following output.

Attribute Contains Selector in jQuery

Example: Attribute Contains Word Selector: [name ~= “value”]

In the below example, we are selecting all the elements that have title attribute value containing the given word – mySample, delimited by space. Notice that the p element has also an attribute value containing the word mySample but that is not delimited by space. So that is not selected here.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Attribute Contains Word Selector</title>
</head>
<body>
    <h3>jQuery Atrribute Value Selector</h3>
<section>
        <p title="mySampleTitle">This is a paragraph</p>
        <span title="Title mySample">This is a Span </span>
        <div title="mySample Title">This is a DIV</div>
    </section>
    
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $( '[title ~= "mySample"]' ).css('border','2px solid red');
            });
        });
    </script>
</body>
</html>

Run the above HTML Code and then click on the Click Me button and you should get the following output.

jQuery Attribute Contains Word Selector

Example: Attribute Contains Prefix Selector: [name |= “value”]

In the below example, we are selecting all the elements that have title attribute value mySample or starting with mySample followed by hyphen(-). Notice that, div is also having mySample but that isn’t followed by hyphen(-). So that is not selected here.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Attribute Contains Prefix Selector</title>
</head>
<body>
    <h3>jQuery Atrribute Value Selector</h3>
    <section>
        <p title="mySample-Title">This is a paragraph</p>
        <span title="mySample">This is a Span </span>
        <div title="mySample Title">This is a DIV</div>
    </section>
    
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $( '[title |= "mySample"]' ).css('border','2px solid red');
            });
        });
    </script>
</body>
</html>

Run the above HTML Code and then click on the Click Me button and you should get the following output.

jQuery Attribute Contains Prefix Selector

Example: Attribute Starts with Selector: [name ^= “value”]

In the below example, we are selecting all the elements that have title attribute value starting with div and applying the border. Notice that div has also ‘div’ in the title attribute value but it is not started with that.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Attribute Starts with Selector</title>
</head>
<body>
    <h3>jQuery Atrribute Value Selector</h3>
    <section>
        <p title="divmySample-Title">This is a paragraph</p>
        <span title="divmySample">This is a Span </span>
        <div title="mySamplediv Title">This is a DIV</div>
    </section>
    
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $( '[title ^= "div"]' ).css('border','2px solid red');
            });
        });
    </script>
</body>
</html>

Run the above HTML Code and then click on the Click Me button and you should get the following output.

jQuery Attribute Value Selector with Examples

Example: Attribute Ends with Selector: [name $= “value”]

In the below example, we are selecting all the elements that have title attribute value ending with Heading.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Attribute Ends with Selector</title>
</head>
<body>
    <h3>jQuery Atrribute Value Selector</h3>
    <section>
        <p title="mySampleHeading">This is a paragraph</p>
        <span title="mySample">This is a Span </span>
        <div title="mySamplediv Heading">This is a DIV</div>
    </section>
    
    <button id="demo">Click Me</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#demo').click(function () {
                $( '[title $= "Heading"]' ).css('border','2px solid red');
            });
        });
    </script>
</body>
</html>

Run the above HTML Code and then click on the Click Me button and you should get the following output.

jQuery Attribute Value Selector with Examples

Note that all these selectors are case sensitive, in the next article we will discuss how to make these selectors case-insensitive. Here, in this article, I try to explain jQuery Attribute Value Selector with Examples and I hope you enjoy this jQuery Attribute Value Selector article.

Leave a Reply

Your email address will not be published.