详谈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 04 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
JS实现页面数据懒加载
Feb 13 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 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
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
Vue中遍历数组的新方法实例详解
2019/07/21 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
python创建和使用字典实例详解
2013/11/01 Python
Python创建日历实例
2014/08/21 Python
python中ConfigParse模块的用法
2014/09/29 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
python与js主要区别点总结
2020/09/13 Python
python 实现控制鼠标键盘
2020/11/27 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
导航工程专业自荐信
2014/09/02 职场文书
2016十一国庆节感言
2015/12/09 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android