码迷,mamicode.com
首页 > Web开发 > 详细

juqery笔记 jquery操纵DOM元素属性 attr()

时间:2015-01-22 17:15:45      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:

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”的属性。

 

 

  

 

juqery笔记 jquery操纵DOM元素属性 attr()

标签:

原文地址:http://www.cnblogs.com/wsj-bk/p/4241750.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!