JavaScript Tutorial/jQuery/attr
Содержание
- 1 Add attribute and clear attribute
- 2 attr(key, fn)
- 3 attr(key, value) set a single property to a value, on all matched elements.
- 4 attr(name): access a property on the first matched element.
- 5 Disable all form input controls
- 6 Disable input control
- 7 Finds the title attribute of the first in the page.
- 8 Get attribute from tag
- 9 Get input control type
- 10 Set attribute with the returned function value
- 11 Set Image URL title alt
- 12 Sets src attribute from title attribute on the image.
Add attribute and clear attribute
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
$(document).ready(
function() { $("div").hover( function() { $(this).attr("id", "justAdd"); $(this).text("This element\"s ID is: " + $(this).attr("id")); }, function() { $(this).attr("id", ""); $(this).text("This element\"s ID has been removed."); } ); }
); $("a").removeAttr("title");
</script> <style type="text/css">
div {
width: 350px; padding: 10px; border: 1px solid rgb(200, 200, 200); background: #93cdf9; margin: 5px;
} div#justAdd {
background: #6faddd;
}
</style> </head> <body>
Mouse over to change this element"s id.
</body>
</html></source>
attr(key, fn)
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").attr("id", function (arr) { return "div-id" + arr; }) .each(function () { $("span", this).html("(ID = "" + this.id + "")"); }); }); </script> </head> <body> <body>
A
B
C
</body>
</html></source>
attr(key, value) set a single property to a value, on all matched elements.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button:gt(1)").attr("disabled","disabled"); }); </script> </head> <body> <body> <button>0th Button</button> <button>1st Button</button> <button>2nd Button</button> </body>
</html></source>
attr(name): access a property on the first matched element.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var title = $("em").attr("title"); $("div").text(title); }); </script> </head> <body> <body>
</body>
</html></source>
Disable all form input controls
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").attr("disabled", "disabled"); }); </script> </head> <body> <body>
<input type="checkbox" name="a" />
A
<input type="checkbox" name="b" />
B
<input type="checkbox" name="c" checked="checked" />
C
</body>
</html></source>
Disable input control
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input").attr("disabled", "disabled");
}); </script> </head> <body> <form> <input type="checkbox" name="a" /> A <input type="checkbox" name="b" /> B <input type="checkbox" name="c" checked="checked" /> C </form>
</body>
</html></source>
Finds the title attribute of the first in the page.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var title = $("em").attr("title"); $("div").text(title); }); </script> </head> <body> <body>
</body>
</html></source>
Get attribute from tag
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var title = $("em").attr("title"); $("div").text(title); }); </script> </head> <body> em
</body>
</html></source>
Get input control type
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#exampleTable").find("td").each(function(i, el) { var inputEl = $(el).children().get(0); $(el).before("<td>Added " + $(inputEl).attr("type") + "</td>"); }) }); </script> </head> <body> <form>
Type |
Element |
---|---|
<input type="button" value="Input Button"/> |
|
<input type="checkbox" /> |
</form>
</body>
</html></source>
Set attribute with the returned function value
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
$(document).ready(
function() { $("li").attr( "id", function() { return "tmp" + $(this).text(); } ); }
);
</script> <style type="text/css">
ul {
list-style: none; padding: 0; margin: 0;
} ul li {
margin: 3px; padding: 3px;
} li#tmpA {
background: #d7b05b;
} li#tmpB {
background: #d3988a;
} li#tmpC {
background: #8ad3a6;
} li#tmpD {
background: #8aa9d3;
}
</style> </head> <body>
- A
- B
- C
- D
</body>
</html></source>
Set Image URL title alt
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("img").attr({ src: "http://wbex.ru/style/logo.png", title: "wbex.ru", alt: "Logo" }); $("div").text($("img").attr("alt")); }); </script> </head> <body> <body> <img />
</body>
</html></source>
Sets src attribute from title attribute on the image.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("img").attr("src", function() { return "/images/" + this.title; }); }); </script> </head> <body> <body> <img title="a.gif"/> </body>
</html></source>