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属性 详解的更多相关文章

  1. jQuery 源码分析(十六) 事件系统模块 底层方法 详解

    jQuery事件系统并没有将事件监听函数直接绑定到DOM元素上,而是基于数据缓存模块来管理监听函数的,事件模块代码有点多,我把它分为了三个部分:分底层方法.实例方法和便捷方法.ready事件来讲,好理 ...

  2. Vue.js 源码分析(十三) 基础篇 组件 props属性详解

    父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...

  3. jQuery 源码分析(十) 数据缓存模块 data详解

    jQuery的数据缓存模块以一种安全的方式为DOM元素附加任意类型的数据,避免了在JavaScript对象和DOM元素之间出现循环引用,以及由此而导致的内存泄漏. 数据缓存模块为DOM元素和JavaS ...

  4. Vue.js 源码分析(十一) 基础篇 过滤器 filters属性详解

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...

  5. Vue.js 源码分析(五) 基础篇 方法 methods属性详解

    methods中定义了Vue实例的方法,官网是这样介绍的: 例如:: <!DOCTYPE html> <html lang="en"> <head&g ...

  6. jQuery 源码解析(三十一) 动画模块 便捷动画详解

    jquery在$.animate()这个接口上又封装了几个API,用于进行匹配元素的便捷动画,如下: $(selector).show(speed,easing,callback)        ;如 ...

  7. jQuery 源码分析(十二) 数据操作模块 html特性 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第1个部分:HTML特性部分,html特性部分是对原生方法getAttribute()和setAttribute()的封装,用于修改DOM元素的特性 ...

  8. jQuery源码分析(九) 异步队列模块 Deferred 详解

    deferred对象就是jQuery的回调函数解决方案,它解决了如何处理耗时操作的问题,比如一些Ajax操作,动画操作等.(P.s:紧跟上一节:https://www.cnblogs.com/grea ...

  9. Vue.js 源码分析(三十一) 高级应用 keep-alive 组件 详解

    当使用is特性切换不同的组件时,每次都会重新生成组件Vue实例并生成对应的VNode进行渲染,这样是比较花费性能的,而且切换重新显示时数据又会初始化,例如: <!DOCTYPE html> ...

随机推荐

  1. PyCharm 快捷键失效解决办法

    PyCharm快捷键用着用着失效了 ......修改设置如下 重新启动Pycharm即可 原博客地址:https://blog.csdn.net/jacke121/article/details/82 ...

  2. acwing 849 Dijkstra求最短路 I 模板

    地址 https://www.acwing.com/problem/content/description/851/ 给定一个n个点m条边的有向图,图中可能存在重边和自环,所有边权均为正值. 请你求出 ...

  3. Bandizip解压压缩软件

    上次重装系统以后,特别注意安装软件,在这里提一些比较好的 解压软件:Bandizip 这个是一个免费轻量级的软件,压缩解压速度快,没什么广告,推荐大家在官方下载 Bandizip下载网址 点击下载安装 ...

  4. redis启动错误: Warning: no config file specified, using the default config. In order to specify a config

    redis启动错误: Warning: no config file specified, using the default config. In order to specify a config ...

  5. PHP Swoole与TCP三次握手

    握手常见问题 1.连接拒绝 2.Operation now in progress 多是因为丢包.错误ip.backlog满了&阻塞&tcp_abort_on_overflow=0 3 ...

  6. 如何在CAD图纸中进行线性标注

    在CAD中,都会在图纸中进行CAD标注,一般都是有CAD标注样式.CAD标注文字等.那其中有一个就是CAD线性标注?可以标注图纸间的距离?那如何在CAD图纸中进行线性标注呢?具体要怎么来进行操作?本篇 ...

  7. mapreduce shortest way out

    相关知识 最优路径算法是无向图中满足通路上所有顶点(除起点.终点外)各异,所有边也各异的通路.应用在公路运输中,可以提供起点和终点之间的最短路径,节省运输成本.可以大大提高交通运输效率. 本实验采用D ...

  8. 使用Kubernetes进行ProxySQL本机群集

    自v1.4.2起,ProxySQL支持本机群集.这意味着多个ProxySQL实例可识别群集; 他们了解彼此的状态,并能够通过根据配置版本,时间戳和校验和值同步最新的配置来自动处理配置更改. Proxy ...

  9. SAP会计年度变式

       会计年度变式用来确定SAP系统中每个公司的会计记账期间的变式.顾名思议,每个公司的会计年度变式必须与其实际使用的会计年度匹配.     在SAP系统中,每个会计年度最多允许有16个记账期间,其中 ...

  10. 【分享】nginx负载均衡全套视频教程

    1.课件 百度网盘链接:https://pan.baidu.com/s/1On2oONVZmPwI9yIDekgRiA        提取码:c4fw 2.教程列表 3.教程下载 3.1.直接在线学习 ...