属性操作
JQ中不能单独创建属性节点,而只能在元素节点中进行属性操作
html标记中的属性操作: 查、增、改:jQuery(obj.attr(属性名,[属性值])) 删:jQuery(obj.removeAttr(属性名))
元素节点的属性操作: 查、增、改:jQuery(obj.prop(属性名,[属性值])) 删:jQuery(obj.removeProp(属性名))
因为JQ节点是一组包含多个节点的数组,所以在增、改时可以同时对多个html元素进行操作,但是查询时只会查询第一个节点的属性。
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.4.1.min.js"></script>
</head>
<style>
ul{
list-style: none;
}
.red{
color: red;
}
.blue{
color: blue;
}
li{
padding: 5px;
border:red solid;
background: burlywood;
}
form{
line-height: 40px;
}
</style>
<body>
<h1>dom节点初识</h1>
<ul id="myUl">
<li class="red">1</li>
<li class="blue">2</li>
<li class="red" id="Li3">3</li>
<li class="blue"><a href="" title="我是链接头" id="A1">我是链接</a></li>
</ul>
<form action="">
用户名:<input name="username" type="text"><br>
密码:<input name="pwd" type="password"><br>
爱好:<input name="ins" type="checkbox" value="sing">唱歌
<input name="ins" type="checkbox" value="code">编程<br>
<select name="sl" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">南京</option>
</select><br>
<p><button type="submit">提交</button></p>
</form>
<script>
$(document).ready(function(){
//1、修改或添加标准属性和html标记中的属性值
// $("#A1").attr("href", "http://www.baidu.com");
//2、修改或添加标准属性和js标记中的属性值
// $("#A1").prop("href", "http://www.163.com");
//获取标准属性和HTML标记中属性的方法
// alert($("#A1").attr("title"));
//获取标准属性和js标记中属性的方法
// alert($("#A1").prop("title"));
//原生写法
// alert(document.getElementById("A1").title);
//删除属性
// $("#A1").removeAttr("title");
/*$("#A1").removeProp("title");
alert(document.getElementById("A1").title);*/
//查看属性节点
alert($("li").attr("class"));
});
</script>
</body>
</html>