val: function( value ) {
var hooks, ret, isFunction,
elem = this[0]; if ( !arguments.length ) {//无参数
if ( elem ) {//第一个元素
//考虑元素是checkbox,radio,option或者select的情况,这时有val钩子
hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];
//如果钩子存在且有get 且获取的值不为undefined,返回该值
if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
return ret;
}
//否则,ret就是元素的value
ret = elem.value;
//如果值是字符串
return typeof ret === "string" ?
//将换行符替换为""
ret.replace(rreturn, "") :
// 如果值不是字符串,考虑null和undefined的情况,如果是null或undefined,ret置为""
ret == null ? "" : ret;
} return;
}
//判断传入的参数value是否是函数
isFunction = jQuery.isFunction( value );
//遍历设值
return this.each(function( i ) {
var val; if ( this.nodeType !== 1 ) {//如果不是元素节点,返回
return;
} if ( isFunction ) {//如果是函数 函数的参数第一个是索引,第二个是对应的值
val = value.call( this, i, jQuery( this ).val() );
} else {
val = value;
} //如果val是null或者undefined,设为""
if ( val == null ) {
val = "";
//如果val是数字,转为字符串
} else if ( typeof val === "number" ) {
val += "";
//如果val是数组
} else if ( jQuery.isArray( val ) ) {//处理数组中的undefined null 和数字
val = jQuery.map( val, function( value ) {
return value == null ? "" : value + "";
});
}
//同样地,考虑元素是checkbox,radio,option或者select的情况
hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ]; // 如果set返回了undefined,回退到正常值val
if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {
this.value = val;
}
});
}

valHooks:

jQuery.extend({
valHooks: {
option: {
get: function( elem ) {
//调用Sizzle.attr方法
var val = jQuery.find.attr( elem, "value" );
//如果val为null或undefined,取elem的text值
return val != null ?
val :
// Support: IE10-11+
// option.text throws exceptions (#14686, #14858)
jQuery.trim( jQuery.text( elem ) );
}
},
select: {
get: function( elem ) {
var value, option,
options = elem.options,
index = elem.selectedIndex,//当前选中项 单选默认0,多选默认-1
//如果是单选下拉框或者当前没有选中项,one为true
one = elem.type === "select-one" || index < 0,
values = one ? null : [],//one为true,则values为null,否则为[]
max = one ? index + 1 : options.length,//单选最大为1,多选为options.length
i = index < 0 ?
max :
one ? index : 0; // Loop through all the selected options
for ( ; i < max; i++ ) {//遍历
option = options[ i ]; // IE6-9 doesn't update selected after form reset (#2551)
if ( ( option.selected || i === index ) && //如果当前项是选中项
// Don't return options that are disabled or in a disabled optgroup
// 如果support.optDisabled为true,值为option.disabled取反
// 如果为假,值为option的属性disabled的值
// 如果值为null
( support.optDisabled ? !option.disabled : option.getAttribute( "disabled" ) === null ) &&
//且 如果select的disabled为假或者 optgroup的disabled为真
( !option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" ) ) ) { // Get the specific value for the option
value = jQuery( option ).val(); // We don't need an array for one selects
if ( one ) {//单选直接返回
return value;
} // Multi-Selects return an array
values.push( value );//多选推入数组
}
} return values;//多选且没有没有默认项,不经过循环直接返回
}, set: function( elem, value ) {
var optionSet, option,
options = elem.options,
values = jQuery.makeArray( value ),//转为数组,value可以是任何值 "a"=>["a"]
i = options.length;//选项数量
//遍历
while ( i-- ) {
option = options[ i ];
//如果当前选项的值在values数组中,selected为true,否则为false
//可以用于设置多选的下拉单值
/*用法:
<select name="" id="" class="slt" multiple>
<option value="a">aaa</option>
<option value="b">bbbb</option>
<option value="c">ccccc</option>
</select>
<script>
$('.slt').val(["a","c"]);
</script>
*/
if ( (option.selected = jQuery.inArray( option.value, values ) >= 0) ) {
optionSet = true;//标识
}
} // force browsers to behave consistently when non-matching value is set
if ( !optionSet ) {
elem.selectedIndex = -1;
}
return values;
}
}
}
}); // Radios and checkboxes getter/setter
jQuery.each([ "radio", "checkbox" ], function() {
jQuery.valHooks[ this ] = {
set: function( elem, value ) {
if ( jQuery.isArray( value ) ) {
//如果传入的value是数组,判断当前元素的值是否在value数组中
//存在,则设置checked为true,并返回true,不存在则checked为false,并返回false
/*
用法:
<input type="checkbox" class="ck" value="a">
<input type="checkbox" class="ck" value="b">
<script>
$('.ck').val(["a","b"]);
</script>
*/
return ( elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0 );
}
}
};
if ( !support.checkOn ) {
jQuery.valHooks[ this ].get = function( elem ) {
//如果未指定value,返回on
//如果是 <input type="checkbox" class="ck" value>或者
//<input type="checkbox" class="ck" value="">这两种,返回的是""
return elem.getAttribute("value") === null ? "on" : elem.value;
};
}
});

可以看到,jQ的valHooks共有四个成员:

1、option

2、select

3、checkbox

4、radio

option中只有get方法,因为它的目的是在option中没有value值的时候去取中间的text值。

checkbox和radio中,set方法是考虑到同时为多个复选或者单选框设置值的情况,而get方法是考虑了没有初始化value时返回默认值“on”

select的set方法同复选单选框类似,而get方法中,如果是单选,直接返回value,如果是多选且有选中项,遍历后将结果推入数组最后返回数组,此外,它处理了option的disabled为true的情况,如果为true,获取不到值。这一点也是我的疑问,它为什么要这样做→ →

    <select name="" id="slt" class="slt">
<option value="a">aaa</option>
<option value="b">bbbb</option>
<option value="c" selected disabled>ccccc</option>
</select>
<script>
console.log($('#slt').val(),document.getElementById("slt").value);
</script>
// null "c"

jQuery val()方法及valHooks源码解读的更多相关文章

  1. jQuery.Callbacks 源码解读二

    一.参数标记 /* * once: 确保回调列表仅只fire一次 * unique: 在执行add操作中,确保回调列表中不存在重复的回调 * stopOnFalse: 当执行回调返回值为false,则 ...

  2. 第二十五课:jQuery.event.trigger的源码解读

    本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...

  3. 第二十四课:jQuery.event.remove,dispatch的源码解读

    本课还是来讲解一下jQuery是如何实现它的事件系统的.这一课我们先来讲一下jQuery.event.remove的源码解读. remove方法的目的是,根据用户传参,找到事件队列,从里面把匹配的ha ...

  4. 第二十三课:jQuery.event.add的原理以及源码解读

    本课主要来讲解一下jQuery是如何实现它的事件系统的. 我们先来看一个问题: 如果有一个表格有100个tr元素,每个都要绑定mouseover/mouseout事件,改成事件代理的方式,可以节省99 ...

  5. Go 源码解读|如何用好 errors 库的 errors.Is() 与 errors.As() 方法

    前言 快一个月没有更新技术文章了,这段时间投注了较多的时间学习字节的开源项目 Kitex/Hertz ,并维护一些简单的 issue ,有兴趣的同学也可以去了解: https://www.cloudw ...

  6. HttpServlet中service方法的源码解读

    前言     最近在看<Head First Servlet & JSP>这本书, 对servlet有了更加深入的理解.今天就来写一篇博客,谈一谈Servlet中一个重要的方法-- ...

  7. AbstractCollection类中的 T[] toArray(T[] a)方法源码解读

    一.源码解读 @SuppressWarnings("unchecked") public <T> T[] toArray(T[] a) { //size为集合的大小 i ...

  8. SDWebImage源码解读之SDWebImageDownloaderOperation

    第七篇 前言 本篇文章主要讲解下载操作的相关知识,SDWebImageDownloaderOperation的主要任务是把一张图片从服务器下载到内存中.下载数据并不难,如何对下载这一系列的任务进行设计 ...

  9. String、StringBuffer、StringBuilder源码解读

    序 好长时间没有认真写博客了,过去的一年挺忙的.负责过数据库.线上运维环境.写代码.Code review等等东西挺多. 学习了不少多方面的东西,不过还是需要回归实际.加强内功,方能扛鼎. 去年学习M ...

随机推荐

  1. Python作业之用户管理

    作业 流程图没有画,懒,不想画 readme没有写,懒,不想写.看注释吧233333 #! /usr/bin/env python # -*- coding: utf-8 -*- # __author ...

  2. ICE协议下NAT穿越的实现(STUN&TURN)

    正文: 一. 首先来简单讲讲什么是NAT? 原来这是因为IPV4引起的,我们上网很可能会处在一个NAT设备(无线路由器之类)之后.NAT设备会在IP封包通过设备时修改源/目的IP地址. 对于家用路由器 ...

  3. Linux:普通用户不能执行ifconfig命令问题

    有客户现场服务器禁用了root帐号,在普通帐号下,执行ifconfig,提示bash:ifconfig command not found: 导致业务系统无法用普通帐号获取ifcnofig的MAC地址 ...

  4. python pickle/cPickle模块

    序列化(picking): 把变量从内存中变成可存储或传输的过程称为序列化,序列化之后,就可以把序列化的对象写入磁盘,或者传输给其他设备; 反序列化(unpickling):相应的,把变量的内容从序列 ...

  5. 51nod1674:区间的价值2(分治,利用&和|的收敛性)

    lyk拥有一个区间. 它规定一个区间的价值为这个区间中所有数and起来的值与这个区间所有数or起来的值的乘积. 例如3个数2,3,6.它们and起来的值为2,or起来的值为7,这个区间对答案的贡献为2 ...

  6. 「AHOI2008」「LuoguP4281」紧急集合 / 聚会(LCA

    题目描述 欢乐岛上有个非常好玩的游戏,叫做“紧急集合”.在岛上分散有N个等待点,有N-1条道路连接着它们,每一条道路都连接某两个等待点,且通过这些道路可以走遍所有的等待点,通过道路从一个点到另一个点要 ...

  7. bzoj3832

    拓扑排序+set 如果我们直接记录所有路径是不行的,那么我们要降低路径的数量,于是我们把最短路径转换到边上,这样我们就只有m条路径了. 先计算出f[i]和g[i]表示正反拓扑最长链,把所有g插到set ...

  8. Laravel框架之Request操作

    public function request(Request $request){ //1.取值 //echo $request->input('name'); //echo $request ...

  9. 保持plsql窗口布局

    在window菜单中有个 save layout 项,设置好窗口布局后,选一下此项就保存你当前的窗口布局了,下次启动就不用再设置了.

  10. Spring Boot 学习系列(07)—properties文件读取

    此文已由作者易国强授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 传统的properties读取方式 一般的,我们都可以自定义一个xxx.properties文件,然后在工程 ...