所以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记录,为什么?这对我未来的编码有何影响?


当前回答

TL;博士

在大多数情况下,使用prop()而不是attr()。

属性是输入元素的当前状态。属性是默认值。

属性可以包含不同类型的内容。属性只能包含字符串

其他回答

所有内容都在文档中:

属性和财产之间的差异在特定情况下可能很重要。在jQuery1.6之前,.attr()方法在检索某些属性时有时会考虑属性值,这可能会导致不一致的行为。从jQuery1.6开始,.prop()方法提供了显式检索属性值的方法,.attr()方法检索属性。

所以使用道具!

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>

.attr():

获取匹配元素集合中第一个元素的属性值。为您提供页面加载时html中定义的元素值

.prop():

获取匹配元素集合中第一个元素的属性值。提供通过javascript/jquery修改的元素的更新值

属性->HTML

财产->DOM

如果代码是以这种方式编写的,Gary Hole的答案与解决问题非常相关

obj.prop("style","border:1px red solid;")

由于prop函数返回CSSStyleDeclaration对象,上述代码在某些浏览器中无法正常工作(在我的例子中,使用带有Chrome框架插件的IE8进行了测试)。

因此,将其更改为以下代码

obj.prop("style").cssText = "border:1px red solid;"

解决了问题。