先學30天jQuery再說之属性操作 - attr() 方法和prop()（part1）

本文链接：https://blog.youkuaiyun.com/weixin_41406727/article/details/88864331

本文详细介绍了jQuery中的attr()和prop()方法，包括它们的使用方式、注意事项及主要区别。attr()用于设置或获取元素的HTML属性，而prop()则用于处理DOM元素的属性。文中通过多个示例展示了这两个方法的用法，并提醒读者在处理特定属性如checked、selected等时应注意的兼容性和限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

attr() 方法

看看今天要學的目錄：

.attr( attributeName )
1. .attr( attributeName )
.attr( attributeName, value )
1. .attr( attributeName, value )
2. .attr( attributes )
3. .attr( attributeName, function(index, attr) )

正文：

定义和用法

attr() 方法设置或返回被选元素的属性值。

根据该方法不同的参数，其工作方式也有所差异。

使用 jQuery的 .attr() 方法得到了一个元素的属性值主要有两个好处：

方便：它可以直接被jQuery对象访问并且链式调用其他jQuery方法。
浏览器兼容：一些属性在不同浏览器中得到不同的值。甚至在同一个浏览器的不同版本中。 .attr() 方法减少了兼容性问题。

注意: 除少数属性意外，属性值都是字符串，如value和tabindex。

注意: 试图改变通过HTML创建的，或已经在HTML文档中的input元素的type特性（attribute）或属性（property），在Internet Explorer 6, 7, or 8下将会抛出一个错误。

在jQuery 1.6中,当属性没有被设置时候，.attr()方法将返回undefined。另外，.attr()不应该用在普通的对象，数组，窗口（window）或文件（document）上。若要检索和更改DOM属性,比如元素的checked, selected, 或 disabled状态，请使用.prop()方法。

返回属性值

返回被选元素的属性值。

语法

$(selector).attr(attribute)

參數

attribute

规定要获取其值的属性。

设置属性/值

设置被选元素的属性和值。

语法

$(selector).attr(attribute,value)

参数	描述
attribute	规定属性的名称。
value	规定属性的值。

设置多个属性/值对

为被选元素设置一个以上的属性和值。

语法

$(selector).attr({attribute:value, attribute:value ...})

参数	描述
attribute:value	规定一个或多个属性/值对。

設置函數

語法

$(selector).attr( attributeName, function(index, attr) )

参数	描述
attributeName（string）	設置值得属性名。
function(index,attr)(function)	函數返回用來設置的值，this指向當前元素。接受index參數表示元素在匹配集合中的索引位置和html參數表示元素上原來的HTML內容

栗子一：.attr( attributeName )

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">