JQueryDOM之属性操作
程序员文章站
2022-06-15 14:55:42
...
属性操作
关于属性操作，我们这里来讲两个方法：attr()和removeAttr()
attr(): 能够获取元素属性、也能够设置元素属性
当attr(para1)方法有个参数时候用于获得当前元素的para1的属性值
当attr(para1,attrValue)有两个参数时候设置当前元素的属性名为para1的属性值为attrValue
例：
$("p").attr("title")：该示例用于获得p元素的title属性值
$("p").attr("title","你最喜欢的水果")：该示例设置p元素的title属性值为"你最喜欢的水果"
如果一次设置多个属性值可以使用“名/值”对形式
例：
$("p").attr({"title":"你最喜欢的水果","name":"水果"}) （该示例一次设置两个属性值，可设置多个属性值）
removeAttr()： 用于删除特定的属性，方法是在参数中指定属性名
$("p").removeAttr("name"); 该方法就是移除p元素的name属性
案例源码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM元素的属性操作</title>
<script src="../js/jquery-3.1.1.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
//获取设置属性值用attr方法
//获取ul中第一个li元素的title属性
alert($("ul li:first").attr("title"));
//给p标签添加一个title属性和id属性
//attr方法可以一次性设置多个属性
alert($("p").attr({"title":"水果","id":"p1"}));
})
$("#btn2").click(function(){
//移除p标签的title属性
$("p").removeAttr("title");
})
})
</script>
</head>
<body>
<p>你最喜欢的水果?</p>
<ul>
<li title="苹果">苹果</li>
<li title="桔子">桔子</li>
<li title="香蕉">香蕉</li>
</ul>
<div>
你最喜欢的运动
<ul>
<li>游泳</li>
<li>篮球</li>
<li>足球</li>
</ul>
</div>
<button id="btn1">获取设置属性</button>
<button id="btn2">移除属性</button><br /><br />
</body>
</html>
上一篇： JavaScript原型，原型链，继承
下一篇： JQueryDOM之创建节点