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

jQuery attribute value selector

Suggested Videos
Part 5 - jQuery Element Selector
Part 6 - jQuery class selector
Part 7 - jQuery attribute selector



In this video we will discuss 
Attribute Equals Selector [name="value"]
Attribute Not Equal Selector [name!="value"]
Attribute Contains Selector [name*="value"]
Attribute Contains Word Selector [name~="value"]
Attribute Contains Prefix Selector [name|="value"]
Attribute Starts With Selector [name^="value"]
Attribute Ends With Selector [name$="value"]



This is continuation to Part 7, please watch Part 7 before proceeding.

Selects all elements that have title attribute value equal to div1Title
$('[title="div1Title"]'


Selects all elements that have title attribute value not equal to div1Title
$('[title!="div1Title"]'

Selects all elements that have title attribute value containing the given substring - Title
$('[title*="Title"]'

Selects all elements that have title attribute value containing the given word - mySpan, delimited by spaces
$('[title~="mySpan"]')

Selects all elements that have title attribute value equal to myTitle or starting with myTitle followed by a hyphen (-)
$('[title|="myTitle"]'

Selects all elements that have title attribute value starting with div
$('[title^="div"]')

Selects all elements that have title attribute value ending with Heading
$('[title$="Heading"]')

Selects all elements that have title attribute value equal to div1Title 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="div1Title"]').css('border', '5px solid red');
        });
    </script>
</head>
<body>
    <div title="div1Title">
        DIV 1
    </div>
    <br />
    <div title="div2Title">
        DIV 2
    </div>
    <p title="myTitle-paragraph">
        This is a paragraph
    </p>
    <p title="myTitleHeading">
        This is a paragraph
    </p>
    <span title="div1Title">
        SAPN 1
    </span>
    <br /><br />
    <span title="mySpan Heading">
        SPAN 2
    </span>
</body>
</html>

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

THIS IS
$('div[title!="div1Title"]').css('border', '5px solid red');
EQUIVALENT TO
$('div:not([title="div1Title"])').css('border', '5px solid red');

Selects all elements that have title attribute value containing the given substring - Title, and sets 5px solid red border
<script type="text/javascript">
    $(document).ready(function () {
        $('[title*="Title"]').css('border', '5px solid red');
    });
</script>

Selects all elements that have title attribute value containing the given word - mySpan, delimited by spaces, and sets 5px solid red border
<script type="text/javascript">
    $(document).ready(function () {
        $('[title~="mySpan"]').css('border', '5px solid red');
    });
</script>

Selects all elements that have title attribute value equal to myTitle or starting with myTitle followed by a hyphen (-) and sets 5px solid red border
<script type="text/javascript">
    $(document).ready(function () {
        $('[title|="myTitle"]').css('border', '5px solid red');
    });
</script>

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

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

jQuery tutorial for beginners

3 comments:

  1. I'm still with you... Keep up the good work...

    ReplyDelete
  2. I am also still with you. You are definitely the best tutorial on the web. Regards Raphael p.s this was shared to me by my friend Amrindarjet Singh and I have shared it with other programmers.

    ReplyDelete
  3. Thank you so much sir, I always give reference to your tutorials to every students or programmers.

    ReplyDelete

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