首页  >  文章  >  web前端  >  详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法_jquery

详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法_jquery

WBOY
WBOY原创
2016-05-16 16:18:251155浏览

  jQuery中操纵元素属性的方法:
  attr(): 读或者写匹配元素的属性值.
  removeAttr(): 从匹配的元素中移除指定的属性.

attr()方法 读操作

  attr()读操作. 读取的是匹配元素中第一个元素的指定属性值.
  格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined.
 
  注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值.
  看例子:

复制代码 代码如下:




   
   


paragraph 1


paragraph 2







  运行结果:弹框显示: title1.
 
  想要分别获取每一个元素的属性,需要使用jQuery的循环结构,比如.each()或.map()方法.
  上面的例子可以改成:

复制代码 代码如下:


  即可分别获取每个元素的属性.

attr()方法 写操作

  attr()写操作. 为匹配元素的一个或多个属性赋值.
  一般格式: .attr(attributeName, value), 即为属性设置value.
  返回值类型:jQuery.也即支持链式方法调用.
 
  执行写操作的时候,如果指定的属性名不存在,将会增加一个该名字的属性,即增加自定义属性,其名为属性名,其值为value值.
 
  写属性是为匹配集合中的每一个元素都进行操作的,见例子:

复制代码 代码如下:




   
   



This is a paragraph.


This is a div.

This is another paragraph.


This is another div.




 
  点击按钮之后所有的p都加上了title="Hello World”的属性.

  写操作还有以下两种格式:
  .attr(attributes)和.attr(attributeName, function).
  下面分别介绍.

.attr(attributes):

  这里attributes类型是PlainObject,可以用于一次性设置多个属性.
  什么是PlainObject呢,简单理解就是大括号包围的键值对序列.可以参考问后链接说明.
  键和值之间用冒号(:)分隔,每个键值对之间用逗号(,)分隔.
 
  注意: 设置多个属性值时,属性名的引号是可选的(可以有,也可以没有).但是class属性是个例外,必须加上引号.
 
  例子:

复制代码 代码如下:




   
   




This is a paragraph.


This is a div.

This is another paragraph.


This is another div.



  点击两个按钮之后,元素变为:

  其中

的hello是一个新增的自定义属性,其value为World.
 
.attr(attributeName, function(index, oldValue)):
  使用一个function来设置属性值.function的第一个参数是index,第二个参数是该属性之前的值.
  看例子:

复制代码 代码如下:





div {
颜色:蓝色;
}
跨度{
颜色:红色;
}
b {
字体粗细:加粗;
}

<脚本类型=“text/javascript”src=“/jquery/jquery.js”>

$(文档).ready(function () {
$("div")
.attr("id", function (index, oldAttr) {
if (oldAttr) {
返回“div-id”索引oldAttr;
} 其他 {
返回“div-id”索引;
}
})
.each(函数 () {
$("span", this).html("(id = '" this.id "')");
});
});




第一个

第二个



上面的例子,对应的页面结果如下:

 
  当使用一个方法来设置属性值的时候,如果这个设置的函数没有返回值,或者返回了undefined,当前的值是不会被改变的。
  即操作会被忽略。
  还是上面的例子,attr()其中的函数返回未定义:
  如下:

复制代码代码如下:


    $(文档).ready(function () {
        $("div").attr("id", function (index, oldAttr) {
            返回未定义;
        }).each(函数 () {
            $("span", this).html("(id = '" this.id "')");
        });
    });


 
  返回的页面效果如下:

即不进行任何修改操作,还是保留原来的属性值。
 
  注意:jQuery不能修改

removeAttr() 方法

:删除匹配元素集合中每个元素的指定属性。
  removeAttr() 方法但是调用的是 JavaScript 的removeAttribute() 方法,它可以用 jQuery 对象直接调用,并且它考虑到并处理各个浏览器上的属性名称可能不统一的问题。
  示例:

复制代码代码如下:




    <脚本类型=“text/javascript”src=“/jquery/jquery.js”>
   
        $(文档).ready(function () {
            $("input[type=button]").click(function () {
                $("div").removeAttr("标题");
            });
        });
   


输入>




 
  点击按钮后,
的title属性会被删除.
 
  注意: 用removeAttr()移除onclick在IE6-8上都不会起作用,为了避免这个问题,应该使用.prop()方法.
  比如:
复制代码 代码如下:

$element.prop( "onclick", null );
console.log( "onclick property: ", $element[ 0 ].onclick );
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn