jQuery DOM操作之属性操作

最新推荐文章于 2022-05-04 01:42:04 发布

Ashe And Wine

最新推荐文章于 2022-05-04 01:42:04 发布

阅读量388

点赞数

分类专栏： web前端文章标签： attr removeAttr

本文链接：https://blog.csdn.net/AsheAndWine/article/details/78149192

版权

25 篇文章 0 订阅

订阅专栏

在jQuery中用，用attr()方法来获取和设置元素属性，用removeAttr()方法来删除元素属性。

已知<body>标签中有如下代码：

<p title="你的爱好是？">我喜欢画画</p>

1、获取属性
如果要获取元素的属性 title ，需要向attr( )方法传递一个参数，即属性名称。

jQuery代码如下：

<script>  
    var p=$("p");//获取<p>节点  
    var p_attr=p.attr("title");//获取<p>节点的属性 title  
    alert(p_attr);  
</script>

运行代码弹出框内容就是标签的title属性中的内容

但是为了代码简洁，接下来都采用下边的方式书写。不再一一定义新变量来获取节点。

上边的获取节点的title属性可以直接写成：

alert($("p").attr("title"));

2、设置属性
假设<body>标签中有如下代码：

<p>我喜欢画画</p>

如果要设置元素属性的title值，也可以使用attr( )方法。不同的是需要传递两个参数。即属性名称和对应的值。
以下代码应该在<script></script>标签中。此处省略

var p_set=$("p").attr("title","你的爱好是？");

此时再获取标签的title属性。依然会得到上述弹框图。

如果需要一次性为同一个元素设置多个属性，可以使用下面的代码来实现：
假设<body>标签中有如下代码：

<p>我喜欢画画</p>

现在将标签分别设置两个属性、title 和 name 。

 $("p").attr({"title":"你的爱好是？","name":"hobby"});

注意前边是属性名，后边是属性值。设置多个属性的时候用花括号{ } 扩着，中间用 "," 隔开。

3、删除属性
假设<body>标签中有如下代码：

<p title="你的爱好是？">我喜欢画画</p>

用removeAttr()方法后，

$("p").removeAttr("title");

运行代码，元素的title属性将被删除，此时元素的HTML结构由

我喜欢画画

变为

我喜欢画画

关注