@

.val()实例方法的三种用法

  1. $('xxx').val() : 获取匹配的元素集合中第一个元素的当前value属性值(property)
  2. $('xxx').val(value) : 设置匹配的元素集合中每个元素的value属性值(property)
  3. $('xxx').val(function(index,value){}) :
  • 钩子函数未设置或无效时,将函数function(index,value)的返回值设为每一个DOM元素的value属性值(property).
  • 其中,两个形参不需要传值,index指代当前DOM元素的在jQuery对象中的索引,value指代当前DOM对象的旧的value属性值.

.val()函数源码

	jQuery.fn.extend( {
val: function( value ) {
var hooks, ret, isFunction,
elem = this[ 0 ]; //elem为jQuery对象匹配的第一个DOM元素 //无参数传入时
if ( !arguments.length ) { if ( elem ) { //如果jQuery有匹配到DOM元素的话 //钩子判断与执行:匹配用户自定义的钩子函数,并执行和返回
hooks = jQuery.valHooks[ elem.type ] || //如果valHooks有type属性,赋值对应钩子
jQuery.valHooks[ elem.nodeName.toLowerCase() ]; //如果valHooks有与DOM节点名相关的属性,赋值对应钩子 if ( // 如果定义了钩子及相关方法,调用钩子函数处理并返回
hooks &&
"get" in hooks &&
( ret = hooks.get( elem, "value" ) ) !== undefined
) {
return ret;
} ret = elem.value; //无钩子时,直接取元素的value值 return typeof ret === "string" ? // 返回字符串:处理一般情况下的返回值
ret.replace( rreturn, "" ) : // 返回非字符串:value为null/undefined,返回空串;其余情况,返回ret
ret == null ? "" : ret;
} return; //如果jQuery对象未匹配到DOM元素时,直接返回
} //传入一个参数时的情况:函数,非函数
isFunction = jQuery.isFunction( value ); //判断传入参数是否为函数,为后续条件开关做准备 return this.each( function( i ) { //实例方法.each():对匹配到的每一个DOM元素,执行括号中的函数:obj[i].callback(i);
var val; if ( this.nodeType !== 1 ) { //当前DOM元素不为元素节点时,直接返回
return;
} if ( isFunction ) { //如果传入参数为函数类型,val=obj[i].value(i,obj的value属性值) val = value.call( this, i, jQuery( this ).val() );
//[注:value的两个形参,我们不用给它手动传值,会在val函数内部自动传值,一个代表DOM元素的索引,一个代表DOM元素当前的value属性的值] } else {
val = value; //如果传入参数不为函数类型,val=传入参数;
} // 将val为null/undefined的情况,统一处理为空串
if ( val == null ) {
val = "";
} else if ( typeof val === "number" ) {
val += "";
} else if ( jQuery.isArray( val ) ) {
val = jQuery.map( val, function( value ) {
return value == null ? "" : value + "";
} );
} //有传参的情况下的,钩子判断与执行:匹配用户自定义的钩子函数,并执行和返回
hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ]; // 如果钩子的"set"属性未定义,仍旧返回上面一般情况下处理的结果
if ( !hooks || !( "set" in hooks ) || hooks.set( this, val, "value" ) === undefined ) {
this.value = val;
}
} );
}
} );

调用形式:$('xxx').val();

相关代码:

var hooks, ret, isFunction,
elem = this[ 0 ]; //elem为jQuery对象匹配的第一个DOM元素 //无参数传入时
if ( !arguments.length ) { if ( elem ) { //如果jQuery有匹配到DOM元素的话 //钩子判断与执行:匹配用户自定义的钩子函数,并执行和返回
hooks = jQuery.valHooks[ elem.type ] || //如果valHooks有type属性,赋值对应钩子
jQuery.valHooks[ elem.nodeName.toLowerCase() ]; //如果valHooks有与DOM节点名相关的属性,赋值对应钩子 if ( // 如果定义了钩子及相关方法,调用钩子函数处理并返回
hooks &&
"get" in hooks &&
( ret = hooks.get( elem, "value" ) ) !== undefined
) {
return ret;
} ret = elem.value; //无钩子时,直接取元素的value值 return typeof ret === "string" ? // 返回字符串:处理一般情况下的返回值
ret.replace( rreturn, "" ) : // 返回非字符串:value为null/undefined,返回空串;其余情况,返回ret
ret == null ? "" : ret;
} return; //如果jQuery对象未匹配到DOM元素时,直接返回
}

说明:

1.jQuery对象没有匹配到DOM元素时,直接返回.

2.先进行钩子函数相关的判断(调用),如果钩子满足以下几个条件,执行钩子函数并返回:

  • 钩子之中存在type属性 或者 存在与当前DOM元素节点同名的属性
  • 钩子之中存在get属性
  • 调用get,得到的返回值不为undefined

3.否则,返回elem的value属性的属性值.


调用形式:$('xxx').val(value);

相关代码:

if ( isFunction ) { //如果传入参数为函数类型,val=obj[i].value(i,obj的value属性值)

			val = value.call( this, i, jQuery( this ).val() );

		} else {
val = value; //如果传入参数不为函数类型,val=传入参数;
}
//有传参的情况下的,钩子判断与执行:匹配用户自定义的钩子函数,并执行和返回
hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ]; // 如果钩子的判断不通过,仍旧返回上面一般情况下处理的结果
if ( !hooks || !( "set" in hooks ) || hooks.set( this, val, "value" ) === undefined ) {
this.value = val;
}

说明:(value为非函数类型情况下)

1.同样,先进行钩子的判断,如果满足以下几个条件,if条件判断语句中的三个表达式依次执行,设置好当前DOM元素value属性值:

  • 钩子之中存在type属性 或者 存在与当前DOM元素节点同名的属性
  • 钩子之中存在set属性
  • 调用set,得到的返回值不为undefined

2.否则,直接设置当前DOM元素的value属性值为传入的参数


调用形式:$('xxx').val(function(index,value){});

相关代码:

if ( isFunction ) { //如果传入参数为函数类型,val=obj[i].value(i,obj的value属性值)

			val = value.call( this, i, jQuery( this ).val() );
//[注:value的两个形参,我们不用给它手动传值,会在val函数内部自动传值,一个代表DOM元素的索引,一个代表DOM元素当前的value属性的值] } else {
val = value; //如果传入参数不为函数类型,val=传入参数;
} // 将val为null/undefined的情况,统一处理为空串
if ( val == null ) {
val = "";
} else if ( typeof val === "number" ) {
val += "";
} else if ( jQuery.isArray( val ) ) {
val = jQuery.map( val, function( value ) {
return value == null ? "" : value + "";
} );
} //有传参的情况下的,钩子判断与执行:匹配用户自定义的钩子函数,并执行和返回
hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ]; // 如果钩子的"set"属性未定义,仍旧返回上面一般情况下处理的结果
if ( !hooks || !( "set" in hooks ) || hooks.set( this, val, "value" ) === undefined ) {
this.value = val;
}

说明:(value为函数类型情况下)

1.令val=obj[i].value(i,jQuery( this ).val());

[注]

  • value函数两个形参由本函数自动传值,自行传值无效.
  • 传参i-当前DOM元素在jQuery对象中的索引值
  • 传参jQuery( this ).val()-将当前DOM元素包装为jQuery对象,以便以无参形式调用val方法得到的value属性旧值.

2.同样,先进行钩子的判断,如果满足以下几个条件,if条件判断语句中的三个表达式依次执行,设置好当前DOM元素value属性值:

  • 钩子之中存在type属性 或者 存在与当前DOM元素节点同名的属性
  • 钩子之中存在set属性
  • 调用set,得到的返回值不为undefined

3.否则,直接设置val为当前元素的value属性值

jQuery属性操作之.val()函数的更多相关文章

  1. jquery——属性操作、特殊效果

    1. attr().prop() 取出或者设置某个属性的值 <!DOCTYPE html> <html lang="en"> <head> &l ...

  2. jQuery 属性操作attr().prop().text().html().val()

    这些方法用于获取和设置 DOM 元素的属性. 一.attr(): <!--样式:在style里面写的,用css来操作.--> <!--属性:在元素里面写的,用attr方法操作.--& ...

  3. jQuery属性操作

    jQuery 的属性操作的核心部分其实就是对底层 getAttribute().setAttributes()等方法的一系列兼容性处理 ...if ( notxml ) { name = name.t ...

  4. jQuery源代码学习之八——jQuery属性操作模块

    一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...

  5. jQuery 属性操作和CSS 操作

    如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...

  6. python全栈开发day48-jqurey自定义动画,jQuery属性操作,jQuery的文档操作,jQuery中的ajax

    一.昨日内容回顾 1.jQuery初识 1).使用jQuery而非JS的六大理由 2).jQuery对象和js对象转换 3).jQuery的两大特点 4).jQuery的入口函数三大写法 5).jQu ...

  7. jQuery属性操作(四)

    通过阅读jQuery为属性操作封装的基本方法和为处理兼容性问题提供的hooks,发现jQuery在属性操作方面并没有做过多的设计,只是处理一下兼容性问题,然后调用基础的DOM操作方法.以下是对JQue ...

  8. jQuery属性操作(一)

    下载了jQuery的UI组件,发现内容还挺多的,还是决定先把jQuery的源码看完一遍之后再涉足UI组件.考虑到队列和动画使用较少,特别是动画,基本开始使用css3完成.因此暂时略过,开始看jQuer ...

  9. web前端----jQuery属性操作

    知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...

随机推荐

  1. pmp心得

    我报名比较晚,等缴费最后期限,才缴费,下定决心,开始正式的备考. 我的工作比较忙,备考时间特比较短,从拿到书到考试只有二个月了,心理慌慌的,期间还有一门其他的考试,在5月底,实际时间只能有20来天. ...

  2. mysql错误:Statement violates GTID consistency

    在MYSQL中,执行建表语句时CREATE TABLE  aaaa  AS SELECT * FROM menu;  报: 错误代码: 1786Statement violates GTID cons ...

  3. leetcode Ch3-DFS & Backtracking I

    一.树的遍历 [非递归版] 1. 后序 class Solution { public: vector<int> postorderTraversal(TreeNode *root) { ...

  4. Python学习---抽屉框架分析[点赞功能/文件上传分析]0317

    点赞功能分析 前台传递过来新闻id[new_id]和session[session内有用户ID和用户之间的信息]到后台 后台News数据库内用户和新闻是多对多的关系,查看第三张表中的内容,判读用户Id ...

  5. mysql install steps

    the official documents for mysql 5.6 install key steps: # Preconfiguration setup shell> groupadd ...

  6. 理解活在IPHONE中的那些APP (五)

    为了让App活起来 上一篇简单的说了一下关于IOS的一些事情,现在有必要深入了解一些对于让App活起来比较关键的信息.比如IOS系统的架构,这个我就不赘述了,请移步http://blog.csdn.n ...

  7. 前端——实用UI组件库

    Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...

  8. 在 Deepin 中搭建 GitLab

    入职半个月了,一直在接受业务知识以及企业文化知识的培训,下周终于要开始上岗入手项目了.由于公司使用自己搭建的 GitLab 服务作为项目版本控制器,所以我决定学习一下 GitLab,由于这货跟 Git ...

  9. jersey之get,put,post,delete简单使用

    要使用jersey首先要有相应的依赖包,获取方法有很多,本地下载依赖文件或maven获取,这里假设你的环境已经搭建好了.要使用jersey首先要初始化一个client客户端,下面是最简单的一个get请 ...

  10. Centos7 之目录处理命令(八)

    linux中 关于目录 有几个重要概念 一个是 / 根目录  还有一个当前用户的家目录 比如 root用户的家目录是 /root  普通用户的家目录是/home/xxx 下 root登录 默认家目录 ...