jQuery的属性操作模块总共有4个部分，本篇说一下最后一个部分:val值的操作，也是属性操作里最简单的吧，只有一个API，如下:

  • val(vlaue)        ;获取匹配元素集合中第一个元素的当前值，或者设置匹配元素集合中每个元素的值，有三种用法:
  1. val()       　　　　 ;没有参数，获取第一个匹配元素的当前值
  2. val(value)   　　    ;为每个匹配元素设置value值        ;如果为null则表示设置值为空
  3. 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详解的更多相关文章

  1. jQuery 源码分析(十四) 数据操作模块 类样式操作 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第3个部分:类样式操作部分,用于修改DOM元素的class特性的,对于类样式操作来说,jQuery并没有定义静态方法,而只定义了实例方法,如下: a ...

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

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

  3. Vue.js 源码分析(十五) 指令篇 v-bind指令详解

    指令是Vue.js模板中最常用的一项功能,它带有前缀v-,比如上面说的v-if.v-html.v-pre等.指令的主要职责就是当其表达式的值改变时,相应的将某些行为应用到DOM上,先介绍v-bind指 ...

  4. jQuery 源码解析(二十七) 样式操作模块 坐标详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下坐标这一块. 对于坐标来说,jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标,还有offse ...

  5. jQuery 源码分析(二十一) DOM操作模块 删除元素 详解

    本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...

  6. jQuery 源码分析(十九) DOM遍历模块详解

    jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...

  7. Vue.js 源码分析(十八) 指令篇 v-for 指令详解

    我们可以用 v-for 指令基于一个数组or对象来渲染一个列表,有五种使用方法,如下: <!DOCTYPE html> <html lang="en"> & ...

  8. Vue.js 源码分析(十六) 指令篇 v-on指令详解

    可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,例如: <!DOCTYPE html> <html lang="en"& ...

  9. C# DateTime的11种构造函数 [Abp 源码分析]十五、自动审计记录 .Net 登陆的时候添加验证码 使用Topshelf开发Windows服务、记录日志 日常杂记——C#验证码 c#_生成图片式验证码 C# 利用SharpZipLib生成压缩包 Sql2012如何将远程服务器数据库及表、表结构、表数据导入本地数据库

    C# DateTime的11种构造函数   别的也不多说没直接贴代码 using System; using System.Collections.Generic; using System.Glob ...

随机推荐

  1. Luogu P2210 Haywire 题解

    其实这题吧...有一种玄学解法 这题的要求的就是一个最小化的顺序 那么,我们就不进想到了一种显然的写法 就是random_shuffle 什么?这不是乱搞的非正解吗 然而,正如一句话说的好 一个算法, ...

  2. SQL查询语法30例

    学好SQL查询:无他,概手熟耳. 1. 基础表: 学生表: 老师表: 课程表: 成绩表: 2. 题目: 1.查询名字中含有"华"字的学生信息 select * from 学生 wh ...

  3. Linux系统：Centos7环境搭建Redis单台和哨兵集群环境

    本文源码:GitHub·点这里 || GitEE·点这里 一.环境和版本 Linux:centos7 三台 三台Linux服务 192.168.72.129 192.168.72.130 192.16 ...

  4. 当h5页面图片加载失败后，给定一个默认图

    本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...

  5. C++ 面向对象程序设计复习大纲

     这是我在准备C++考试时整理的提纲,如果是通过搜索引擎搜索到这篇博客的师弟师妹,建议还是先参照PPT和课本,这个大纲也不是很准确,自己总结会更有收获,多去理解含义,不要死记硬背,否则遇到概念辨析题会 ...

  6. Java入门系列之StringBuilder、StringBuffer（三）

    前言 上一节我们讲解了字符串的特性,除了字符串类外,还有两个我们也会经常用到的类,那就是StringBuffer和StringBuilder.因为字符串不可变,所以我们每次对字符串的修改比如通过连接c ...

  7. Centos7 下 PHP 添加缺少的组件 sockets 和 openssl

    环境是 centos7 + nginx 1.14 + php 7.2.18,由于新增邮件发送功能,使用的是 socket 通讯的方式,需要开启 php 的 sockes 和 openssl 扩展 安装 ...

  8. C#如何判断委托是实例方法还是静态方法

    一. 委托的分类 通过用什么类型的方法来声明为委托,可以分为两类: 1. 委托静态方法:把一个静态方法给委托 2. 委托实例方法:把一个实例对象的成员方法给委托 (这两个名字是博主取的,可能不是很专业 ...

  9. Linux 资源监控整体分析-TOP

    一.top 第一行,任务队列信息,同 uptime 命令的执行结果 系统时间:15:23:10 运行时间:up 236 day,4min, 当前登录用户:  2个 user 负载均衡(uptime)  ...

  10. 【Untiy】完美解决Untiy Package Manager无限加载的问题

    直接上干货 打开记事本,复制一下zhei个 @echo offset HTTP_PROXY=127.0.0.1set HTTPS_PROXY=127.0.0.1start "" & ...