1. attr( properties ):-Set a key/value object as properties to all matched elements.
Syntax:-selector.attr({property1:value1, property2:value2})
Example:-
<html>
<head>
<title>The Selecter Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("img").attr({
src: "/images/jquery.jpg",
title: "jQuery",
alt: "jQuery Logo"
});
});
</script>
</head>
<body>
<div class = "division" id="divid">
<p>Following is the logo of jQuery</p>
<img src = "wrong src" title = "none" alt = "none" />
</div>
</body>
</html>
2. attr( key, fn ):-Set a single property to a computed value, on all matched elements.
Syntax:-selector.attr( key, func )
Example:-
<html>
<head>
<title>The Selecter Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("table").attr("border", function(index) {
return "4px";
})
});
</script>
</head>
<body>
<table>
<tr><td>This is first table</td></tr>
</table>
<table>
<tr><td>This is second table</td></tr>
</table>
<table>
<tr><td>This is third table</td></tr>
</table>
</body>
</html>
3. removeAttr( name ):-Remove an attribute from each of the matched elements.
Syntax:-selector.removeAttr( name )
Example:-
<html>
<head>
<title>The Selecter Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("table").removeAttr("border");
});
</script>
</head>
<body>
<table border = "2">
<tr><td>This is first table</td></tr>
</table>
<table border = "3">
<tr><td>This is second table</td></tr>
</table>
<table border = "4">
<tr><td>This is third table</td></tr>
</table>
</body>
</html>
4. hasClass( class ):-Returns true if the specified class is present on at least one of the set of
matched elements.
Syntax:-selector.hasClass( class )
Example:-
<html>
<head>
<title>The Selecter Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#result1").text( $("p#pid1").hasClass("red") );
$("#result2").text( $("p#pid2").hasClass("red") );
});
</script>
<style>
.red { color:red; }
.green { color:green; }
</style>
</head>
<body>
<p class = "red" id = "pid1">This is first paragraph.</p>
<p class = "green" id = "pid2">This is second paragraph.</p>
<div id = "result1"></div>
<div id = "result2"></div>
</body>
</html>
5. toggleClass( class ):-Adds the specified class if it is not present, removes the specified class if it is present.
Syntax:- selector.toggleClass( class )
Example:-
<html>
<head>
<title>The Selecter Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("p#pid").click(function () {
$(this).toggleClass("red");
});
});
</script>
<style>
.red { color:red; }
</style>
</head>
<body>
<p class = "green">Click following line to see the result</p>
<p class = "red" id = "pid">This is first paragraph.</p>
</body>
</html>
0 Comment(s)