prop 和 attr的区别

向右看齐 2022-07-12 23:21 146阅读 0赞

最近踩到一个坑，用`jQuery`的`$('.ipt').attr('checked', true);`来让checkbox变成checked状态，结果发现html上的值是改变了，但是ui层面，checked的状态并没有改变。结果才发现attribute和properties不是同一个东西。

参考文献：  
1. [http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/][http_blog.jquery.com_2011_05_12_jquery-1-6-1-released]  
2. [http://stackoverflow.com/questions/5874652/prop-vs-attr][http_stackoverflow.com_questions_5874652_prop-vs-attr]  
3. [http://www.365mini.com/page/jquery-attr-vs-prop.htm][http_www.365mini.com_page_jquery-attr-vs-prop.htm]  
4. [https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes][https_developer.mozilla.org_en-US_docs_Web_HTML_Attributes]

*  以下翻译自[http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/][http_blog.jquery.com_2011_05_12_jquery-1-6-1-released]

jQuery1.6中新增了.prop()方法，

1.6以后，.attr()对于window和document将不再生效，因为window和document没有attributes。但是它们有properties（例如，location和readyState）。

checked，selected和其他boolean的atrtributes有一些特殊情况，英文它们的attributes和相应的properties之间有一些特殊的关系。通常，attribute就是你在html里看到的

**boolean的attribute，例如checked，仅仅只能设置默认或初始值。对于checlbox，checked attribute只在页面加载的时候生效。**

**properties是浏览器用来跟踪当前值的。**一般来说，properties反映了它们相应的attributes，这是在 不是boolean attributes的情况下。boolean porperties 随着用户点击一个checkbox活着选择一个options而**实时变化**，而相应的attributes并不会。上面提到过，**attributes仅被浏览器用于保存初始值。**

1.6以后，`$(“:checkbox”).attr(“checked”, true);` 这么写将不会将checkbox选中，因为你需要设定的是property，而你设定的知识一个初始值。

*  以下来自[https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes][https_developer.mozilla.org_en-US_docs_Web_HTML_Attributes]

> The content attribute is always a string even when the expected value should be an integer.

*    
    
 *  以下结论来自[http://www.365mini.com/page/jquery-attr-vs-prop.htm][http_www.365mini.com_page_jquery-attr-vs-prop.htm]

> 不过，在jQuery中，attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性，property表示JS对象的属性。

[http_blog.jquery.com_2011_05_12_jquery-1-6-1-released]: http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/
[http_stackoverflow.com_questions_5874652_prop-vs-attr]: http://stackoverflow.com/questions/5874652/prop-vs-attr
[http_www.365mini.com_page_jquery-attr-vs-prop.htm]: http://www.365mini.com/page/jquery-attr-vs-prop.htm
[https_developer.mozilla.org_en-US_docs_Web_HTML_Attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes