一：属性和属性节点介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(function () {
/*
1:什么是属性
对象身上保存的变量
2：如何操作属性
对象.属性名称=值
对象.属性名称;
对象["属性名称"]=值
对象["属性名称"]
3：什么是属性节点
<span name="666"></span>
在编写Html代码时，在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后，展开看到的都是属性
在attributes属性中保存的所有内容都是属性节点
4：如何操作属性节点
DOM元素.setAttribute("属性名称","值");
DOM元素.getAttribute("属性名称");
5：属性和属性节点有什么区别
任何对象都有属性，但是只有DOM对象才有属性节点
*/
function Person() {}
var p = new Person()
p.name = "xzx";
console.log(p.name);
p["age"] = 21;
console.log(p["age"]);
var span = document.getElementsByTagName('span')[0]
span.setAttribute("name", "ss");
console.log(span.getAttribute("name"));
})
</script>
</head>
<body>
<span name="666"></span>
</body>
</html>
二：操作属性节点的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(function () {
/*
1：attr(name|pro|key,val|fn)
作用：获取或者设置属性节点的值
可以传递一个参数，也可以传递两个参数
如果传递一个参数，代表获取属性节点的值
如果传递两个参数，代表设置属性节点的值
注意点：
如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
如果是设置：找到多少个元素就会设置多少个元素
如果是设置：如果设置的属性节点不存在，系统会自动新增
2：removeAttr(name)
作用：删除属性节点
注意点：会删除所有找到元素指定的属性节点
如果删除两个，空格隔开
*/
console.log($("span").attr("class"));
$("span").attr("class", "box");
$("span").attr("class", "box");
$("span").attr("abc", "123");
$("span").removeAttr("class");
$("span").removeAttr("class name"); //删除两个
})
</script>
</head>
<body>
<span class="span1" name="s1"></span>
<span class="span2" name="s2"></span>
</body>
</html>
三：操作属性的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(function () {
/*
1:prop方法
特点和attr方法一致
2:removeProp方法
特点和removeAttr方法一致
*/
$("span").eq(0).prop("demo", "span01"); //eq里是第0个eq
$("span").eq(1).prop("demo", "span02");
console.log($("span").prop("demo")); //只获取第一个
$("span").removeProp("demo");
// 注意点：prop方法不仅能够操作属性，它还能操作属性节点
console.log($("span").prop("class"));
$("span").prop("class", "box");
})
</script>
</head>
<body>
<span class="span1" name="s1"></span>
<span class="span2" name="s2"></span>
</body>
</html>
四：该如何选择attr还是prop
官方推荐在操作属性节点时，具有true和false两个属性的属性节点，例如：checked,selected或者disabled 使用prop(),其他的使用attr()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(function () {
console.log( $("input").prop("checked"));
console.log( $("input").attr("checked"));
})
</script>
</head>
<body>
选中：<input type="checkbox" checked>
<!-- 没选中：<input type="checkbox" > -->
</body>
</html>
五：attr小应用
也可以用prop，但是因为节点属性不是true和false，所以推荐用attr
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
$(function () {
//还没学的用js写
//给按钮添加点击事件
var btn=document.getElementsByTagName('button')[0];
btn.onclick=function(){
//获取输入框输入内容
var input=document.getElementsByTagName('input')[0];
var text=input.value;
//修改Img的src属性节点的值
$("img").attr("src",text)
}
})
//input里面输入：http://b159.photo.store.qq.com/psb?/V13fa3kk1tXuy2/EsKE3sFY5UHa98ZhFRJ*sv3axq6i2g2Md3.xPwY0n6E!/b/dJ8AAAAAAAAA&bo=oAU4BDgEoAURCT4!&t=5&t=5&t=5&t=5&w=384&h=288&rf=travel&t=5
</script>
</head>
<body>
<input type="text">
<button>切换图片</button><br>
<img src="http://a2.qpic.cn/psb?/V13fa3kk0zUpc8/QlcoUWIygp3PwcRgvPQ*r6fl8DG1NvT2t4ec2CvqPDw!/b/dNEAAAAAAAAA&bo=oAU4BDgEoAURCT4!&t=5&w=557&h=418&rf=travel&t=5" alt="" style="width: 350px;height: 300px;">
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
