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


当前回答

我认为蒂姆说得很好,但让我们后退一步:

DOM元素是一个对象,一个内存中的东西。与OOP中的大多数对象一样,它具有财产。另外,它还有一个在元素上定义的属性映射(通常来自浏览器为创建元素而读取的标记)。一些元素的财产从具有相同或相似名称的属性中获取初始值(value从“value”属性中获取其初始值;href从“href”属性中获得其初始值,但它不是完全相同的value;className从“class”属性中)。其他财产以其他方式获取其初始值:例如,parentNode属性根据其父元素的内容获取其值;元素始终具有style属性,无论它是否具有“style”属性。

让我们在以下页面中考虑此锚http://example.com/testing.html:

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

一些免费的ASCII艺术(并省略了很多东西):

+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
|             HTMLAnchorElement             |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
| href:       "http://example.com/foo.html" |
| name:       "fooAnchor"                   |
| id:         "fooAnchor"                   |
| className:  "test one"                    |
| attributes:                               |
|    href:  "foo.html"                      |
|    name:  "fooAnchor"                     |
|    id:    "fooAnchor"                     |
|    class: "test one"                      |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+

请注意,财产和属性是不同的。

现在,尽管它们是不同的,因为所有这些都是从根本上发展而来的,而不是从头开始设计的,但是如果您设置了它们,许多财产会写回它们派生的属性。但并非所有人都这样做,正如您从上面的href中看到的,映射并不总是直接的“传递值”,有时会涉及到解释。

当我谈论财产是一个对象的财产时,我并不是抽象地说。下面是一些非jQuery代码:

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

(这些值与大多数浏览器相同;存在一些差异。)

链接对象是一个真实的对象,您可以看到访问它上的属性和访问属性之间存在真正的区别。

正如蒂姆所说,大多数时候,我们都想与财产合作。这部分是因为它们的值(甚至它们的名称)在浏览器之间趋于一致。我们通常只希望在没有与属性相关的属性(自定义属性)时使用属性,或者当我们知道特定属性的属性和属性不是1:1时(如上面的href和“href”)。

各种DOM规范中列出了标准财产:

DOM2 HTML(大部分已过时,请参见HTML规范)DOM2核心(过时)DOM3核心(过时)域4

这些规范有很好的索引,我建议将链接放在手边;我一直在用。

例如,自定义属性将包括任何数据xyz属性,您可以将这些属性放在元素上,以向代码提供元数据(现在,这在HTML5中是有效的,只要您坚持数据前缀)。(jQuery的最新版本允许您通过数据函数访问数据xyz元素,但该函数不仅仅是数据xyz属性的访问器[它做的更多也更少];除非您实际需要它的功能,否则我会使用attr函数与数据xyz特性交互。)

attr函数过去有一些复杂的逻辑来获得他们认为你想要的东西,而不是从字面上获得属性。它将这些概念混为一谈。移动到prop和attr是为了将它们分开。简而言之,在v1.6.0中,jQuery在这方面做得太过火了,但功能很快被添加回attr,以处理人们在技术上应该使用prop时使用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的复杂副作用。

我认为蒂姆说得很好,但让我们后退一步:

DOM元素是一个对象,一个内存中的东西。与OOP中的大多数对象一样,它具有财产。另外,它还有一个在元素上定义的属性映射(通常来自浏览器为创建元素而读取的标记)。一些元素的财产从具有相同或相似名称的属性中获取初始值(value从“value”属性中获取其初始值;href从“href”属性中获得其初始值,但它不是完全相同的value;className从“class”属性中)。其他财产以其他方式获取其初始值:例如,parentNode属性根据其父元素的内容获取其值;元素始终具有style属性,无论它是否具有“style”属性。

让我们在以下页面中考虑此锚http://example.com/testing.html:

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

一些免费的ASCII艺术(并省略了很多东西):

+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
|             HTMLAnchorElement             |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
| href:       "http://example.com/foo.html" |
| name:       "fooAnchor"                   |
| id:         "fooAnchor"                   |
| className:  "test one"                    |
| attributes:                               |
|    href:  "foo.html"                      |
|    name:  "fooAnchor"                     |
|    id:    "fooAnchor"                     |
|    class: "test one"                      |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+

请注意,财产和属性是不同的。

现在,尽管它们是不同的,因为所有这些都是从根本上发展而来的,而不是从头开始设计的,但是如果您设置了它们,许多财产会写回它们派生的属性。但并非所有人都这样做,正如您从上面的href中看到的,映射并不总是直接的“传递值”,有时会涉及到解释。

当我谈论财产是一个对象的财产时,我并不是抽象地说。下面是一些非jQuery代码:

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

(这些值与大多数浏览器相同;存在一些差异。)

链接对象是一个真实的对象,您可以看到访问它上的属性和访问属性之间存在真正的区别。

正如蒂姆所说,大多数时候,我们都想与财产合作。这部分是因为它们的值(甚至它们的名称)在浏览器之间趋于一致。我们通常只希望在没有与属性相关的属性(自定义属性)时使用属性,或者当我们知道特定属性的属性和属性不是1:1时(如上面的href和“href”)。

各种DOM规范中列出了标准财产:

DOM2 HTML(大部分已过时,请参见HTML规范)DOM2核心(过时)DOM3核心(过时)域4

这些规范有很好的索引,我建议将链接放在手边;我一直在用。

例如,自定义属性将包括任何数据xyz属性,您可以将这些属性放在元素上,以向代码提供元数据(现在,这在HTML5中是有效的,只要您坚持数据前缀)。(jQuery的最新版本允许您通过数据函数访问数据xyz元素,但该函数不仅仅是数据xyz属性的访问器[它做的更多也更少];除非您实际需要它的功能,否则我会使用attr函数与数据xyz特性交互。)

attr函数过去有一些复杂的逻辑来获得他们认为你想要的东西,而不是从字面上获得属性。它将这些概念混为一谈。移动到prop和attr是为了将它们分开。简而言之,在v1.6.0中,jQuery在这方面做得太过火了,但功能很快被添加回attr,以处理人们在技术上应该使用prop时使用attr的常见情况。

在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()访问它们慢。

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

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

CSS选择器[名称=值]

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

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

输入[name](谢谢@TimDown)

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

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

TL;博士

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

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

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