jQuery DOM操作之属性操作

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

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

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


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

jQuery代码如下:

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

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


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

上边的获取<p>节点的title属性可以直接写成:

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


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

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

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

var p_set=$("p").attr("title","你的爱好是?");
此时再获取<p>标签的title属性。依然会得到上述弹框图。

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

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


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

 $("p").attr({"title":"你的爱好是?","name":"hobby"});
注意 前边是 属性名,后边是属性值。设置多个属性的时候用花括号{ } 扩着,中间用 ","  隔开。

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

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

用removeAttr()方法后,

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

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

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

变为

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


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值