attr获取checkbox属性出错
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
前几天，有人给 Multiple Select 插件 提了问题：
setSelects doesn't work in Firefox when using jquery 1.9.0
一直都在用 jQuery 1.8.3 的版本，没有尝试过 jQuery 1.9.0 的版本。
于是，开始调试代码，在 1.9.0 的版本中：
&input type="checkbox" /& &script& $(function() { $('input').click(function() { $(this).attr('checked'); }); }); &/script&
点击 checkbox，结果都是 undefined
而在 1.8.3 的版本中，结果是 checked 和 undefined
到这里，问题答案找到了，就是使用 attr() 方法的问题，于是查看官方文档， 才知道从 jQuery 1.6 开始新增了一个方法 prop()，但是一直都没有使用过。
从中文意思看，两者分别是获取/设置 attributes 和 properties 的方法，那么为什么还要增加 prop() 方法呢？
因为在 jQuery 1.6 之前，使用 attr() 有时候会出现不一致的行为。
那么，什么时候使用attr()，什么时候使用prop()？
根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
到此，将 attr(‘checked’) 改成 prop(‘checked’) 即可修复提的 issues 了。
等等，貌似问题还没真正解决，为什么开头例子中 jQuery 1.8.3 和 1.9.0 使用 attr() 会有所区别呢？
想知道他们的区别，最好的办法还是看他们的源代码：
1.8.3 attr()：
attr: function( elem, name, value, pass ) { var ret, hooks, notxml, nType = elem.nodeT // don't get/set attributes on text, comment and attribute nodes if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { } if ( pass && jQuery.isFunction( jQuery.fn[ name ] ) ) { return jQuery( elem )[ name ]( value ); } // Fallback to prop when attributes are not supported if ( typeof elem.getAttribute === "undefined" ) { return jQuery.prop( elem, name, value ); } notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); // All attributes are lowercase // Grab necessary hook if one is defined if ( notxml ) { name = name.toLowerCase(); hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook ); } if ( value !== undefined ) { if ( value === null ) { jQuery.removeAttr( elem, name ); } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) { } else { elem.setAttribute( name, value + "" ); } } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) { } else { ret = elem.getAttribute( name ); // Non-existent attributes return null, we normalize to undefined return ret === null ? undefined : } }
1.9.0 attr()：
attr: function( elem, name, value ) { var ret, hooks, notxml, nType = elem.nodeT // don't get/set attributes on text, comment and attribute nodes if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { } // Fallback to prop when attributes are not supported if ( typeof elem.getAttribute === "undefined" ) { return jQuery.prop( elem, name, value ); } notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); // All attributes are lowercase // Grab necessary hook if one is defined if ( notxml ) { name = name.toLowerCase(); hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook ); } if ( value !== undefined ) { if ( value === null ) { jQuery.removeAttr( elem, name ); } else if ( hooks && notxml && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { } else { elem.setAttribute( name, value + "" ); } } else if ( hooks && notxml && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { } else { // In IE9+, Flash objects don't have .getAttribute (#12945) // Support: IE9+ if ( typeof elem.getAttribute !== "undefined" ) { ret = elem.getAttribute( name ); } // Non-existent attributes return null, we normalize to undefined return ret == null ? undefined : } }
1.8.3 和 1.9.0 的 prop() 是一样的:
prop: function( elem, name, value ) { var ret, hooks, notxml, nType = elem.nodeT // don't get/set properties on text, comment and attribute nodes if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { } notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); if ( notxml ) { // Fix name and attach hooks name = jQuery.propFix[ name ] || hooks = jQuery.propHooks[ name ]; } if ( value !== undefined ) { if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { } else { return ( elem[ name ] = value ); } } else { if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { } else { return elem[ name ]; } } }
首先，我们看下 attr() 和 prop() 的区别：
attr() 里面，最关键的两行代码
elem.setAttribute( name, value + "" ); ret = elem.getAttribute( name );
很明显的看出来，使用的 DOM 的 API setAttribute() 和 getAttribute() 方法操作的属性元素节点。
prop() 里面，最关键的两行代码
return ( elem[ name ] = value ); return elem[ name ];
可以理解为 document.getElementById(el)[name] = value，这是转化成 element 的一个属性。
对比调试 1.9.0 和 1.8.3 的 attr() 方法，发现两者的区别在于
hooks.get( elem, name ))
返回的值不一样，具体的实现：
boolHook = { get: function( elem, name ) { // Align boolean attributes with corresponding properties // Fall back to attribute presence where some booleans are not supported var attrNode, property = jQuery.prop( elem, name ); return property === true || typeof property !== "boolean" && ( attrNode = elem.getAttributeNode(name) ) && attrNode.nodeValue !== false ? name.toLowerCase() : } }
boolHook = { get: function( elem, name ) { var // Use .prop to determine if this attribute is understood as boolean prop = jQuery.prop( elem, name ), // Fetch it accordingly attr = typeof prop === "boolean" && elem.getAttribute( name ), detail = typeof prop === "boolean" ? getSetInput && getSetAttribute ? attr != null : // oldIE fabricates an empty string for missing boolean attributes // and conflates checked/selected into attroperties ruseDefault.test( name ) ? elem[ jQuery.camelCase( "default-" + name ) ] : !!attr : // fetch an attribute node for properties not recognized as boolean elem.getAttributeNode( name ); return detail && detail.value !== false ? name.toLowerCase() : } }
由此可见，1.9.0 开始不建议使用 attr() 来对具有 true 和 false 两个属性的属性进行操作了。
那么我们的结论是：
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
治疗拖延症最好的方法就是立刻开始。
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.netjQuery中attr()和prop()在修改checked属性时的区别
投稿：whsnow
字体：[ ] 类型：转载 时间：
使用语句$.attr('checked',true)，将复选框的属性改为被选中，在chrome浏览器中第一次点击有效后面就不行了，IE8倒是没有问题
在做复选框全选按钮的时候，出现了一个问题，使用语句$.attr('checked',true)，将复选框的属性改为被选中，在chrome浏览器中第一次点击有效后面就不行了，IE8倒是没有问题。
百度了很久找到原因是HTML的属性分为attribute和property，暂且将后者称为特性。
checked属性即分为attribute-&checked，和property-&true,false。
对于一个checkbox，若未定义checked="checked"，alert($.attr("checked")) 的结果是undefined。若已定义则结果是checked。attribute并不随着checkbox的状态变化而改变。
使用prop($.attr("checked"))的话输出则分别为false和true。property则随其变化而变化。
所以在修改checked属性时要使用prop()。prop()在jQuery1.6版本后新增。
网上关于其他类似属性的图表：
另外关于在IE9之前版本中，如果property没有在DOM元素被移除之前删除，使用.prop()方法设置DOM元素property（简单类型除外：number、string、boolean）的值会导致内存泄露。为了安全的设置DOM对象的值，避免内存泄露，可以使用.data()方法。 目前尚未遇到，先记在这里。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jQuery.attr() 函数详解
attr()函数用于设置或返回当前jQuery对象所匹配的元素节点的属性值。该函数属于jQuery对象(实例)。如果需要删除DOM元素节点的属性，请使用函数。语法attr()函数有以下两种用法：用法一：jQueryObject.attr( attributeName [, value ] )设置或返回指定属性attributeName的值。如果指定了value参数，则表示设置属性attributeName的值为value；如果没有指定value参数，则表示返回属性attributeName的值。参数value还可以是函数，attr()将根据匹配的所有元素遍历执行该函数，函数中的this指针将指向对应的DOM元素。attr()还会为函数传入两个参数：第一个参数就是该元素在匹配元素中的索引，第二个参数就是该元素attributeName属性当前的值。函数的返回值就是为该元素的attributeName属性设置的值。用法二：jQueryObject.attr( object )以对象形式同时设置任意多个属性的值。对象object的每个属性对应attributeName，属性的值对应value。注意：attr()函数的所有&设置属性&操作针对的是当前jQuery对象所匹配的每一个元素；所有&读取属性&的操作只针对第一个匹配的元素。参数请根据前面语法部分所定义的参数名称查找对应的参数。参数描述attributeNameString类型指定的属性名称。value可选/String/Function类型指定的属性值，或返回属性值的函数。objectObject类型指定的对象，用于封装多个键值对，同时设置多项属性。如果参数value既不是函数类型，也不是字符串类型，则会调用方法，将其转为字符串。返回值attr()函数的返回值是任意类型，返回值的类型取决于当前attr()函数执行的是&设置属性&操作还是&读取属性&操作。如果attr()函数执行的是&设置属性&操作，则返回当前jQuery对象本身；如果是&读取属性&操作，则返回读取到的属性值。如果当前jQuery对象匹配多个元素，返回属性值时，attr()函数只以其中第一个匹配的元素为准。如果该元素没有指定的属性，则返回undefined。prop()和attr()的主要区别：函数针对的是DOM元素(JS Element对象)的属性，attr()函数针对的是DOM元素所对应的文档节点的属性。详情请查看。注意事项1、attr()函数在操作少数属性时可能会出现异常情况，例如value和tabindex属性。2、如果通过attr()函数更改&input&和&button&元素的type属性，在多数浏览器上将会抛出一个错误，因此该属性一般不允许在后期被更改。3、尽量不要使用attr()操作表单元素的checked、selected、disabled属性。在jQuery 1.6之前，attr()函数在检索某些属性(例如checked、selected、disabled等)时会考虑属性的值。以&input&元素的checked属性为例，如果该元素被选中，则返回true，否则(也就是没有checked属性)返回false。从jQuery 1.6开始，对于没有的属性，attr()函数一律返回undefined。同样以&input&元素为例，如果该元素被选中，则attr(&checked&)返回checked(字符串)；否则(即没有checked属性)返回undefined。甚至在某些版本(例如1.6和1.11.1)中，attr(&checked&)只返回该元素初始化时的&checked&状态值，之后即使更改了选中状态，attr(&checked&)的返回值也不会改变。因此请尽量不要使用attr()函数操作表单元素的checked、selected、disabled等属性，在jQuery 1.6及之后的版本中，你应该使用函数。4、在jQuery 1.6之前，attr()函数还可以设置或返回DOM元素的Element对象上的某些属性，例如：tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等属性。但是这些属性不属于元素的DOM属性范畴，从jQuery 1.6开始，你不能再使用attr()函数进行上述属性的操作，你应该使用函数。示例&说明以下面这段HTML代码为例：&div id=&n1&&
&p id=&n2& data-id=&25&&CodePlayer&/p&
&input id=&n3& name=&name& type=&text& label=&姓名& &
&img id=&n4& alt=&CodePlayer& src=&/image/blank.gif& &
&img id=&n5& alt=&站点logo& title=&专注于编程开发技术分享& src=&http://localhost/static/image/site-url.png& &
&ul id=&n6&&
&li id=&n7& uid=&21&&item1&/li&
&li id=&n8& uid=&23&&item2&/li&
&li id=&n9& uid=&35&&item3&/li&
&/div&我们编写如下jQuery代码：//设置n4(img元素)的src属性值
$(&#n4&).attr(&src&, &http://localhost/static/image/site-name.png&);
var $n2 = $(&#n2&);
// 获取n2的data-id属性的值
document.writeln( $n2.attr(&data-id&) ); // 25
// 获取n2的myAttr属性的值，没有该属性，返回undefined
document.writeln( $n2.attr(&myAttr&) ); // undefined
//只返回第一个匹配元素的uid属性的值
document.writeln( $(&li&).attr(&uid&) ); // 21
// 以对象形式同时设置所有img元素的多个属性值
$(&img&).attr( { height: 180, width: 180, &class&: &img-box& } );
document.writeln( $(&#n5&).attr(&height&) ); // 180
// 设置所有img元素的title属性值：
// 1.如果该元素已经有了title属性，则不作改变
// 2.如果该元素之前没有title属性，则设置title属性等于它的alt属性
$(&img&).attr(&title&, function(index, attrValue){
// 这里的this表示当前DOM元素
return attrValue== undefined ? this.alt : attrV
我们认为：用户的主要目的，是为了获取有用的信息，而不是来点击广告的。因此本站将竭力做好内容，并将广告和内容进行分离，确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信：只有给用户带来价值，用户才会给我们以回报。
打开导航菜单在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。
关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
上面的描述也许有点模糊，举几个例子就知道了。&
&a href="" target="_self" class="btn"&百度&/a&
&这个例子里&a&元素的DOM属性有&href、target和class"，这些属性就是&a&元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。
&a href="#" id="link1" action="delete"&删除&/a&
这个例子里&a&元素的DOM属性有&href、id和action&，很明显，前两个是固有属性，而后面一个&action&属性是我们自己自定义上去的，&a&元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。
再举一个例子：
&input id="chk1" type="checkbox" /&是否可见&input id="chk2" type="checkbox" checked="checked" /&是否可见
像checkbox，radio和select这样的元素，选中属性对应&checked&和&selected&，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true
如果上面使用attr方法，则会出现：
$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"
阅读(...) 评论()