JQuery1.11版本对prop和attr接口的含义分离导致问题分析

prop 和 attr 接口

实验中， 在jquery1.7版本， attr("value")  和 val() 接口获取 input 控件的值， 都是一致的， 都是当前控件值。

但是 jquery1.11版本，已经将 这两个接口的返回值分离，  attr("value") 获取的是 控件的初始值（default value），

只有val（）属性才能获取到 控件当前值， 例如 用户修改 了输入的值， 必须使用val（）获取最新值。

对于 checkbox 和 radio 等控件，  不能使用 val（）接口获取，当前值， 需要使用prop("checked")来判断间接判断当前选中控件的值。

经过分析 对于input控件， val接口的实现， 也是调用prop接口来获取 控件的当前值， 即 prop("value").

查阅MDN相关资料

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/setAttribute

使用 setAttribute() 修改某些属性值时，可能得不到期望结果，尤其是 XUL 中的 value，这是由于 attribute 指定的是默认值。要访问或修改当前值，应该使用 property 属性。例如，使用 elt.value 代替 elt.setAttribute(‘value‘, val)。

对于属性的改变，或者不改变（保持默认值情况），其当前值并不跟控件的attr属性直接相关。

如果要获取当前属性值， 需要使用属性 dom的 property 来获取 控件。

https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

Using setAttribute() to modify certain attributes, most notably value in XUL, works inconsistently, as the attribute specifies the default value. To access or modify the current values, you should use the properties. For example, use elt.value instead of elt.setAttribute(‘value‘, val).

什么是attribute?

https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes

　　The Element.attributes property returns a live collection of all attribute nodes registered to the specified node. It is a NamedNodeMap, not an Array, so it has no Array methods and the Attr nodes‘ indexes may differ among browsers. To be more specific, attributes is a key/value pair of strings that represents any information regarding that attribute.

attribute

https://developer.mozilla.org/en-US/docs/Web/API/Attr

This type represents a DOM element‘s attribute as an object. In most DOM methods, you will probably directly retrieve the attribute as a string (e.g., Element.getAttribute(), but certain functions (e.g., Element.getAttributeNode()) or means of iterating give Attr types.

Properties

isId
Indicates whether the attribute is an "ID attribute". An "ID attribute" being an attribute which value is expected to be unique across a DOM Document. In HTML DOM, "id" is the only ID attribute, but XML documents could define others. Whether or not an attribute is unique is often determined by a DTD or other schema description.
name
The attribute‘s name.
ownerElement Deprecated since Gecko 7.0 Obsolete since Gecko 29.0
This property has been removed from Firefox 29. Since you can only get Attr objects from elements, you should already know the owner.
Contrary to above claim, Document.evaluate can return Attr objects from an XPath, in which case you would not easily know the owner.
schemaTypeInfo
?
specified
This property always returns true. Originally, it returned true if the attribute was explicitly specified in the source code or by a script, and false if its value came from the default one defined in the document‘s DTD.
value
The attribute‘s value.

属性表达了 HTML 中 标签的 属性（属性值为字符串）， 映射到DOM上表示为 ATTR 对象。

属性 表达的是文档层面的 表达， 为文档加载后的状态 和 被修改（例如js 调用 setAttribute接口）的行为。

什么是property？

面向对象的思想， 对象中的没有成员都是 property。

对于js中， 使用dom接口获取的一个dom对象后， dom对象有若干暴露于js语言中的 属性， 这些属性， 可能跟 html 标签中的 属性名重复，

例如：

<input id="xx"  name="xx" value="bbb">

document.getElementById("xx").value // bbb

document.getElementById("xx").value = "aaa" // aaa

document.getElementById("xx").getAttribute("value")    //bbb

<!DOCTYPE html>

<html>

 <head>
  <title>Attributes example</title>

 </head>

<body>
<input id="xx"  name="xx" value="bbb">

  <script type="text/javascript">
alert(document.getElementById("xx").value) // bbb

document.getElementById("xx").value = "aaa" // aaa

alert(document.getElementById("xx").value) // aaa

alert(document.getElementById("xx").getAttribute("value"))    //bbb
  </script>

</body>
</html>

也有可能不重复, 例如select控件， 没有获取当前值得的value attribute， 但是有value property可以获取当前值：

<select id="xx">

<option value="sss"  selected="selected">sss</option>

<option value="bbb">bbb</option>

</select>

document.getElementById("xx").value // sss

document.getElementById("xx").value = "bbb" // bbb

document.getElementById("xx").getAttribute("value")    //null

<!DOCTYPE html>

<html>

 <head>
  <title>Attributes example</title>

 </head>

<body>
<select id="xx">

<option value="sss"  selected="selected">sss</option>

<option value="bbb">bbb</option>

</select>

  <script type="text/javascript">
alert(document.getElementById("xx").value) // sss

document.getElementById("xx").value = "bbb" 

alert(document.getElementById("xx").value) // bbb

alert(document.getElementById("xx").getAttribute("value"))    //null
  </script>

</body>
</html>

JQuery官网的解释

http://api.jquery.com/prop/

Attributes vs. Properties

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

W3HELP给出历史变革的解释

http://w3help.org/zh-cn/causes/SD9006

SD9006: IE 混淆了 DOM 对象属性（property）及 HTML 标签属性（attribute），造成了对 setAttribute、getAttribute 的不正确实现

标准参考

根据 DOM (Core) Level 1 规范中的描述，getAttribute 与 setAttribute 为 Element 接口下的方法，其功能分别是通过 "name" 获取和设置一个元素的属性（attribute）值。getAttribute 方法会以字符串的形式返回属性值，若该属性没有设定值或缺省值则返回空字符串。setAttribute 方法则无返回值。
在 DOM Level 2 规范中，则更加明确了 getAttribute 与 setAttribute 方法参数中的
"name" 的类型为 DOMString，setAttribute 方法参数中的 "value" 的类型为
DOMString，getAttribute 的返回值类型也为 DOMString。

DOMString  getAttribute(in DOMString name);
void    setAttribute(in DOMString name, in DOMString value) raises(DOMException);

HTML 文档中的 DOM 对象的属性（property）被定义在 DOM (HTML) 规范中。这个规范中明确定义了 document 对象以及所有标准的 HTML 元素所对应的 DOM 对象拥有的属性及方法。
因为在早期的 DOM Level 0
阶段，某些 HTML 标签的属性会将其值暴露给对应的 DOM 对象的属性，如 HTML 元素的 id 属性与其对应的 DOM 对象的 id
属性会保持一种同步关系，然而这种方式目前已经废弃，这是由于它不能被扩展到所有可能存在的 XML 的属性名称。W3C 建议使用 DOM
(Core) 中 Element 接口上定义的通用方法去获取（getting）、设置（setting）及删除（removing）元素的属性。

举例来说，在一个 HTML 文档中存在一个 SPAN 元素，根据 DOM (HTML) 规范，SPAN
元素在页面中生成一个相对应的对象，这个对象派生自 HTMLElement 接口，而 HTMLElement 接口则继承自 Element
接口。HTMLElement 接口中包含 id 属性。我们可以通过 HTMLElement 接口中的 id 属性获得这个元素的标识符，而通过
Element 接口中的 getAttibute 方法传入参数 "id" 同样可以获得标识符。

虽然这两种方式可以获得相同的值，但是却有着天壤之别。从规范层面上看，getAttribute 方法所属的 DOM
(Core) 规范定义了访问和操作文档对象的一套对象和接口，这其中包含了对 HTML 及 XML 的解析及操作；HTMLElement 接口中
id 属性所属的 DOM (HTML) 规范为 DOM (Core) 的扩展，描述了 HTML 及 XHTML 的对象的细节。而从 HTML
文档代码的层面上看，一个元素的标记中的 HTML 属性（attribute）与其对应的 DOM
对象的属性（property）也是完全不同的两个概念。

关于 getAttribute 与 setAttribute 的详细信息，请参考 DOM (Core) Level 1 及 Level 2 中的内容。

关于 HTML DOM 对象 的详细信息，请参考 DOM (HTML) Document Object Model HTML，特别是 1.6.1. Property Attributes 中的内容。

property描述：

https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-642250288

atrribute定义：

https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-637646024

时间： 2024-10-18 07:23:23

JQuery1.11版本对prop和attr接口的含义分离导致问题分析的相关文章

Jquery学习笔记（5）--jquery1.6中的.prop()和.attr()异同

jquery1.6中的.prop()和.attr()异同 最近在iteye的新闻中看到jQuery已经更新到了1.6.1.和之前版本的最大变化是增加了.prop方法.但是.prop()方法和.attr()方法,单从字面上很难区分.在汉语中properties和attributes都有表示"属性"的意思.下面根据这篇博文(javascript:mctmp(0);),简要翻译了.prop()和.attr()的用法: 1.从1.5.2升级到1.6.1 通过介绍新方法.prop()以及.att

jquery1.6中的.prop()和.attr()异同

转自:http://hxq0506.iteye.com/blog/1046334 最近在iteye的新闻中看到jQuery已经更新到了1.6.1.和之前版本的最大变化是增加了.prop方法.但是.prop()方法和.attr()方法,单从字面上很难区分.在汉语中properties和attributes都有表示“属性”的意思.下面根据这篇博文(javascript:mctmp(0);),简要翻译了.prop()和.attr()的用法: 1.从1.5.2升级到1.6.1 通过介绍新方法.prop(

jquery1.11 操作checkbox：全选、取消全选、获取选择元素、获取取消选择元素（总结）

jquery1.11.1版本完成对checkbox的操作 1. 使用属性prop设置选中状态 2.使用:checked和:not(:checked)获取选中的元素 源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1&quo

jQuery学习之prop和attr的区别

http://blog.sina.com.cn/s/blog_655388ed01017cnc.html .prop() 1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( propertyName, function(index, oldPropertyValue) ) 给匹配元素集合设定一个或多个属性 .prop()和 .attr()区别 下面是

jquery之prop与attr区别。

一切看下面代码示例<!DOCTYPE html> <html> <head> <title>全选和反选</title> <script type="text/javascript" src="./jquery-1.11.2.min.js"></script> </head> <body> <input type="checkbox"

使用Jquery1.9 版本 来实现全选

在使用Jquery实现全选以及反选的时候, 使用attr()实现的时候,在浏览器第一次运行可以全选,但是第二次再全选,不管用.  通过查找资料,用 prop()方法代替attr()方法就行了. 注意: Jquery 1.6之后,可以通过attr方法去获得属性,通过prop方法去获得特性. 在遇到要获取或设置checked,selected,readonly和disabled等属性时,用prop方法. jquery1.6中新加了一个方法prop(),官方解释只有一句话:获取在匹配的元素集中的第一个

Linux2.6.11版本：classic RCU的实现

转载自:http://www.wowotech.net/kernel_synchronization/linux2-6-11-RCU.html 一.前言 无论你愿意或者不愿意,linux kernel的版本总是不断的向前推进,做为一个热衷于专研内核的工程师,最大的痛苦莫过于此:当你熟悉了一个版本的内核之后,内核已经推进到一个新的版本,你曾经熟悉的内容可能会变得陌生(这里主要说的是该模块的内部实现,实际上,内核中的每一个子系统都是会尽量保持接口API的不变).怎么应对这种变化呢?一方面,具体的实现

2016/04/18 ①注册 注册处理 ② 审核 审核处理 ③登录 登录处理 ④需要jquery-1.11.2.min.js DBDA.php

① 注册   zhuceye.php 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="jquery-1.11.2.min.js"></script> 7 </head>

【Jquery】prop与attr的区别

最近因项目需要用到复选框,其中一个控制全选. // 全选 $(".ckb_all").click(function(){ if($(this).attr("checked") == true){ $(":input[name='ckb_img']").attr("checked",true); }else{ $(":input[name='ckb_img']").attr("checked&quo