juqery笔记 jquery操纵DOM元素属性 attr()
jQuery操纵元素属性方法:
attr():读或者写匹配元素的属性值。
removeAttr():从匹配的元素中溢出指定的属性。
attr()方法 读操作
attr()读操作,读取的是匹配元素中第一个元素的指定属性值。
格式:.attr(attributeName),返回值类型:String,读取不存在的属性会返回undefined。
注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值。
例子:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script type="text/javascript" src="/jquery/jquery.js"></script> 5 <script type="text/javascript"> 6 $(document).ready(function () { 7 $("button").click(function () { 8 alert($("p").attr("title"));//获取属性 9 // this code can only get the first element's attribute. 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <p title="title1">paragraph 1</p> 16 <p title="title2">paragraph 2</p> 17 <br/> 18 <button>get title</button> 19 </body> 20 </html>
运行结果:弹框显示: title1.
想要分别获取每一个元素的属性,需要使用jQuery的循环结构,比如.each()或.map()方法.
上面的例子可以改成:
<script type="text/javascript"> $(document).ready(function (){ $("button").click(function(){ //get attribute for every element in selection. $("p").each(function () { alert($(this).attr("title")); }); }); }); </script>
即可分别获取每个元素的属性.
attr()方法 写操作
attr()写操作,为匹配元素的一个或多个属性赋值。
一般格式:.attr(attributeName,value),纪委属性设置value。
返回值类型:jQuery,也即支持链式方法调用。
执行操作的时候,如果指定的属性名不存在,将会增加一个改名字的属性,即增加自定义属性,
起名为属性名,其值为value值。
写属性是为匹配集合中的每一个元素都进行操作的,例子:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script type="text/javascript" src="/jquery/jquery.js"></script> 5 <script type="text/javascript"> 6 $(document).ready(function(){ 7 $("#button1").click(function(){ 8 $("p").attr("title","Hello World"); 9 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <input type="button" id="button1" value="button1"></input> 16 <p>This is a paragraph.</p> 17 <div>This is a div.</div> 18 <p>This is another paragraph.</p> 19 <div>This is another div.</div> 20 </body> 21 </html>
点击按钮之后所有的p都加上了title="Hello World”的属性。