解决jquery中全选点击第二次不生效的问题
来源:互联网 发布:vb集成开发环境调试 编辑:程序博客网 时间:2024/06/07 05:43
今天在开发一个前端选项全选和全不选的功能,发现点击第一次生效,但是第二次就没有效果了,后面把attr() 方法 改成就prop()就可以了!
一、jquery attr()方法有4个表达式
1. attr(属性名)
获取属性的值(取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined )
2. attr(属性名, 属性值)
设置属性的值 (为所有匹配的元素设置一个属性值。)
3. attr(属性名,函数值)
设置属性的函数值 (为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。)
4.attr(properties)
给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)
二、jquery中attr方法代码
attr: function( elem, name, value, pass ) { var ret, hooks, notxml, nType = elem.nodeType; // don't get/set attributes on text, comment and attribute nodes if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { return; } 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 ); return; } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) { return ret; } else { elem.setAttribute( name, value + "" ); return value; } } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) { return ret; } else { ret = elem.getAttribute( name ); // Non-existent attributes return null, we normalize to undefined return ret === null ? undefined : ret; }}
三、jquery中.prop()
四、jquery中prop方法代码
prop: function( elem, name, value ) { var ret, hooks, notxml, nType = elem.nodeType; // don't get/set properties on text, comment and attribute nodes if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { return; } notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); if ( notxml ) { // Fix name and attach hooks name = jQuery.propFix[ name ] || name; hooks = jQuery.propHooks[ name ]; } if ( value !== undefined ) { if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { return ret; } else { return ( elem[ name ] = value ); } } else { if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { return ret; } else { return elem[ name ]; } }}
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,这是转化成JS对象的一个属性。
五. 特性(properties)和属性(attributes)有何区别?
DOM对象大部分的property都有对应的attribute,名字也基本一样(也有例外,如“class”这个attribute对应的property名字为“className”),这些property也和其对应的attribute保持一样的状态或值。但一些Boolean类型的属性(如checked, selected, disabled等)有些特殊,其attribute只保留初始值(默认值), property才是当前最新的状态或值。如一个默认勾选的checkbox,当你在页面去除勾选的时候,checked这个property已由true变为false,而checked这个attribute仍然保持“checked”这个初始值。由此可见attribute和property完全不是同一个东西,但“通用”的attr方法似乎在某种程度上模糊了这个区别。
六. attr()和prop()有何区别?
使用prop的时候,返回值是标准属性,true/false,比如$('#checkbox').prop('disabled'),不会返回“disabled”或者“”,只会是true/false。当然赋值的时候也是如此。使用attr,如disabled='disabled'时,为true,没有选中时,则为undefined。如此,我们便统一了所有操作,无论是从语法上还是语义上。
.prop()方法应该被用来处理boolean attributes/properties以及在html(比如:window.location)中不存在的properties。其他所有的attributes可以而且应该继续使用.attr()方法来进行操作。
七、什么时候使用attr(),什么时候使用prop()?
1、添加属性名称该属性就会生效应该使用prop();
2、是有true,false两个属性使用prop();
3、其他则使用attr();
4、简单的说,那些只添加属性名不添加属性值就会生效,或者是,只存在true/false的属性就需要使用prop()方法,比如selectedIndex
, tagName
, nodeName
, nodeType
, ownerDocument
, defaultChecked
, 和 defaultSelected
。
- 解决jquery中全选点击第二次不生效的问题
- jquery checkbox 全选反选,解决第二次失败的问题
- check第二次不生效问题
- 解决 AndroidStudio 中 gradle 的 buildTypes 配置不生效问题
- 解决在Thymeleaf中layout:fragment不生效的问题
- 关于jQuery实现CheckBox全选只能生效一次的问题
- MFC中点击ListControl时,第一次点击不响应NM_CLICK消息,第二次才响应的问题
- 解决checkbox全选按钮只生效一次的问题
- 如何解决.gitignore不生效的问题
- Android中setHeight不生效的问题
- FragmentTabHost嵌套ViewPager,Fragment第二次点击不显示的问题
- 关于ListView中点击条目不生效的解决办法
- jquery 全选 第二次失效
- 解决div的高度定义在IE6中不生效的问题
- 异常处理:SSH整合中OpenSessionInViewFilter不生效问题的解决
- jQuery-Ajax-Timeout属性不生效的问题
- jquery 触发元素 a 的 click() 事件不生效 问题
- 解决java修改的类编译不生效的问题
- 26. Remove Duplicates from Sorted Array
- 解决UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe5 in position 108: ordinal not in range(12
- 如何在mac本上安装android sdk
- 图像中区域的表示
- 单例模式的优缺点和使用场景
- 解决jquery中全选点击第二次不生效的问题
- html5的canvas画三角形和圆形,以及太极阵
- 链表划分
- XML 之解析sax(2) 解析到一个对象中
- android中Button,ImageButton和ToggleButton
- 《Residual Networks Behave Like Ensembles of Relatively Shallow Networks》笔记
- SpringMVC使用ajax返回json
- 博客第一天
- 关于python进制与字符转换的问题研究