详谈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随机排序(随即出牌)
Sep 17 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
详解webpack 热更新优化
Sep 13 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
JS获取html对象的几种方式介绍
2013/12/05 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
Python for i in range ()用法详解
2020/09/18 Python
Python 创建TCP服务器的方法
2020/07/28 Python
python+opencv实现车道线检测
2021/02/19 Python
敬老院院长事迹材料
2014/05/21 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
安全保证书怎么写
2015/02/28 职场文书
暑假安全保证书
2015/02/28 职场文书
留学推荐信怎么写
2015/03/26 职场文书
环保建议书作文300字
2015/09/14 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
PHP使用QR Code生成二维码实例
2021/07/07 PHP