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"]')
Selects all elements with title attribute and sets 5px solid red border
Selects all div elements with title attribute and sets 5px solid red border
Selects all elements with title attribute value - div1Title, and sets 5px solid red border
Selects all div elements with title attribute value - div1Title, and sets 5px solid red border
Selects all div elements with both title and style attributes, and sets 5px solid black border
Selects all div elements with title attribute value - divTitle, and style attribute value - background-color:red, and sets 5px solid black border
Selects all div elements with either title or style attributes, and sets 5px solid black border
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>
</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>
At some reason the // style="background-color:red" // from
ReplyDelete$('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.
Hello Venkat, Could you please upload vedio tutorials for Angular Js, knockout Js etc.
ReplyDeleteThank You
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
ReplyDeleteHello 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....
ReplyDeletehello 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.
ReplyDeleteHi Venkat, thanks for your videos. This is really helping me alot.
ReplyDeleteFrom 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');