Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

jQuery attribute selector

Suggested Videos
Part 4 - jQuery #id selector
Part 5 - jQuery Element Selector
Part 6 - jQuery class selector



In this video we will discuss selecting elements
1. That have specified attribute
2. That have specified attribute values



Syntax : 
$('[attribute]')
$('[attribute="value"]')

$('[title]') // Selects all elements that have title attribute
$('div[title]') // Selects all div elements that have title attribute
$('[title="divTitle"]') // Selects all elements that have title attribute value - divTitle
$('div[title="divTitle"]') // Selects all div elements that have title attribute value - divTitle

Selects all elements with title attribute and sets 5px solid red border
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('[title]').css('border', '5px solid red');
        });
    </script>
</head>
<body>
    <div title="div1Title">
        DIV 1
    </div>
    <br />
    <div title="div2Title">
        DIV 2
    </div>
    <p title="pTitle">
        This is a paragraph
    </p>
    <span title="div1Title">
        SAPN 1
    </span>
    <br /><br />
    <span>
        SPAN 2
    </span>
</body>
</html>

Selects all div elements with title attribute and sets 5px solid red border
<script type="text/javascript">
    $(document).ready(function () {
        $('div[title]').css('border', '5px solid red');
    });
</script>

Selects all elements with title attribute value - div1Title, and sets 5px solid red border
<script type="text/javascript">
    $(document).ready(function () {
        $('[title="div1Title"]').css('border', '5px solid red');
    });
</script>

Selects all div elements with title attribute value - div1Title, and sets 5px solid red border
<script type="text/javascript">
    $(document).ready(function () {
        $('div[title="div1Title"]').css('border', '5px solid red');
    });
</script>

Selects all div elements with both title and style attributes, and sets 5px solid black border
<html>
<head>
    <title></title>
    <script src="Scripts/jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('div[title][style]').css('border', '5px solid black');
        });
    </script>
</head>
<body>
    <div title="divTitle" style="background-color:red">
        Red DIV
    </div>
    <br />
    <div title="divTitle" style="background-color:green">
        Green DIV
    </div>
    <br />
    <div title="divTitle">
        Normal Div
    </div>
    <br />
    <div>
        Normal Div without any attributes
    </div>
</body>
</html>

Selects all div elements with title attribute value - divTitle, and style attribute value - background-color:red, and sets 5px solid black border
<script type="text/javascript">
    $(document).ready(function () {
        $('div[title="divTitle"][style="background-color:red"]')
            .css('border', '5px solid black');
    });
</script>

Selects all div elements with either title or style attributes, and sets 5px solid black border
<script type="text/javascript">
    $(document).ready(function () {
        $('div[title],[style]').css('border', '5px solid black');
    });
</script>

jQuery tutorial for beginners

6 comments:

  1. At some reason the // style="background-color:red" // from

    $('div[title="divTitle"][style="background-color:red"]')
    .css('border', '5px solid black');

    Am I the only one with this problem? All the other samples working perfect.

    ReplyDelete
  2. Hello Venkat, Could you please upload vedio tutorials for Angular Js, knockout Js etc.
    Thank You

    ReplyDelete
  3. Hi Venkay, could please do a demo on user error alert using jquery? I would like to do a textbox alert to prevent user from entering a date like 2099-01-03. I have a datepicker, but sometimes a user would prefer typing and they tend to type in data that is wrong. Thank you

    ReplyDelete
  4. Hello Harry, the code you listed looks good. The error must be above this code. I would check <script src and <script type code for a typo....

    ReplyDelete
  5. hello sir, if i've added span at bottom, Selects all div elements with either title or style attributes is also applies for sapn element. Please clarify.. Navya.

    ReplyDelete
  6. Hi Venkat, thanks for your videos. This is really helping me alot.

    From this session i see that below line of code is not working in IE however, the same is working in Chrome. Could you please let me know what was the issue ?

    $('div[title="divTitle"][style="background-color:green"]').css('border', '5px solid black');

    ReplyDelete

It would be great if you can help share these free resources