在jQuery中用,用attr()方法来获取和设置元素属性,用removeAttr()方法来删除元素属性。
运行代码弹出框内容就是<p>标签的title属性中的内容
如果要设置<p>元素属性的title值,也可以使用attr( )方法。不同的是需要传递两个参数。即属性名称和对应的值。
以下代码应该在<script></script>标签中。 此处省略
如果需要一次性为同一个元素设置多个属性,可以使用下面的代码来实现:
假设<body>标签中有如下代码:
运行代码,<p>元素的title属性将被删除,此时<p>元素的HTML结构由
已知<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>