jQuery源码解读之removeAttr()方法分析


Posted in Javascript onFebruary 20, 2015

本文较为详细的分析了jQuery源码解读之removeAttr()方法。分享给大家供大家参考。具体分析如下:

扩展jQuery原型对象的方法:

jQuery.fn.extend({

//name,传入要DOM元素要移除的属性名。

    removeAttr: function( name ) {
//使用jQuery.fn对象,即jQuery原型对象的each方法遍历当前选择器选择的jQuery对象数组,并返回该jQuery对象以便链式调用。

        return this.each(function() {

//调用jQuery的全局方法removeAttr,传入遍历出的DOM对象this和要移除的属性名name。

            jQuery.removeAttr( this, name );

        });

    }

});

jQuery的全局方法removeAttr

//扩展jQuery对象的全局方法

jQuery.extend({
//elem为遍历出的每个DOM对象,value为要移除的属性名。

    removeAttr: function( elem, value ) {

        var name, propName,

            i = 0,

//rnotwhite为(/\S+/g)

//如果value为" ",则逻辑与表达式的值为null

//如果value假设为"title href",则由于逻辑与操作符的两个操作数都不是布尔值,则返回第二个操作数,此时attrNames为["title", "href"]。

//match是JavaScript字符串的方法,在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,返回存放匹配结果的数组。其他类型都会报错。

            attrNames = value && value.match( rnotwhite );

//如果attrNames不为null,并且当前DOM对象的节点类型为1,进入if语句块,否则跳出函数,结束本次遍历,开始下次遍历。

        if ( attrNames && elem.nodeType === 1 ) {

//此时attrNames是个装有要移除属性名的数组,即["title", "href"]

//执行while循环,这种写法的意思是,先从attrNames取出一个元素赋值给name, i自增1,然后判断name是否有值,有值,进入循环执行,执行完毕后开始下次循环,直到name无值,跳出循环。

            while ( (name = attrNames[i++]) ) {

//如果属性名与js关键字同名的如"for"和"class",替换为"htmlFor"和"className"。

                propName = jQuery.propFix[ name ] || name;
//如果是布尔值属性特别对待

                if ( jQuery.expr.match.bool.test( name ) ) {

//getSetInput检测Input元素是否支持getAttribute("value")

//getSetAttribute检测是否支持设置驼峰命名格式的属性名

//!ruseDefault.test( name )不区分大小写检测name是否是checked或者selected属性,

                    if ( getSetInput && getSetAttribute || !ruseDefault.test( name ) ) {

//移除布尔值属性实际上是给布尔值属性赋值为false

                        elem[ propName ] = false;

                    } else {

//支持ie9以下

//将"default-checked"这种属性转换为"defaultChecked",并赋值false

                        elem[ jQuery.camelCase( "default-" + name ) ] =

                            elem[ propName ] = false;

                    }

                } else {

//如果不是布尔值属性,调用jQuery的全局attr方法设置属性

                    jQuery.attr( elem, name, "" );

                }

//getSetAttribute用来测试setAttribute是否支持设置驼峰命名形式的属性名,如果可以,在使用setAttribute和getAttribute时,需要使用修正后的属性名。(兼容ie6/7)

//如果getSetAttibute等于false,说明不支持,则使用修正后的属性名,支持,使用原始的属性名。

//调用DOM原生的removeAttribute方法,移除属性

                elem.removeAttribute( getSetAttribute ? name : propName );

            }

        }

    }

});

关键字属性修正
jQuery.extend({

    propFix: {

        "for": "htmlFor",

        "class": "className"

    }

});

jQuery.extend({

    camelCase: function( string ) {

        return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );

    }

});

var nodeHook, boolHook,

    attrHandle = jQuery.expr.attrHandle,

    ruseDefault = /^(?:checked|selected)$/i,

    getSetAttribute = support.getSetAttribute,

    getSetInput = support.input;

// Setup

div = document.createElement( "div" );

div.setAttribute( "className", "t" );

div.innerHTML = "  <link/><table></table><a href='/a'>a</a><input type='checkbox'/>";

a = div.getElementsByTagName("a")[ 0 ];

// First batch of tests.

select = document.createElement("select");

opt = select.appendChild( document.createElement("option") );

input = div.getElementsByTagName("input")[ 0 ];

a.style.cssText = "top:1px";

// Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)

support.getSetAttribute = div.className !== "t";

检测input是否支持getAttribute("value")

// Support: IE8 only

// Check if we can trust getAttribute("value")

input = document.createElement( "input" );

input.setAttribute( "value", "" );

support.input = input.getAttribute( "value" ) === "";

检测是否布尔值属性

booleans = "checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",
matchExpr = {

    "bool": new RegExp( "^(?:" + booleans + ")$", "i" )

},

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
JS实现5秒钟自动封锁div层的方法
Feb 20 #Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 #Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 #Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 #Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 #Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 #Javascript
JQuery实现展开关闭层的方法
Feb 17 #Javascript
You might like
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PDO::rollBack讲解
2019/01/29 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
js图片跟随鼠标移动代码
2015/11/26 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
python中 logging的使用详解
2017/10/25 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
wxPython实现绘图小例子
2019/11/19 Python
Python ATM功能实现代码实例
2020/03/19 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
优秀辅导员事迹材料
2014/02/16 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
企业标语大全
2014/07/01 职场文书
北京英语导游词
2015/02/12 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android