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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
Javascript函数的参数
Jul 16 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
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
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
番茄的表单验证类代码修改版
2008/07/18 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
js获取Get值的方法
2016/09/29 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
JSON 数据详解及实例代码分析
2017/01/20 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
青年教师培训方案
2014/02/06 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
怎样写观后感
2015/06/19 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
如何通过一篇文章了解Python中的生成器
2022/04/02 Python