详细解释jQuery如何操作DOM元素的属性attr()和removeAtrr()

jQuery :attr():中操作元素属性的方法读取或写入匹配元素的属性值。removeAttr():从匹配的元素中移除指定的属性。

Attr()方法读取操作。

Attr()读取操作。读取匹配元素中第一个元素的指定属性值。格式是：attr(attributeName)，返回值类型为：String。读取不存在的属性将返回undefined。注意，选择器的选择结果可以是集合，这里只获取集合中第一个元素的属性值。参见示例3360。

复制代码如下：DOCTYPE htmlhtmlhead脚本类型=' text/JavaScript ' src=' http :/jquery/jquery . js '/脚本脚本类型='text/javascript' $(document)。ready(function () { $('button '))。click(function () { alert($('p '))。attr(' title ')；//获取属性//这段代码只能获取第一个元素的属性。});});/script/head dyp title=' title 1 '段落1/pp title='title2 '段落2/pbr/button get title/button/body/html

运行结果：显示：标题1。要分别获取每个元素的属性，需要使用jQuery的循环结构，例如。每个()或。map()方法。上面的例子可以改成：

复制代码如下：脚本类型=' text/JavaScript' $(文档)。ready (function () {$ ('button '))。单击(function () {//)。获取选择中每个元素的属性。$('p ')。每个(函数(){ alert($(this))。attr(' title ')；});});});/script

您可以分别获取每个元素的属性。

Attr()方法写操作。

Attr()写操作。为匹配元素的一个或多个属性赋值。一般格式是：attr(attributeName，value)，即为属性设置值。返回值类型为：jQuery。也就是说，支持链式方法调用。在写入操作过程中，如果指定的属性名称不存在，则会添加一个具有该名称的属性，即添加一个名为attribute name的用户定义属性。

复制代码如下：DOCTYPE htmlhtmlhead脚本类型=' text/JavaScript ' src=' http :/jquery/jquery . js '/脚本脚本类型='text/javascript' $(document)。ready(function() { $('#button1 '))。单击(function(){ $('p '))。attr('title '，' Hello World ')；});});/script/head dyinput type=' button ' id=' button 1 ' value=' button 1 '/input这是一个段落。/pdiv这是一个div。/divp这是另一段。div这是另一个部门。/div/body/html点击按钮后，所有的p都添加了title='Hello World '的属性。

还有两种书写格式：attr(属性)和。attr(attributeName，function)，这将在下面单独介绍。属性：

这里的属性类型是PlainObject，可以一次设置多个属性。什么是PlainObject只是一个由大括号包围的键值对序列。提问后可以参考链接描述。键和值用冒号(:)分隔，每个键-值对用逗号(，)分隔。请注意，在：中设置多个属性值时，属性名称的引号是可选的(带或不带)。然而，

复制代码如下：DOCTYPE htmlhtmlhead脚本类型=' text/JavaScript ' src=' http :/jquery/jquery . js '/脚本脚本类型='text/javascript' $(document)。ready(function () { $('#button1 '))。单击(function () { $('p '))。attr('title '，' Hello World ')；});$('#button2 ')。单击(function () { $('div ')。attr({'title': '有些标题为div '，' hello ' : ' World ' })；});});/script/head dyinput type=' button ' id=' button 1 ' value=' button 1 '/input type=' button ' id=' button 2 ' value=' button 2 '/input这是一个段落。/pdiv这是一个div。/divp这是另一段。div这是另一个分区。/div/body/html

单击两个按钮后，元素变为：

div的Hello是一个新添加的自定义属性，它的值是world.attr (attributename，函数(索引，旧值)):使用函数设置属性值。函数的第一个参数是index，第二个参数是属性的前一个值。参见示例3360。

复制代码代码如下：DOCTYPE html html head style div { color : blue；} span { color : redb { font-weight : }更粗；}/style脚本类型=' text/JavaScript ' src=' http :/jquery/jquery。js '/script脚本类型=' text/JavaScript ' $(文档)。ready(function () {$('div ')).attr('id '，函数(index，oldAttr){ if(oldAttr){ return ' div-id ' index oldAttr；} else {return 'div-id '索引；}}).每个（函数(){$('span '，this).html('(id=' this。id ' ')')；});});/script/head dydiv id=' someId '第零个跨度/跨度/div第一个跨度/跨度/div第二个跨度/跨度/div/body/html

上面的例子，对应的页面结果如下：

当使用一个方法来设定属性值的时候，如果这个设置的功能没有返回值，或者返回了未定义，当前的值是不会被改变的。即操作会被忽略。还是上面的例子，attr()其中的功能返回未定义d:如下：

复制代码代码如下：脚本类型=' text/JavaScript ' $(文档)。ready(function () { $('div ')).attr('id '，函数(index，oldAttr){ return undefined；}).每个（函数(){ $('span '，this).html('(id=' this。id ' ')')；});});/script返回的页面效果如下：

即没有进行任何修改操作，还是保持原来的属性值。注意：jQuery不能修改投入和按钮的类型属性，如果修改会在浏览器报错。这是因为工业管理学(工业工程)浏览器中不能修改类型属性。

removeAttr()方法

移除匹配元素集合中每一个元素的指定属性移除属性()方法调用的是Java脚本语言的removeAttribute()方法，但是它能用框架对象直接调用，并且它考虑到并处理了各个浏览器上的属性名称可能不统一的问题。例子：

复制代码代码如下：DOCTYPE htmlhtmlhead脚本类型=' text/JAVAScript ' src=' http :/jquery/jquery。js /脚本脚本类型='text/javascript' $(文档).ready(function(){ $(' input[type=button]).单击(函数(){ $(“div”).移除attr(' title ')；});});/script/head dyinput type=' button ' value=' ClickMe '/input div title=' hello ' zero/div/body/html点击按钮后，div的标题属性会被删除。注意： 用removeAttr()移除单击事件在IE6-8上都不会起作用，为了避免这个问题，应该使用。道具()方法。比如：复制代码代码如下：$element.prop('onclick '，null)；控制台。日志(' onclick属性： '，$element[ 0 ]).onclick)；