所以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()与attr()中,几乎没有其他注意事项:

selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected。。应使用.prop()方法检索和设置。这些属性没有相应的属性,只是财产。输入类型复选框.attr('checked')//返回已检查.prop('checked')//返回true.is(“:checked”)//返回trueprop方法返回选中、选中、禁用或禁用的布尔值,只读。。而attr返回定义的字符串。所以,你可以直接在if条件下使用.prop('checked')。.attr()在内部调用.prop(),因此.attr比直接通过.prop()访问它们慢。

其他回答

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>

只是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')

有一件事.attr()可以做到。prop()不能做到:影响CSS选择器

这是我在其他答案中没有看到的问题。

CSS选择器[名称=值]

将响应.attr('name','value')但不总是.prop('name','value')

.prop()仅影响少数属性选择器

输入[name](谢谢@TimDown)

.attr()影响所有属性选择器

输入[值]输入[名称]span[名称]input[data自定义属性](.data('custom-attribute')都不会影响此选择器)

DOM中有一个属性;属性在HTML中,该HTML被解析为DOM。

进一步的细节

如果更改属性,则更改将反映在DOM中(有时使用不同的名称)。

示例:更改标记的class属性将更改DOM中该标记的className属性(这是因为类已被使用)。如果标记上没有属性,那么相应的DOM属性仍然为空或默认值。

示例:虽然标记没有class属性,但DOM属性className确实存在空字符串值。

edit

如果您更改一个,另一个将由控制器更改,反之亦然。该控制器不在jQuery中,而是在浏览器的本地代码中。

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

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

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

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

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

解决了问题。