Sql server, .net and c# video tutorial: jQuery attribute value selector

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>

<scriptsrc="Scripts/jquery-1.11.2.js"></script>

<scripttype="text/javascript">

$(document).ready(function () {

$('[title="div1Title"]').css('border', '5px solid red');

});

</script>

</head>

<body>

<divtitle="div1Title">

DIV 1

</div>

<br/>

<divtitle="div2Title">

DIV 2

</div>

<ptitle="myTitle-paragraph">

This is a paragraph

</p>

<ptitle="myTitleHeading">

This is a paragraph

</p>

<spantitle="div1Title">

SAPN 1

</span>

<spantitle="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

<scripttype="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

<scripttype="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

<scripttype="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

<scripttype="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

<scripttype="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

<scripttype="text/javascript">

$(document).ready(function () {

$('[title$="Heading"]').css('border', '5px solid red');

});

</script>

jQuery tutorial for beginners

Email This BlogThis! Share to X Share to Facebook Share to Pinterest

3 comments:

John Pageler July 29, 2015 at 10:08 PM
I'm still with you... Keep up the good work...
Reply Delete
Replies
Unknown April 11, 2017 at 9:34 PM
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.
Reply Delete
Replies
AnonymousNovember 21, 2020 at 9:17 PM
Thank you so much sir, I always give reference to your tutorials to every students or programmers.
Reply Delete
Replies