JQuery Attributes
From w3cyberlearnings
Contents |
attributes
// href attribute <a href="something.jsp">Lovely JPG</a> // href and class attributes <a href="somethinghere.php" class="mylink">Jsp Tutorial</a> // class and id attributes <div class="mycontent" id="dicontent">...</div> // border and cellspacing attributes <table border="1" cellspacing="3">...</table>
get attribute
- Select ALL HTML Elements that have class as their attribute.
<html>
<head>
<title>Select Attribute</title>
<script
type="text/javascript"
src="jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('[class]').css("font-size","28");
});
</script>
</head>
<body>
<p class="myCss">I am doing great!</p>
<p class="myword">This is great work!</p>
<div class="noth">My favorite flowers</div>
<p id="special">My fruits list</p>
</body>
</html>
Example 1
- All the element contain attribute href
$('[href]').css('background-color','blue');
attribute and value
$('[class="myword"]').css("font-size","28");
<p class="myCss">I am doing great!</p>
<p class="myword">This is great work!</p> <!-- has the attribute class and value myword -->
<div class="noth">My favorite flowers</div>
<p id="special">My fruits list</p>
attribute start with
- Select all attributes that have the value start with the letter "m"
$('[href^="m"]').css("font-size","28");
<a href="myworld.php">My World</a>
<a href="jquery.php">Jquery</a>
<a href="mother.php">Mother</a>
attribute value end with
$('[href$="jsp"]').css("font-size","28");
<a href="myworld.php">My World</a>
<a href="jquery.perl">Jquery</a>
<a href="mother.jsp">Mother</a>
attribute value not equal (!=)
$('p:[class!="myword"]').css("font-size","28");
<p class="myCss">I am doing great!</p>
<p class="myword">This is great work!</p>
<div class="noth">My favorite flowers</div>
<p id="special">My fruits list</p>
Related Links
- jQuery Button
- jQuery Effects
- jQuery Attributes
- jQuery Mouse Events
