编程 Javascript

详谈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 );

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

代码精简的可以实现元素圆角的js函数

Jul 21 Javascript

javascript 表单验证常见正则

Sep 28 Javascript

javascript面向对象之共享成员属性与方法及prototype关键字用法

Jan 13 Javascript

轻松实现JavaScript图片切换

Jan 12 Javascript

javaScript嗅探执行神器-sniffer.js

Feb 14 Javascript

JavaScript脚本语言是什么_动力节点Java学院整理

Jun 26 Javascript

详解如何提高 webpack 构建 Vue 项目的速度

Jul 03 Javascript

基于zTree树形菜单的使用实例

Dec 25 Javascript

vue vuex vue-rouert后台项目——权限路由（适合初学）

Dec 29 Javascript

用jquery获取select标签中选中的option值及文本的示例

Jan 25 jQuery

vue-test-utils初使用详解

May 23 Javascript

js实现日历

Nov 07 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