详谈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 15 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
JS改变页面颜色源码分享
Feb 24 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
微信小程序点击保存图片到本机功能
Dec 13 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程序中的常见漏洞进行攻击
2006/10/09 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
php中define用法实例
2015/07/30 PHP
php二维码生成以及下载实现
2017/09/28 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
bootstarp modal框居中显示的实现代码
2017/02/18 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
基于Python实现的ID3决策树功能示例
2018/01/02 Python
python递归实现快速排序
2018/08/18 Python
python日志模块logbook使用方法
2019/09/19 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
JAVA和C++的区别
2013/10/06 面试题
财务管理专业毕业生求职信范文
2013/09/21 职场文书
2013年高中生自我评价
2013/10/23 职场文书
大学三年的自我评价
2013/12/25 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
鲁迅故里导游词
2015/02/05 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书