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 相关文章推荐
(function($){...})(jQuery)的意思
Jul 22 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
angular实现商品筛选功能
Feb 01 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
React服务端渲染(总结)
Jul 01 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 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
Zend Guard一些常见问题解答
2008/09/11 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
php中的比较运算符详解
2013/10/28 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
详解vue v-model
2020/08/31 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Python多线程原理与用法详解
2018/08/20 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
Melissa香港官网:MDreams
2016/07/01 全球购物
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
写自荐信有哪些不宜?
2013/10/17 职场文书
五年级科学教学反思
2014/02/05 职场文书
端午节活动策划方案
2014/03/09 职场文书
接收函
2019/04/22 职场文书
导游词之上海豫园
2019/10/24 职场文书
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers