3.4.3 操作属性的相关方法

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.7k 阅读时长 ≈ 2 分钟

3.4.3 操作属性的相关方法

下面这组方法是操作DOM对象属性的通用方法,可以操作DOM对象的通用属性,例如title、alt、src等。

操作Attribute属性的方法

获取Attribute属性的attr方法

方法 描述
attr(name) 访问jQuery 对象里第一个元素的name 属性。如果jQuery 对象里包含的DOM对象都没有name属性,则该方法返回undefined。name可以是title、alt、src、href等属性。

设置Attribute属性的attr方法

方法 描述
attr(map) 用于为jQuery对象里的所有DOM对象同时设置多个属性。其中map是一个形如{name1:value1,name2:value2...}的对象,例如{"src":"logo.jpg"}。
attr(name,value) 用于为jQuery对象里的所有DOM 对象**设置单个属性**。其中name是需要设置的属性名,value是需要设置的属性值。
attr(key, function) 用于为jQuery对象里的所有DOM对象**设置单个属性**,但不是直接给定属性值,而是提供function函数,由function函数来计算各元素的属性值。function函数是一个形如function(index){}的函数,其中index代表各DOM元素在jQuery对象中的索引。

移除Attribute属性的方法

方法 描述
removeAttr(name) 删除jQuery对象里所有DOM对象里的name属性。

操作Property属性的方法

获取Property属性的prop方法

方法 描述
prop(propName) 访问jQuery对象里第一个元素的propName属性。如果jQuery对象里包含的DOM对象都没有propName属性,则返回undefined。name可以是title、alt、src、href等属性。

设置Property属性的prop方法

方法 描述
prop(properties) 用于为jQuery 对象里的所有DOM 对象同时设置多个属性。其中properties是一个形如{name1:value:,name2:value2...}的对象,例如{"src":"logo.jpg"}。
prop(name,value) 用于为jQuery对象里的所有DOM对象设置单个属性。其中name是需要设置的属性名,value是需要设置的属性值。
prop(key, function) 用于为jQuery对象里的所有DOM对象设置单个属性,但不是直接给定属性值,而是提供function函数,由function函数来计算各元素的属性值。 function函数是一个形如function(index){}的函数,其中index代表各DOM元素在jQuery对象中的索引。

删除Property属性的prop方法

方法 描述
removeProp(propName) 删除jQuery对象里所有DOM对象里的propName属性。

attr系列方法和prop系列方法的区别

attr()与prop()系列方法的功能非常相似,在jQuery 1.6之前,attr()系列方法充当了prop()系列方法的功能;在jQuery 1.6之后,attr()系列方法专门用于操作元素的Attribute属性。而prop()系列方法则专门用于操作Property属性。

读者注:这两个系列的方法本书没有说清楚,我也看了网上的一些文章,没有说的很清楚,这两者的区别先放着,后面再更新。

下面是网上的说法,我没有验证:

两者区别

  • 对于HTML元素本身就带有的固有属性在处理时,使用prop方法
  • 对于HTML元素自己自定义的DOM属性在处理时,使用attr方法

适用情况

什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop();
2.有true,false两个属性时使用prop();
3.其他则使用attr();

对于表单元素特有属性的操作时,应该使用prop方法。而对于其他属性操作,则基本靠attr方法就可以解决。

程序示例

下面的程序示范了动态改变页面中<img>元素src属性的情况。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 操作属性的工具方法 </title>
</head>

<body>
    <img/>
    <img/>
    <div>
        <img/>
        <img/>
        <img/>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 获取body下的img元素，并为这些img元素设置src属性值
        $("body>img").attr("src", "logo.jpg")
            .attr("alt", "疯狂Java联盟");
        // 获取div下的img元素，并为这些img元素设置src属性值
        $("div>img").prop("src", function (index) {
            return index + 1 + ".gif";
        });
    </script>
</body>

</html>