jQuery 源码分析(十二) 数据操作模块 html特性 详解
jQuery的属性操作模块总共有4个部分，本篇说一下第1个部分:HTML特性部分，html特性部分是对原生方法getAttribute()和setAttribute()的封装，用于修改DOM元素的特性的
jQuery的静态方法含有如下API:
- $.attr(elem, name, value) ；设置或读取html属性，该方法有三种用法:
·$.attr(elem,name,null) ;如果value为null则调用jQuery.removeAttr(elem, name)删除该属性
·$.attr(elem,name,value) ;设置elem元素的name属性值为value。
·$.attr(elem,name) ;获取elem元素的name属性
- $.removeAttr(elem, name) ;从DOM元素elem上移除name属性，name可以是单个字符串，也可以是空格分隔的多个html属性。对于应布尔属性会同步设置对应的DOM属性为false。
jQuery/$ 实例方法(可以通过jQuery实例调用的):
- attr(name, value) ;移除、设置html属性，有以下方法
·attr(obj) ;参数1是对象时 ;access()函数中验证 表示一次性设置多个属性
·attr(name,value) ;为每个匹配元素设置一个HTML属性 ;value可以是一个函数，取值为返回值,也可以为null时表示删除该属性
·attr(name,NULL) ;参数2为NULL时表示删除所有匹配元素的name特性，间接调用removeAttr()
·attr(name) ;参数1是字符串时，参数2未指定或者设置为false ;表示获取第一个匹配元素的HTML属性值。
- removeAttr(name) ;移除每一个匹配元素的一个或多个HTML属性，name是要是移除的html属性，多个可以用空格分隔
举个栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<a>链接</a>
<button>淘宝</button> <!--点击后a标签将导航到淘宝-->
<button>百度</button> <!--点击后a标签将导航到百度-->
<button>移除</button> <!--点击后a标签将取消导航-->
<script>
let a = document.getElementsByTagName('a')[0], //获取a标签的引用
b1 = document.getElementsByTagName('button')[0], //淘宝按钮的引用
b2 = document.getElementsByTagName('button')[1], //百度按钮的引用
b3 = document.getElementsByTagName('button')[2]; //移除按钮的引用
b1.addEventListener('click',function(){
$.attr(a,'href','http://www.taobao.com'); //通过jQuery的静态方法设置href属性
})
b2.addEventListener('click',function(){
$('a').attr('href','http://www.baidu.com') //通过jQuery的实例方法设置href属性
})
b3.addEventListener('click',function(){
$("a").removeAttr('href') //移除href属性
})
</script>
</body>
</html>
渲染的页面如下:
此时对应的DOM结构如下:
当我们点击淘宝按钮后页面变为了如下:
DOM修改了这样子:
此时点击这个a标签将链接到淘宝网，然后我们点击百度，链接会链接到百度去的，最后点击移除时，该a标签又会变为初始化的状态。这就是jQuery的html特性操作
源码分析
$.attr和$.removeAttr实现如下:
jQuery.extend({
attr: function( elem, name, value, pass ) { //设置或读取html属性，是对原生方法getAttribute()和setAttribute()的简化
var ret, hooks, notxml,
nType = elem.nodeType;
// don't get/set attributes on text, comment and attribute nodes
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { //如果elem为空 或者是文本、注释、属性节点
return; //直接返回，不接着处理
}
if ( pass && name in jQuery.attrFn ) {
return jQuery( elem )[ name ]( value );
}
// Fallback to prop when attributes are not supported
if ( typeof elem.getAttribute === "undefined" ) { //如果不支持方法getAttribute
return jQuery.prop( elem, name, value ); //则调用对应的DOM属性
}
notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); //判断elem是否不是xml文档元素
// All attributes are lowercase
// Grab necessary hook if one is defined
if ( notxml ) {
name = name.toLowerCase();
hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
}
if ( value !== undefined ) { //如果传入了参数value,表示是设置值
if ( value === null ) { //若值是null，则移除该name属性
jQuery.removeAttr( elem, name );
return;
} else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) { //优先调用对应的修正对象的修正方法set()
return ret;
} else {
elem.setAttribute( name, "" + value ); //否则调用原生方法setAttribute()设置html属性
return value;
}
} else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) { //如果未传入参数value,优先调用对应的修正对象的修正方法get()
return ret;
} else {
ret = elem.getAttribute( name ); //否则调用原生方法getAttrubute()读取html属性。
// Non-existent attributes return null, we normalize to undefined
return ret === null ?
undefined :
ret;
}
},
removeAttr: function( elem, value ) { //从DOM元素上移除一个或多个html属性，多个html属性用空格分隔。是对removeAttribute的封装和扩展。
var propName, attrNames, name, l,
i = 0;
if ( value && elem.nodeType === 1 ) { //如果设置了value参数 且 elem是一个元素节点
attrNames = value.toLowerCase().split( rspace ); //执行后attrNames是一个数组，保存了要移除的属性名:比如:Array [ "id", "name" ] rspace = /\s+/,
l = attrNames.length; //需要移除的属性的个数
for ( ; i < l; i++ ) { //遍历数组attrNames，逐个移除html属性。
name = attrNames[ i ]; //name是要移除的属性名
if ( name ) {
propName = jQuery.propFix[ name ] || name; //如果属性名name需要修正，则修正属性
// See #9699 for explanation of this approach (setting first, then removal)
jQuery.attr( elem, name, "" ); //先将html属性设置为空字符串，以解决Webkit内核浏览器不能
elem.removeAttribute( getSetAttribute ? name : propName ); //调用原生方法removeAttribute删除对应的属性，如果jQuery.support.getSetAttribute为true则删除name属性，如果为false，表示在IE6、7下则删除特殊属性。
// Set corresponding property to false for boolean attributes
if ( rboolean.test( name ) && propName in elem ) { //对应布尔属性，同步设置对应的DOM属性为false
elem[ propName ] = false;
}
}
}
}
},
/**/
})
对于jQuery实例来说，它调用了不同的工具函数，最后还是执行上面讲解的静态方法的，如下:
jQuery.fn.extend({
attr: function( name, value ) { //移除、设置html属性
return jQuery.access( this, name, value, true, jQuery.attr ); //调用了jQuery.access工具函数，参数5传入了jQuery.attr
},
removeAttr: function( name ) { //移除html属性
return this.each(function() { //通过each函数方法，依次执行jQuery.removeAttr()
jQuery.removeAttr( this, name );
});
},
/*略*/
}）
由于jQuery中的特性、DOM属性和样式操作的函数参数可以是差不多的，jQuery就定义了一个access函数，为.attr()、.prop()、.css()提供支持，这样我们通过jQuery实例设置特性、属性和样式时可以传入的参数类型，例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<a>链接</a>
<script>
$('a').attr('href','http://www.cnblogs.com') //参数2是个字符串
$('a').attr('href',()=>'http://www.cnblogs.com') //参数2还是是个函数
$('a').attr({href:'http://www.cnblogs.com'}) //也可以传入一个对象
</script>
</body>
</html>
我们传入不同的参数，都可以实现设置特性的效果，这就是$.access的作用，$.access的源码实现如下:
jQuery.extend({
access: function( elems, key, value, exec, fn, pass ) { //为集合中的元素设置一个或多个属性值，或者读取第一个元素的属性值
var length = elems.length;
// Setting many attributes
if ( typeof key === "object" ) { //如果key是对象，表示要设置多个属性，则遍历该对象循环执行.access函数
for ( var k in key ) {
jQuery.access( elems, k, key[k], exec, fn, value );
}
return elems;
}
// Setting one attributes
if ( value !== undefined ) { //如果参数value不是undefined，表示要设置单个属性
// Optionally, function values get executed if exec is true
exec = !pass && exec && jQuery.isFunction(value); //修正exec参数。如果没有传入pass参数或者该参数值是false，且参数exec为true,且value是函数则设置exec为true,否则exec为false。
for ( var i = 0; i < length; i++ ) {
fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass ); //遍历元素集合elems，为每个元素调用回调函数fn
}
return elems; //遍历完成后返回元素elems。以支持链式操作
}
// Getting an attribute
return length ? fn( elems[0], key ) : undefined; //当value参数为空，且元素集合elems不为空则获取第一个匹配元素相关的信息,即执行fn函数
},
/**/
})
writer by:大沙漠 QQ:22969969
之后的DOM属性和样式操作都会借用access这个工具方法的。
jQuery 源码分析(十二) 数据操作模块 html特性 详解的更多相关文章
- jQuery 源码分析(十四) 数据操作模块 类样式操作 详解
jQuery的属性操作模块总共有4个部分,本篇说一下第3个部分:类样式操作部分,用于修改DOM元素的class特性的,对于类样式操作来说,jQuery并没有定义静态方法,而只定义了实例方法,如下: a ...
- jQuery 源码分析(十五) 数据操作模块 val详解
jQuery的属性操作模块总共有4个部分,本篇说一下最后一个部分:val值的操作,也是属性操作里最简单的吧,只有一个API,如下: val(vlaue) ;获取匹配元素集合中第一个元素的 ...
- jQuery 源码解析(二十二) DOM操作模块 复制元素 详解
本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...
- jQuery 源码分析(十九) DOM遍历模块详解
jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...
- Vue.js 源码分析(十四) 基础篇 组件 自定义事件详解
我们在开发组件时有时需要和父组件沟通,此时可以用自定义事件来实现 组件的事件分为自定义事件和原生事件,前者用于子组件给父组件发送消息的,后者用于在组件的根元素上直接监听一个原生事件,区别就是绑定原生事 ...
- 一个普通的 Zepto 源码分析（二） - ajax 模块
一个普通的 Zepto 源码分析(二) - ajax 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以 ...
- jQuery 源码分析(十) 数据缓存模块 data详解
jQuery的数据缓存模块以一种安全的方式为DOM元素附加任意类型的数据,避免了在JavaScript对象和DOM元素之间出现循环引用,以及由此而导致的内存泄漏. 数据缓存模块为DOM元素和JavaS ...
- jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解
本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html) ;在每个匹配元素的外层添加一层DOM元素 ...
- jQuery 源码分析(十三) 数据操作模块 DOM属性 详解
jQuery的属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性) DO ...
随机推荐
- layui多个时间选择器出现闪退问题
1.出现问题的代码 laydate.render({ elem: '#startDate' // }); laydate.render({ elem: '#endDate' // }); laydat ...
- java基础 - 泛型的使用
泛型的使用方式有泛型类,泛型接口,泛型方法. 泛型的意思是把参数类型也当成参数传入,也就是在使用时(类实例化或调用方法时)传入类型. 泛型类 在实例化时传入参数类型,不能对泛型类使用instancec ...
- Python：将爬取的网页数据写入Excel文件中
Python:将爬取的网页数据写入Excel文件中 通过网络爬虫爬取信息后,我们一般是将内容存入txt文件或者数据库中,也可以写入Excel文件中,这里介绍关于使用Excel文件保存爬取到的网页数据的 ...
- 什么是单点登录，php是如何实现单点登录的
单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任.单点登录在大型网站里使用得 ...
- CSS权重的进制问题
这是复习篇的第一个知识点,(CSS权重进制在IE6为256,后来扩大到了65536.而现代浏览器则采用更大的数量)在说这个知识点之前我们先来看一个例子 <!DOCTYPE html> &l ...
- 软件设计之基于Java的连连看小游戏（一）——开题及游戏首页的制作
原本计划紧张忙碌的考试月在图书馆和实验室度过,结果突如其来为期两周的软件设计把课余时间几乎捆绑在了机房.软设没有太多知识上的要求,只要成品简洁美观.实用准确即可.考虑了很久决定要用Java swing ...
- [转]UiPath： How to Capture a Mouse Event on Hover Menus?
本文转自:https://www.uipath.com/kb-articles/how-to-capture-mouse-event-on-hover-menus he Knowledgebase a ...
- redis windows版安装
首先到 https://github.com/ServiceStack/redis-windows 下载redis 然后将下载的文件解压 然后获取里面的这个压缩包并且解压 这是2.8.2101版本的, ...
- View和ViewGroup
1.继承关系 2.组合关系 3.View 的绘制流程 3.1.创建R.attrs.styleable,申明需要用到的属性值,在使用时可以根据属性进行定义 3.2.extends View ,依次 ...
- ABP入门教程4 - 初始化运行
点这里进入ABP入门教程目录 编译解决方案 重新生成解决方案,确保生成成功. 连接数据库 打开JD.CRS.Web.Host / appsettings.json,修改数据库连接设置Connectio ...