所以jQuery1.6有了新的函数prop()。
$(selector).click(function(){
//instead of:
this.getAttribute('style');
//do i use:
$(this).prop('style');
//or:
$(this).attr('style');
})
或者在这种情况下,他们会做同样的事情吗?
如果我必须切换到使用prop(),那么如果我切换到1.6,所有旧的attr()调用都会中断?
更新
选择器='#id'$(选择器).click(函数){//而不是:var getAtt=this.getAttribute('style');//我是否使用:var thisProp=$(this).prop('style');//或:var thisAttr=$(this).attr(“样式”);console.log(getAtt、thisProp、thisAttr);});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js“></script>测试</div>
(另请参见此小提琴:http://jsfiddle.net/maniator/JpUF2/)
控制台将getAttribute作为字符串记录,将attr作为字符串记录但将prop作为CSSStyleDeclaration记录,为什么?这对我未来的编码有何影响?
1) DOM中有一个属性;HTML中有一个属性解析为DOM。2) $(elem).attr(“检查”)(1.6.1+)“检查”(字符串)将更改复选框状态3) $(elem).attr(“已检查”)(1.6之前)true(布尔值)已更改带有复选框状态
大多数情况下,我们希望使用DOM对象,而不是自定义属性如数据img、数据xyz。访问复选框值和href时也有一些不同属性()和属性()随DOM输出的变化而变化prop()作为来自原点的完整链接和复选框的布尔值(1.6之前)我们只能使用propother访问DOM元素,否则它将不定义
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js“></script><!doctype html><html lang=“en”><head><meta charset=“utf-8”><title>道具演示</title><style>p型{边距:20px 0 0;}b级{颜色:蓝色;}</style></head><body><input id=“check1”type=“checkbox”checked=“checked”><label for=“check1”>检查我</label><p></p><脚本>$(“input”).change(函数){var$input=$(this);$(“p”).html(“.attr(\”已检查\“):<b>”+$input.attr“(”已检查“)+”</b><br>“+“.prop(\”checked\“):<b>”+$input.prop(”checked“)+“</b><br>”+“.is(\”:已检查\“):<b>”+$input.is(“:已检查”))+“</b>”;}).change();</script></body></html>
对于jQuery来说,这一变化已经发生了很长时间。多年来,他们一直满足于一个名为attr()的函数,该函数主要检索DOM财产,而不是您期望从名称中得到的结果。attr()和prop()的分离应该有助于缓解HTML属性和DOM财产.$之间的一些混淆。fn.prop()获取指定的DOM属性,而$.fn.attr()获取特定的HTML属性。
为了充分理解它们的工作原理,这里有一个关于HTML属性和DOM财产之间差异的扩展解释
HTML属性
语法:
<body onload=“foo()”>
目的:允许标记将数据与之关联,以用于事件、渲染和其他目的。
可视化:class属性显示在正文中。可以通过以下代码访问:
var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");
属性以字符串形式返回,并且在浏览器之间可能不一致。然而,它们在某些情况下可能至关重要。如上所述,IE8QuirksMode(及以下)期望get/set/removeAttribute中的DOM属性名称,而不是属性名称。这是了解差异很重要的众多原因之一。
DOM财产
语法:
document.body.onload=foo;
目的:允许访问属于元素节点的财产。这些财产类似于属性,但只能通过JavaScript访问。这是一个重要的区别,有助于阐明DOM财产的作用。请注意,属性与财产完全不同,因为此事件处理程序分配没有用处,不会接收事件(正文没有onload事件,只有onload属性)。
可视化:
在这里,您会注意到Firebug中“DOM”选项卡下的财产列表。这些是DOM财产。你会立即注意到其中的很多,因为你以前会在不知道的情况下使用它们。它们的值就是你通过JavaScript收到的值。
文档
JavaScript:最终指南大卫·福莱纳根HTML属性,Mozilla开发中心Mozilla开发中心DOM元素财产
实例
HTML:<textarea id=“test”value=“foo”></textarea>
JavaScript:警报($('#test').attr('value'));
在早期版本的jQuery中,这将返回一个空字符串。在1.6中,它返回正确的值foo。
在没有浏览过这两个函数的新代码的情况下,我可以自信地说,混淆更多的是与HTML属性和DOM财产之间的差异有关,而不是与代码本身有关。希望这能帮你解决一些问题。
-马特
轻轻提醒使用prop(),例如:
if ($("#checkbox1").prop('checked')) {
isDelete = 1;
} else {
isDelete = 0;
}
上面的函数用于检查checkbox 1是否选中,如果选中:返回1;如果没有:返回0。函数prop()在这里用作GET函数。
if ($("#checkbox1").prop('checked', true)) {
isDelete = 1;
} else {
isDelete = 0;
}
上面的函数用于设置要检查的checkbox 1,并始终返回1。现在函数prop()用作SET函数。
别搞砸了。
P/S:当我检查Image src属性时。如果src为空,prop返回页面的当前URL(错误),attr返回空字符串(正确)。