jquery attr()设置和获取属性值实例教程

下面是针对“jquery attr()设置和获取属性值实例教程”的详细攻略：

1. 什么是 attr() 方法

attr() 方法是 jQuery 提供的一个方法，它用于设置或获取指定元素的属性值。我们可以使用 attr() 方法来操作元素的任何属性，例如，title、class、href 等。

2. 获取元素的属性值

attr() 方法可以用来获取元素的属性值。下面是一个实例：

$(document).ready(function(){
    $("button").click(function(){
        alert($("#test").attr("data-name"));
    });
});

在这个实例中，当我们点击 button 元素时，会弹出 test 元素的 data-name 属性的值。

3. 设置元素的属性值

attr() 方法也可以用来设置元素的属性值。下面是一个实例：

$(document).ready(function(){
    $("button").click(function(){
        $("#test").attr("data-name", "hello");
        alert($("#test").attr("data-name"));
    });
});

在这个实例中，当我们点击 button 元素时，会改变 test 元素的 data-name 属性为 hello，然后弹出 test 元素的 data-name 属性的值，这个值应该是 hello。

4. 注意事项

需要注意的是，使用 attr() 方法来处理自定义属性时，需要添加 data- 前缀，否则可能会发生错误。例如，在上面的示例中，我们使用 data-name 而不是 name 来设置和获取属性值。

此外，如果我们想要判断一个元素是否具有某个属性，可以使用 hasAttribute() 方法来判断。例如：

$(document).ready(function(){
    $("button").click(function(){
        if($("#test").hasAttribute("data-name")){
            alert("test元素具有data-name属性");
        } else {
            alert("test元素没有data-name属性");
        }
    });
});

在这个实例中，当我们点击 button 元素时，会判断 test 元素是否具有 data-name 属性，如果具有，就会弹出“test元素具有data-name属性”，否则会弹出“test元素没有data-name属性”。

5. 总结

以上就是关于 attr() 方法设置和获取属性值的攻略。需要注意的是：在使用自定义属性时，需要添加 data- 前缀，使用 is() 方法判断是否具有属性，具体可参见示例代码。