所以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记录,为什么?这对我未来的编码有何影响?
只是HTML属性和DOM对象之间的区别导致了混淆。对于那些习惯于使用DOM元素的本地财产(比如this.src this.value this.checked等)的人来说,.prop是对这个家庭的热烈欢迎。对其他人来说,这只是增加了一层混乱。让我们澄清一下。
查看.attr和.prop之间差异的最简单方法是以下示例:
<input blah="hello">
$('input').attr('blah'):按预期返回'hello'。这里没有惊喜。$('input').prop('blah'):返回undefined——因为它正在尝试执行[HTMLInputElement].blah——并且该DOM对象上不存在这样的属性。它仅作为该元素的属性存在于作用域中,即[HTMLInputElement].getAttribute('blah')
现在我们改变了一些事情,比如:
$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');
$('input').attr('beah'):返回'apple'是吗?为什么不“梨”,因为这是最后一个元素。因为属性是在输入属性上更改的,而不是DOM输入元素本身——它们基本上彼此独立工作。$('input').prop('beah'):返回'pear'
您真正需要注意的是,不要因为上述原因而在整个应用程序中混合使用相同的属性。
看到一把小提琴展示了不同之处:http://jsfiddle.net/garreh/uLQXc/
属性与属性:
第1轮:风格
<input style="font:arial;"/>
.attr('style')--返回匹配元素的内联样式,即“font:arial;”.prop('style')--返回一个样式声明对象,即CSSStyleDeclaration
第二轮:价值
<input value="hello" type="text"/>
$('input').prop('value', 'i changed the value');
.attr('value')--返回'hello'*.prop('value')--返回'i changed the value'
*注意:出于这个原因,jQuery有一个.val()方法,它在内部等同于.prop('value')
肮脏的检查
该概念提供了一个可观察到差异的示例:http://www.w3.org/TR/html5/forms.html#concept-输入检查过脏
试试看:
单击按钮。两个复选框都被选中。取消选中这两个复选框。再次单击按钮。只有道具复选框被选中。砰!
$('按钮').on('单击',函数(){$('#attr').attr('checked','checked')$('#prop').prop('checked',true)})<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><label>attr<input id=“attr”type=“checkbox”></label><label>prop<input id=“prop”type=“checkbox”></label><button type=“button”>设置选中的属性和属性</按钮>
对于某些属性,如按钮上的disabled,添加或删除content属性disabled=“disabled”总是切换属性(在HTML5中称为IDL属性),因为http://www.w3.org/TR/html5/forms.html#attr-fe残疾人说:
禁用的IDL属性必须反映禁用的内容属性。
所以你可以摆脱它,尽管它很难看,因为它不需要修改HTML。
对于其他属性,如inputtype=“checkbox”上的checked=“checked”,事情就会中断,因为一旦单击它,它就会变脏,然后添加或删除checked=”checked“内容属性将不再切换checked。
这就是为什么应该主要使用.prop,因为它直接影响有效属性,而不是依赖于修改HTML的复杂副作用。
属性在HTML文本文档/文件中(==想象这是解析HTML标记的结果),而财产位于HTMLDOM树中(==基本上是JS意义上某个对象的实际属性)。
重要的是,其中许多都是同步的(如果您更新了class属性,那么html中的class属性也将被更新;否则)。但某些属性可能会与意外的财产同步,例如,checked属性对应于defaultChecked属性,以便
手动选中复选框将更改.prop('checked')值,但不会更改.attr('checked)和.prop('defaultChecked')的值设置$('#input').prop('defaultChecked',true)也将更改.attr('checked'),但这在元素上不可见。
经验法则是:.prop()方法应该用于布尔属性/财产和html中不存在的财产(例如window.location)。所有其他属性(您可以在html)可以并且应该继续使用.attr()操作方法(http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/)
这里有一个表显示了.prop()的首选位置(尽管.attr()仍然可以使用)。
为什么您有时会想使用.prop()而不是.attr(),后者是官方推荐的?
.prop()可以返回任何类型-string、integer、boolean;而.attr()始终返回字符串。.prop()据说比.attr()快2.5倍。
对于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财产之间的差异有关,而不是与代码本身有关。希望这能帮你解决一些问题。
-马特
DOM中有一个属性;属性在HTML中,该HTML被解析为DOM。
进一步的细节
如果更改属性,则更改将反映在DOM中(有时使用不同的名称)。
示例:更改标记的class属性将更改DOM中该标记的className属性(这是因为类已被使用)。如果标记上没有属性,那么相应的DOM属性仍然为空或默认值。
示例:虽然标记没有class属性,但DOM属性className确实存在空字符串值。
edit
如果您更改一个,另一个将由控制器更改,反之亦然。该控制器不在jQuery中,而是在浏览器的本地代码中。