JQuery Attributes

From CoderLearner
Jump to: navigation, search

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>

<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>