zoukankan      html  css  js  c++  java
  • 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”的属性。

      

  • 相关阅读:
    c#驱动操作mongodb辅助类MongoDBHelper
    c#多线程lock无效
    利用Aspose.Words将html转成pdf和将html转成word
    前后端值映射的问题
    本机部署流程详解
    Git 安装配置手册
    js对象数组(JSON) 根据某个共同字段 分组
    jquery中的$.fn的用法
    JSON.parse()与JSON.stringify()的区别
    添加编辑 时 数据不可重复验证
  • 原文地址:https://www.cnblogs.com/wsj-bk/p/4241750.html
Copyright © 2011-2022 走看看