jQuery removeAttr() 源码解读
removeAttr比attr的代码要简单很多~~~
removeAttr: function( name ) {
return this.each(function() {
jQuery.removeAttr( this, name );
});
},
内部调用了jQuery.removeAttr方法,所以我们直接看它就可以啦~~
removeAttr: function( elem, value ) {
var name, propName,
i = 0,
//core_rnotwhite=/\S+/g
//value存在并且value可以匹配非空白字符
//这一步很帅的一点就是它不动声色地把多空格分隔的字符串转为数组,所以removeAttr是可以同时移除多个属性的
attrNames = value && value.match( core_rnotwhite );
if ( attrNames && elem.nodeType === 1 ) {//属性节点
while ( (name = attrNames[i++]) ) {
//propFix 属性修正
propName = jQuery.propFix[ name ] || name;
// Boolean attributes get special treatment (#10870)
//jQuery.expr.match.bool=/^(?:checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped)$/i
if ( jQuery.expr.match.bool.test( name ) ) {
// Set corresponding property to false
elem[ propName ] = false;
}
elem.removeAttribute( name );
}
}
}
console一下jQuery.propFix,我们发现,它原来是这样一个对象:

cellpadding-->cellPadding ...
是对大小写的修正,都转为小驼峰法
class-->className for-->htmlFor
是考虑到js中关键字,所以将class映射到className ,js原生中就可以用element.getAttribute("className")
再看jQuery.expr.match.bool这个正则,它匹配的这些属性如checked、selected、async都是bool属性,jquery为什么要特别加一句
elem[ propName ] = false;呢? 因为对于低版本的IE(6、7)来说,单单removeAttribute并不能移除bool属性。不加这一句,我们$().attr("checked")的时候,还是会返回“checked”。
测试如下:
DEMO1
<body>
<input id="ck" type="checkbox" checked>
<script type="text/javascript">
var ck=document.getElementById('ck');
//ck.checked=false;
ck.removeAttribute('checked');
alert(ck.getAttribute("checked"));
</scrip

DEMO2
<body>
<input id="ck" type="checkbox" checked>
<script type="text/javascript">
var ck=document.getElementById('ck');
ck.checked=false;
ck.removeAttribute('checked');
alert(ck.getAttribute("checked"));
</script>
</body>

jQuery removeAttr() 源码解读的更多相关文章
- jQuery.Callbacks 源码解读二
一.参数标记 /* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中,确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false,则 ...
- jQuery attr() 源码解读
我们知道,$().attr()实质上是内部调用了jQuery.access方法,在调用时jQuery.attr作为回调传入.在通过种种判断(参看jQuery.access()方法)之后,取值和赋值最后 ...
- jQuery toggleClass 源码解读
toggleClass: function( value, stateVal ) { var type = typeof value;//值类型 if ( typeof stateVal === &q ...
- jquery.fileupload源码解读笔记
基础编程风格 新建 test.html 和 test.js和 main.js和 无论哪种顺序 <body> <script src="/Sandeep/js/jquery ...
- jQuery.extend()源码解读
// extend方法为jQuery对象和init对象的prototype扩展方法// 同时具有独立的扩展普通对象的功能jQuery.extend = jQuery.fn.extend = funct ...
- jQuery框架源码解读
1.jQuery 1.9.1 parseJSON: function( data ) { // Attempt to parse using the native JSON parser first ...
- jQuery position() 源码解读
position的代码比较简单... position: function() { if ( !this[ 0 ] ) { return; } var offsetParent, offset, el ...
- jquery offsetParent()源码解读
offsetParent: function() { return this.map(function() { var offsetParent = this.offsetParent || docE ...
- jQuery addClass() 源码解读
addClass: function( value ) { var classes, elem, cur, clazz, j, i = 0, len = this.length, proceed = ...
随机推荐
- 事件序列化器 Flume 的无数据丢失保证,Channel 和事务
小结: 1.Flume 的持久性保证依赖于使用的持久性Channel 的保证 通过事件序列化器将Flume事件转化为外部存储格式 主要的事件序列化器: 1.文本 2.带有头信息的文本 3.Avro序列 ...
- Spring Base
1.在java开发领域,Spring相对于EJB来说是一种轻量级的,非侵入性的Java开发框架,曾经有两本很畅销的书<Expert one-on-one J2EE Design and Deve ...
- 百度dureos CMake Error
CMake Error: CMAKE_C_COMPILER not set, after EnableLanguage CMake Error: CMAKE_CXX_COMPILER not set, ...
- webpack 的编译原理
自从接触了react,vue 这两个框架,都会用到webpack这个打包工具.面试的时候,经常被问到知道webpack的编译原理吗? 可以简单的介绍一下.每每这个时候都被问的哑口无言,平时用的时候挺顺 ...
- hdu 4544 湫湫系列故事——消灭兔子(优先队列)
题意:n只兔子(有血量),m只箭(有伤害.花费),每只兔子只能被射一次,求射死所有兔子的最少花费. 思路:贪心,2重循环,兔子从血量高到低,箭从伤害高到低,用能射死兔子的箭中花费最小的箭射. #inc ...
- hdu 4763 Theme Section(next数组找串中三段相等)
题意:在一个串中找 EAEBE 的形式的最长的E,其中E为一个字符串,也就是说找到前缀与后缀相同,并且串中还存在相同的一段,它们不能重复. 思路:利用next数组,next[len]代表的即是最大的相 ...
- [Selenium] common functions comparison
1.Wait for element in default time or self defined time When the element need some time to be prese ...
- 51Nod 1717
链接 分析:对于任意一个数,它的约数总是成对出现的,但是对于完全平方数,它因为有两个约数不相等,所以只会出现奇数次,所以最终的结果就是减去完全平方数 #include "iostream&q ...
- [SHOI 2009] 会场预约
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2028 [算法] 直接用std :: set维护即可 时间复杂度 : O(NlogN) ...
- threesixty.min.js 和jquery.threesixty.js使用总结----实现360度展示
最近公司做一个项目需要360度展示汽车的外观,就用到了threesixty.min.js,自己总结一下使用方法: treesixty.min.js 源码: /*! threesixty-slider ...