jQuery中的属性和属性节点的详细介绍1.0
在看完江哥对jQuery中属性和属性节点这几段视频后,还是感觉有必要总结下,也能供大家参考:
1.什么是属性?
对象身上保存的变量就是属性
2.如何操作属性?
function Person() {
}
var p = new Person(); //先new一个对象
对象.属性名称 = 值 ; //赋值
p.name = 'ywc';
对象.属性名称; //取值
console.log(p.name);
对象["属性名称"] = 值;//赋值
p["name"] = "ywc"
对象["属性名称"] //取值
console.log(p['name']);
3.什么是属性节点?
<span name = "it666"></span>
在编写HTNL代码时,在标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后,展开看到的都是属性
在attributes 属性中保存的所有内容都是属性节点
4.如何操作属性节点?
DOM元素.setAttribute("属性名称","值"); // 设置属性节点的值
var span = document.getElementsByTagName('span')[0];
span.setAttribute("name","ywc");
DOM元素.getAttribute("属性名称") //获取属性节点的值
console.log(span.getAttribute("name"));
5.属性和属性节点有什么区别?
任何对象都有属性,但是只有DOM对象才有属性节点
jQuery中attr方法(在2.0版本会重新写,需要完善,还要个prop方法要做对比)
1.attr(name|pro|key,val|fn)
作用:获取或者设置属性节点的值
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="ywc"></span>
</body>
可以传递一个参数,也可以传递两个参数
如果传递一个参数,代表获取属性节点的值
如果传递两个参数,代表设置属性节点的值
注意点:
如果是获取:无论找到多少元素,都只会返回第一个元素指定的属性节点的值
$("span").attr('class');
console.log($("span").attr('class')); //结果只会返回 span1
如果是设置:找到多少个元素就会设置多少个元素
$("span").attr('class','box');
console.log($("span").attr('class','box')); // 所有span标签
如果是设置:如果设置的属性节点不存在,那么系统会自动新增
2.removeAttr(name)
删除属性节点
注意点:会删除所有找到元素指定的属性节点