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


Posted in Javascript onJanuary 22, 2015

jQuery中操纵元素属性的方法:

attr(): 读或者写匹配元素的属性值.

removeAttr(): 从匹配的元素中移除指定的属性.

attr()方法 读操作

attr()读操作. 读取的是匹配元素中第一个元素的指定属性值.

格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined.
 

注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值.

看例子:

<!DOCTYPE html>

<html>

<head>

    <script type="text/javascript" src="/jquery/jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("button").click(function () {

                alert($("p").attr("title"));//获取属性

                // this code can only get the first element's attribute.

            });

        });

    </script>

</head>

<body>

<p title="title1">paragraph 1</p>

<p title="title2">paragraph 2</p>

<br/>

<button>get title</button>

</body>

</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值.
 

写属性是为匹配集合中的每一个元素都进行操作的,见例子:

<!DOCTYPE html>

<html>

<head>

    <script type="text/javascript" src="/jquery/jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $("#button1").click(function(){

                $("p").attr("title","Hello World");

            });

        });

    </script>

</head>

<body>

<input type="button" id="button1" value="button1"></input>

<p>This is a paragraph.</p>

<div>This is a div.</div>

<p>This is another paragraph.</p>

<div>This is another div.</div>

</body>

</html>

 

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

写操作还有以下两种格式:

.attr(attributes)和.attr(attributeName, function).

下面分别介绍.

.attr(attributes):

这里attributes类型是PlainObject,可以用于一次性设置多个属性.

什么是PlainObject呢,简单理解就是大括号包围的键值对序列.可以参考问后链接说明.

键和值之间用冒号(:)分隔,每个键值对之间用逗号(,)分隔.
 

注意: 设置多个属性值时,属性名的引号是可选的(可以有,也可以没有).但是class属性是个例外,必须加上引号.
 

例子:

<!DOCTYPE html>

<html>

<head>

    <script type="text/javascript" src="/jquery/jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#button1").click(function () {

                $("p").attr("title", "Hello World");

            });

            $("#button2").click(function () {

                $("div").attr({"title": "some title for div", "hello": "World"});

            });

        });

    </script>

</head>

<body>

<input type="button" id="button1" value="button1"></input>

<input type="button" id="button2" value="button2"></input>

<p>This is a paragraph.</p>

<div>This is a div.</div>

<p>This is another paragraph.</p>

<div>This is another div.</div>

</body>

</html>

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

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

其中<div>的hello是一个新增的自定义属性,其value为World.
 
.attr(attributeName, function(index, oldValue)):

使用一个function来设置属性值.function的第一个参数是index,第二个参数是该属性之前的值.

看例子:

<!DOCTYPE html>

<html>

<head>

<style>

div {

color: blue;

}

span {

color: red;

}

b {

font-weight: bolder;

}

</style>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function () {

$("div")

.attr("id", function (index, oldAttr) {

if (oldAttr) {

return "div-id" + index + oldAttr;

} else {

return "div-id" + index;

}

})

.each(function () {

$("span", this).html("(id = '<b>" + this.id + "</b>')");

});

});

</script>

</head>

<body>

<div id="someId">Zero-th <span></span></div>

<div>First <span></span></div>

<div>Second <span></span></div>

</body>

</html>

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

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

当使用一个方法来设定属性值的时候,如果这个set的function没有返回值,或者返回了undefined,当前的值是不会被改变的.

即操作会被忽略.

还是上面的例子,attr()其中的function返回undefined:

如下:

<script type="text/javascript">

    $(document).ready(function () {

        $("div").attr("id", function (index, oldAttr) {

            return undefined;

        }).each(function () {

            $("span", this).html("(id = '<b>" + this.id + "</b>')");

        });

    });

</script>

 

返回的页面效果如下:

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

即没有进行任何修改操作,还是保持原来的属性值.
 

注意:jQuery不能修改<input>和<button>的type属性,如果修改会在浏览器报错.

这是因为IE浏览器中不能修改type属性.

removeAttr()方法

移除匹配元素集合中每一个元素的指定属性.

removeAttr()方法调用的是JavaScript的removeAttribute()方法,但是它能用jQuery对象直接调用,并且它考虑到并处理了各个浏览器上的属性名称可能不统一的问题.

例子:

<!DOCTYPE html>

<html>

<head>

    <script type="text/javascript" src="/jquery/jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("input[type=button]").click(function () {

                $("div").removeAttr("title");

            });

        });

    </script>

</head>

<body>

<input type="button" value="ClickMe"></input>

<div title="hello">Zero</div>

</body>

</html>

 

点击按钮后,<div>的title属性会被删除.
 

注意: 用removeAttr()移除onclick在IE6-8上都不会起作用,为了避免这个问题,应该使用.prop()方法.

比如:

$element.prop( "onclick", null );

console.log( "onclick property: ", $element[ 0 ].onclick );
Javascript 相关文章推荐
javascript数组使用调用方法汇总
Dec 08 Javascript
csdn 批量接受好友邀请
Feb 19 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
再探JavaScript作用域
Sep 24 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
JS简单获得节点元素的方法示例
Feb 10 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
Angularjs基础知识及示例汇总
Jan 22 #Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 #Javascript
使用jquery操作session方法分享
Jan 22 #Javascript
jQuery实现“扫码阅读”功能
Jan 21 #Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 #Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 #Javascript
JavaScript的内存释放问题详解
Jan 21 #Javascript
You might like
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
php调用C代码的实现方法
2014/03/11 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
python3实现表白神器
2019/04/09 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
python 获取计算机的网卡信息
2021/02/18 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
常见的软件开发流程有哪些
2015/11/14 面试题
学生评语大全
2014/04/18 职场文书
社区文化建设方案
2014/05/02 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
600字作文之感受大自然
2019/11/27 职场文书
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
redis数据结构之压缩列表
2022/03/21 Redis
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript