首页 > 编程笔记 > JavaScript笔记 > jQuery DOM操作

jQuery attr()方法获取和设置属性

属性操作，指的是使用 jQuery 来操作一个元素的 HTML 属性。注意，这里说的属性操作，指的是 HTML 属性，而不是 CSS 属性。

像下面有一个 input 元素的属性操作，指的就是操作它的 id、type、value 等，其他元素也类似。 
<input id="btn" type="button" value="提交"/>

在 jQuery 中，对于 HTML 属性的操作共有以下4种。
本节教程先来介绍前 2 种，后两种下节介绍。

jQuery attr()方法获取属性

在 jQuery 中，我们可以使用 attr() 方法来获取某一个元素的 HTML 属性值。

语法：

$().attr("属性名")

获取某个元素的 HTML 属性值，一般都是通过属性名来找到该属性对应的值。

举例： 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn_src").click(function () {
                alert($("img").attr("src"));
            });
            $("#btn_alt").click(function () {
                alert($("img").attr("alt"));
            });
        })
    </script>
</head>
<body>
    <img src="img/jquery.png" alt="jquery标志"/><br />
    <input id="btn_src" type="button" value="获取src属性值"/>
    <input id="btn_alt" type="button" value="获取alt属性值"/>
</body>
</html>
预览效果如图 1 所示。
获取属性的效果
图 1：获取属性的效果

在这个例子中，我们使用 attr() 方法来获取 img 元素的 src 和 alt 两个属性的取值。

jQuery attr()方法设置属性

在 jQuery 中，设置某一个元素的 HTML 属性值，我们用的也是 attr() 方法。

语法：

//设置一个属性
$().attr("属性", "取值")
//设置多个属性
$().attr({"属性1": "取值1", "属性2":"取值2", …, "属性n":"取值n"})


对于设置属性，jQuery 有两种语法形式：一种是“设置一个属性”，另一种是“设置多个属性”。对于设置多个属性的语法，我们传入 attr() 方法的是一个包含“键值对”的对象。使用这种语法可以轻松地扩展，以便一次性修改多个属性。

举例：设置一个属性 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var flag = true;
            $("#btn").click(function(){
                if(flag){
                    $("#pic").attr("src", "img/2.png");
                    flag = false;
                }else{
                    $("#pic").attr("src", "img/1.png");
                    flag = true;  
                }
            });
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="修改" /><br/>
    <img id="pic" src="img/1.png" />
</body>
</html>
默认情况下，预览效果如图 2 所示。
默认效果
图 2：默认效果

我们点击【修改】按钮后，预览效果如图 3 所示。
点击按钮后的效果
图 3：点击按钮后的效果

这里使用一个布尔变量 flag 来标识两种状态，使两张图片可以来回切换。

举例：设置多个属性 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var flag=true;
            $("#btn").click(function () {
                if (flag) {
                    $("#pic").attr({"src":"img/2.png","alt":"漩涡香燐","title":"漩涡香燐"});
                    flag=alse;
                }else{
                    $("#pic").attr({"src":"img/1.png","alt":"日向雏田","title":"日向雏田"});
                    flag=true;
                }
            });
        })
    </script>
</head>
<body>
    <input id="btn" type="button" value="修改" /><br/>
    <img id="pic" src="img/1.png" alt="日向雏田" title="日向雏田"/>
</body>
</html>
默认情况下，预览效果如图 4 所示。
默认效果
图 4：默认效果

我们点击【修改】按钮后，预览效果如图 5 所示。
点击按钮后的效果
图 5：点击按钮后的效果

所有教程

优秀文章