jQuery 源码分析(十三) 数据操作模块 DOM属性 详解
jQuery的属性操作模块总共有4个部分，本篇说一下第2个部分:DOM属性部分，用于修改DOM元素的属性的(属性和特性是不一样的，一般将property翻译为属性，attribute翻译为特性)
DOM属性的静态方法接口如下:
- prop(elem, name, value) ;设置或读取DOM属性，有两种用法，如下
·$.prop(elem,name,value) ;传入第三个参数表示设置elem元素的name属性值为value
·$.prop(elem,name,) ;第三个参数为传入或者设置为undefined则表示获取elem的name属性
jQuery/$ 实例方法(可以通过jQuery实例调用的):
writer by:大沙漠 QQ:22969969
- prop(name, value) ;设置或读取DOM属性，有以下用法
.prop(obj) ;参数1是对象时
.prop(name) ;参数1是字符串时，参数2未指定或者设置为undefined时,表示获取第一个匹配元素属性为name的值
.prop(name,value) ;为每个匹配元素的谁能够设置一个值
- removeProp(name) 从每个匹配元素上移除一个name属性,name可以是一个或多个dom属性名(用空格分开)
举个栗子:
<!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>
<input type="text">
<button id="b1">设置值</button>
<button id="b2">获取值</button>
<script>
let input = document.getElementsByTagName('input')[0],
b1 = document.getElementsByTagName('button')[0],
b2 = document.getElementsByTagName('button')[1];
b1.onclick = ()=>{
$('input').prop('value',555) //设置输入框的值为555 等于$.prop(input,'value',555)
}
b2.onclick = ()=>{
let result = $('input').prop('value'); //获取输入框的值 等于:let result = $.prop(input,'value');
console.log(result);
}
</script>
</body>
</html>
渲染如下:
我们点击设置值按钮值就会变为555了:
然后点击获取值，就会获输入框这个DOM对象的value值:
源码分析
$.prop实现如下:
jQuery.extend({
prop: function( elem, name, value ) { //设置或读取DOm属性。elem是要读取、设置的DOM元素，name是要操作的DOM属性名、value是要操作的DOM属性值
var ret, hooks, notxml,
nType = elem.nodeType;
if ( !elem || nType === 3 || nType === 8 || nType === 2 ) { //如果elem为空 或者是文本、注释、属性节点
return; //直接返回，不接着处理
}
notxml = nType !== 1 || !jQuery.isXMLDoc( elem ); //是否为xml文档元素
if ( notxml ) { //如果不是xml文档元素
name = jQuery.propFix[ name ] || name; //修正DOM属性名
hooks = jQuery.propHooks[ name ]; //修正扩展DOM属性修正对象
}
if ( value !== undefined ) { //如果value不为空，则设置值
if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) { //优先调用修正方法set()
return ret;
} else {
return ( elem[ name ] = value ); //设置值，并将值返回
}
} else { //如果value为空则读取name的值
if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) { //优先调用修正方法get()
return ret;
} else {
return elem[ name ]; //获取对应的值
}
}
},
/**/
})
挺简单的吧，对于jQuery实例来说，它和HTMl特性部分一样，如下:
jQuery.fn.extend({
prop: function( name, value ) { //设置或读取DOM属性
return jQuery.access( this, name, value, true, jQuery.prop ); //也是借用了$.access工具方法
},
removeProp: function( name ) { //从每个匹配元素上移除一个DOM属性
name = jQuery.propFix[ name ] || name; //如果属性名name需要修正，则修正属性
return this.each(function() {
// try/catch handles cases where IE balks (such as removing a property on window)
try {
this[ name ] = undefined; //先设置为undefined
delete this[ name ]; //再删除属性
} catch( e ) {}
});
},
/*略*/
})
我们可以看到,jQuery实例的prop方法也是借用了$.access工具方法，$.access在HTML特性部分已经讲过了，这里不说了。
jQuery 源码分析(十三) 数据操作模块 DOM属性 详解的更多相关文章
- jQuery 源码分析(十六) 事件系统模块 底层方法 详解
jQuery事件系统并没有将事件监听函数直接绑定到DOM元素上,而是基于数据缓存模块来管理监听函数的,事件模块代码有点多,我把它分为了三个部分:分底层方法.实例方法和便捷方法.ready事件来讲,好理 ...
- Vue.js 源码分析(十三) 基础篇 组件 props属性详解
父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...
- jQuery 源码分析(十) 数据缓存模块 data详解
jQuery的数据缓存模块以一种安全的方式为DOM元素附加任意类型的数据,避免了在JavaScript对象和DOM元素之间出现循环引用,以及由此而导致的内存泄漏. 数据缓存模块为DOM元素和JavaS ...
- Vue.js 源码分析(十一) 基础篇 过滤器 filters属性详解
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...
- Vue.js 源码分析(五) 基础篇 方法 methods属性详解
methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head&g ...
- jQuery 源码解析(三十一) 动画模块 便捷动画详解
jquery在$.animate()这个接口上又封装了几个API,用于进行匹配元素的便捷动画,如下: $(selector).show(speed,easing,callback) ;如 ...
- jQuery 源码分析(十二) 数据操作模块 html特性 详解
jQuery的属性操作模块总共有4个部分,本篇说一下第1个部分:HTML特性部分,html特性部分是对原生方法getAttribute()和setAttribute()的封装,用于修改DOM元素的特性 ...
- jQuery源码分析(九) 异步队列模块 Deferred 详解
deferred对象就是jQuery的回调函数解决方案,它解决了如何处理耗时操作的问题,比如一些Ajax操作,动画操作等.(P.s:紧跟上一节:https://www.cnblogs.com/grea ...
- Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解
当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...
随机推荐
- 谷歌chrome浏览器被毒霸上网导航www.uu114.cn劫持 chrome://version命令行被篡改
问题描述 win10系统更新, 谷歌chrome浏览器打开后自动跳转到被劫持的网站.我的被hao123劫持, 瞬间对hao123的好感度下降浏览器输入chrome://version 可以看到“命令行 ...
- 你必须知道的Dockerfile
本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章. 一.关于Dockerfile 在Docker中创建镜像最常用的方式,就是使用D ...
- Python 教你识别淘宝刷单，买到称心如意的商品
发际线堪忧的小 Q,为了守住头发最后的尊严,深入分析了几十款防脱洗发水的评价,最后综合选了一款他认为最完美的防脱洗发水. 一星期后,他没察觉到任何变化. 一个月后,他用卷尺量了量,发际线竟然后退了 0 ...
- 【安富莱】RTX嵌入式操作系统教程发布，支持F103，F407和F429，含81个配套例程（2017-10-17)
前言说明:1. 首先感谢大家对我们安富莱电子一年来的支持,2016年我们会再接再厉推出更好的教程. 2. 估计也有网友会问RTX的优势在那里,针对这个问题,教程中第一章分为6条专门回答了这个问题,有兴 ...
- Java 添加Word脚注、尾注
Word中的脚注和尾注都是对文本的补充说明.脚注一般是附在书页最左下端的注文,用以解释.说明特定内容:而尾注则是位于文档末尾,用于列出引文的出处.脚注和尾注都可以是针对某些文字或者段落来添加.本文中, ...
- （六十一）c#Winform自定义控件-信号灯（工业）-HZHControls
官网 http://www.hzhcontrols.com 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kww ...
- 深入selenium三种等待方式使用
深入selenium三种等待方式使用 处理由于网络延迟造成没法找到网页元素 方法一 用time模块不推荐使用 用time模块中的time.sleep来完成等待 from selenium import ...
- CronExpression表达式详解和案例
1. cron表达式格式: {秒数} {分钟} {小时} {日期} {月份} {星期} {年份(可为空)} 2. cron表达式各占位符解释: {秒数} ==> 允许值范围: 0~59 ,不允许 ...
- 【React Native】在原生和React Native间通信（RN调用原生）
一.从React Native中调用原生方法(原生模块) 原生模块是JS中也可以使用的Objective-C类.一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的.他们可以导 ...
- [20191108]内核参数tcp_keepalive与sqlnet.ora expire_time的一些总结.txt
[20191108]内核参数tcp_keepalive与sqlnet.ora expire_time的一些总结.txt --//前几天在做12c DCD SQLNET.EXPIRE_TIME相关测试时 ...