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>

				
时间: 2024-10-13 14:51:31

jQuery removeAttr()方法 源码解读的相关文章

jQuery val()方法源码解读

val: function( value ) { var hooks, ret, isFunction, elem = this[0]; if ( !arguments.length ) {//无参数 if ( elem ) {//第一个元素 //考虑元素是checkbox,radio,option或者select的情况,这时有val钩子 hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerC

jQuery.data() 与 jQuery(elem).data()源码解读

之前一直以为 jQuery(elem).data()是在内部调用了 jQuery.data(),看了代码后发现不是.但是这两个还是需要放在一起看,因为它们内部都使用了jQuery的数据缓存机制.好吧,重点就是data_user对象,跟另一个data_priv是姐妹~~ 先来看下jQuery.data(): 它调用了data_user.access( elem, name, data ); 那么data_user到底是什么鬼呢?? 我们看到,它是由Data构造的实例,Data构造器都做了一些什么呢

亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.com/amazon-site-navigation/ 它提到亚马逊左侧菜单的秘密在于它有一个三角形的缓冲延迟区域. 当鼠标在这个蓝色范围内移动时,会有延迟,所以右侧的二级菜单才不会马上变化. 顺着博客在github找到了这个插件:https://github.com/jayuh/jQuery-menu

sklearn中LinearRegression关键源码解读

问题的引入 我们知道,线性回归方程的参数,可以用梯度下降法求解,或者用正规方程求解. 那sklearn.linear_model.LinearRegression中,是不是可以指定求解方式呢?能不能从中获取梯度相关信息呢? 下面是线性回归最简单的用法. from sklearn import linear_model # Create linear regression object regr = linear_model.LinearRegression() # Train the model

jQuery源码解读第4章---对extend的解读

为什么我们一开始就说extend呢 其实我读源码的过程中,发现其实我们方法就在源码中都调用了extend Callbacks Deferred这些工具方法 所以我们很有必要先学习这些,,,,,,,,,,,这样对我们后续的学习很有帮助 对extend的学习,,,,,首先看下extend我们平时是怎么用的 1...合并对象 extend(dest,src1,src2,,,,,) 它的含义就是将src1,src2......合并到dest中 然后放回的结果就是合并后的dest eq: var dest

jQuery的getText()方法源码

/** * Utility function for retrieving the text value of an array of DOM nodes * @param {Array|Element} elem */ getText = Sizzle.getText = function( elem ) { var node, ret = "", i = 0, nodeType = elem.nodeType; if ( !nodeType ) { // If no nodeTyp

Jquery.cookie.js 源码和使用方法

jquery.cookie.js源码和使用方法 jQuery操作cookie的插件,大概的使用方法如下 $.cookie(‘the_cookie’); //读取Cookie值$.cookie(’the_cookie’, ‘the_value’); //设置cookie的值$.cookie(’the_cookie’, ‘the_value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});//新建一个cookie 包括有效

jQuery方法源码解析--jQuery($)方法(一)

jQuery方法源码解析--jQuery($)方法 注: 1.本文分析的代码为jQuery.1.11.1版本,在官网上下载未压缩版即可 2.转载请注明出处 jQuery方法: 这个方法大家都不陌生,在使用过程中,它还有另外一个名字,美元符号:$,$(...)其实就是jQuery(...); 它有很多种用法,通常都返回一个jquery对象,也可以作为$(document).ready(...);的简写形式,分析之前先看一下jQuery都有什么用法. 1.jQuery( selector [, co

jQuery之Deferred源码剖析

一.前言 大约在夏季,我们谈过ES6的Promise(详见here),其实在ES6前jQuery早就有了Promise,也就是我们所知道的Deferred对象,宗旨当然也和ES6的Promise一样,通过链式调用,避免层层嵌套,如下: //jquery版本大于1.8 function runAsync(){ var def = $.Deferred(); setTimeout(function(){ console.log('I am done'); def.resolve('whatever'