所以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记录,为什么?这对我未来的编码有何影响?
轻轻提醒使用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返回空字符串(正确)。
肮脏的检查
该概念提供了一个可观察到差异的示例: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的复杂副作用。