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

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

attr()方法 读操作

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

复制代码 代码如下:

   
   

paragraph 1

paragraph 2

get title

　　运行结果:弹框显示: 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不能修改和的type属性，修改的话会在浏览器报错。
　　这是因为IE浏览器中无法输入属性。

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

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）

2 周前 By 尊渡假赌尊渡假赌尊渡假赌

击败分裂小说需要多长时间？

1 个月前 By DDD

R.E.P.O.最佳图形设置

2 周前 By 尊渡假赌尊渡假赌尊渡假赌

刺客信条阴影：贝壳谜语解决方案

1 周前 By DDD

R.E.P.O.如果您听不到任何人，如何修复音频

2 周前 By 尊渡假赌尊渡假赌尊渡假赌

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7403

15

Java教程

1630

14

CakePHP 教程

1358

52

Laravel 教程

1268

25

PHP教程

1218

29

显示更多