jQuery 源码分析(十五) 数据操作模块 val详解
jQuery的属性操作模块总共有4个部分，本篇说一下最后一个部分:val值的操作，也是属性操作里最简单的吧，只有一个API，如下:
- val(vlaue) ;获取匹配元素集合中第一个元素的当前值，或者设置匹配元素集合中每个元素的值，有三种用法:
- val() ;没有参数，获取第一个匹配元素的当前值
- val(value) ;为每个匹配元素设置value值 ;如果为null则表示设置值为空
- val(func) ;设置每个匹配元素为函数func返回的值 ;该函数接受两个参数:分别是当前元素在集合中的下标和当前value值。
就是修改DOM元素的value属性，常用于 设置/获取 输入框里的值，举个栗子:
writer by:大沙漠 QQ:22969969
<!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>
<style>
.color{color: #f00;}
.back{background: #ccc;}
</style>
</head>
<body>
<input type="text" id="input">
<button id="b1">设置值</button>
<button id="b2">获取值</button>
<script>
let b1 = document.getElementById('b1'),
b2 = document.getElementById('b2');
b1.onclick = ()=> $('input').val(123)
b2.onclick = ()=> console.log($('input').val())
</script>
</body>
</html>
渲染如下:
我们设置了一个输入框，然后添加了两个按钮，分别用于设置值和获取值，点击设置值后会调用$('input').val(123)去设置对应的值123，如下:
点击获取值时就会获取该输入框的值，控制台输入如下:
一般在提交表单的时候，可以通过val()去获取值，在进行验证的时候，比如某个输入框只能填写数字，如果发现用户输入了非数字的字符，我们过滤后可以再调用val(v)去设置一下值。
源码分析
val()的实现比较简单，如下:
jQuery.fn.extend({
val: function( value ) { //获取匹配元素集合中第一个元素的当前值，或者设置匹配元素集合中每个元素的值。
var hooks, ret, isFunction,
elem = this[0]; //elem是第一个匹配元素的引用
if ( !arguments.length ) { //如果未传入参数，则获取第一个匹配元素的当前值
if ( elem ) {
hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ]; //如果需要修正，则修正该值
if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
return ret;
}
ret = elem.value;
return typeof ret === "string" ? //否则直接读取DOM属性value
// handle most common string cases
ret.replace(rreturn, "") :
// handle cases where value is null/undef or number
ret == null ? "" : ret;
}
return;
}
isFunction = jQuery.isFunction( value ); //value是否为函数
return this.each(function( i ) {
var self = jQuery(this), val;
if ( this.nodeType !== 1 ) { //如果当前元素不是元素节点,则直接返回
return;
}
if ( isFunction ) { //如果value是函数，则在每个匹配元素上执行该函数，并取其返回值作为待设定的值。
val = value.call( this, i, self.val() ); //在函数内部，this指向当前元素，函数有两个参数，分别是当前元素在集合中的下标和当前value值。
} else {
val = value;
}
// Treat null/undefined as ""; convert numbers to string
if ( val == null ) { //如果val是null,则转换为空字符串
val = "";
} else if ( typeof val === "number" ) { //如果val是数字格式,则/转换为字符串
val += "";
} else if ( jQuery.isArray( val ) ) { //如果val是数组格式
val = jQuery.map(val, function ( value ) { //则调用jQuerymap将val转化为字符串最后返回
return value == null ? "" : value + "";
});
}
hooks = jQuery.valHooks[ this.nodeName.toLowerCase() ] || jQuery.valHooks[ this.type ];
// If set returns undefined, fall back to normal setting
if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) { //优先调用对应的修正对象的修正方法set()
this.value = val; //如果没有修正对象，则直接设置value值。
}
});
},
/*略*/
})
就是设置/获取对应DOM对象引用的value值来实现的。
jQuery 源码分析(十五) 数据操作模块 val详解的更多相关文章
- jQuery 源码分析(十四) 数据操作模块 类样式操作 详解
jQuery的属性操作模块总共有4个部分,本篇说一下第3个部分:类样式操作部分,用于修改DOM元素的class特性的,对于类样式操作来说,jQuery并没有定义静态方法,而只定义了实例方法,如下: a ...
- jQuery 源码分析(十二) 数据操作模块 html特性 详解
jQuery的属性操作模块总共有4个部分,本篇说一下第1个部分:HTML特性部分,html特性部分是对原生方法getAttribute()和setAttribute()的封装,用于修改DOM元素的特性 ...
- Vue.js 源码分析(十五) 指令篇 v-bind指令详解
指令是Vue.js模板中最常用的一项功能,它带有前缀v-,比如上面说的v-if.v-html.v-pre等.指令的主要职责就是当其表达式的值改变时,相应的将某些行为应用到DOM上,先介绍v-bind指 ...
- jQuery 源码解析(二十七) 样式操作模块 坐标详解
样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下坐标这一块. 对于坐标来说,jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标,还有offse ...
- jQuery 源码分析(二十一) DOM操作模块 删除元素 详解
本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...
- jQuery 源码分析(十九) DOM遍历模块详解
jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...
- Vue.js 源码分析(十八) 指令篇 v-for 指令详解
我们可以用 v-for 指令基于一个数组or对象来渲染一个列表,有五种使用方法,如下: <!DOCTYPE html> <html lang="en"> & ...
- Vue.js 源码分析(十六) 指令篇 v-on指令详解
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,例如: <!DOCTYPE html> <html lang="en"& ...
- C# DateTime的11种构造函数 [Abp 源码分析]十五、自动审计记录 .Net 登陆的时候添加验证码 使用Topshelf开发Windows服务、记录日志 日常杂记——C#验证码 c#_生成图片式验证码 C# 利用SharpZipLib生成压缩包 Sql2012如何将远程服务器数据库及表、表结构、表数据导入本地数据库
C# DateTime的11种构造函数 别的也不多说没直接贴代码 using System; using System.Collections.Generic; using System.Glob ...
随机推荐
- Linux系统学习 十二、VSFTP服务—简介与原理
1.简介与原理 互联网诞生之初就存在三大服务:WWW.FTP.邮件 FTP主要针对企业级,可以设置权限,对不同等级的资料针对不同权限人员显示. 但是像网盘这样的基本没有权限划分. 简介: FTP(Fi ...
- 2019年全国高校计算机能力挑战赛 C语言程序设计决赛
2019年全国高校计算机能力挑战赛 C语言程序设计决赛 毕竟这个比赛是第一次举办,能理解.. 希望未来再举办时,能够再完善一下题面表述.数据范围. 话说区域赛获奖名额有点少吧.舍友花60块想混个创新创 ...
- 你必须知道的Dockerfile
本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章. 一.关于Dockerfile 在Docker中创建镜像最常用的方式,就是使用D ...
- Java堆空间Vs栈内存
之前我写了几篇有关Java垃圾收集的文章之后,我收到了很多电子邮件,请求解释Java堆空间,Java栈内存,Java中的内存分配以及它们之间的区别. 您可能在Java,Java EE书籍和教程中看到很 ...
- Java 并发编程 | 线程池详解
原文: https://chenmingyu.top/concurrent-threadpool/ 线程池 线程池用来处理异步任务或者并发执行的任务 优点: 重复利用已创建的线程,减少创建和销毁线程造 ...
- 计算机组成原理——DMA存取方式
DMA(Direct Memory Access)直接存储器存取 高速大容量存储器和主存之间交换时,若采用程序直接传送或程序中断传送的方式,则会有如下问题发生. 1)采用程序直接传送,主机工作效 ...
- Linux CentOS上安装 MySQL 8.0.16
前言: 因为我需要在我新安装的Linux CentOS系统服务器中安装和配置MySQL服务器,然而对于我们这种Linux使用小白而言在Linux系统中下载,解压,配置MySQL等一系列的操作还是有些耗 ...
- attempted to return null from a method with a primitive return type (int).
java接口文件 package com.cyb.ms.mapper; import org.apache.ibatis.annotations.Param; public interface Acc ...
- Servlet、Jsp
一.Servlet 1.什么是Servlet? (1)由sun公司(被oracle公司收购)制定的一种用来扩展web服务器功能的组件规范.简单的讲就是一种用来开发动态Web的技术. 扩展web服务器功 ...
- Xcode报错：could not attach to pid:"1764"
这种错误不是什么问题,按照参考链接操作即可,亲测有效: https://www.cnblogs.com/luorende/p/6295945.html 在运行项目时出现了如下错误 (基本上重新启动项目 ...