jQuery属性操作之.val()函数

时间: 2018-12-03阅读: 4764标签: jquery

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属性值


来源:https://www.cnblogs.com/peterzhangsnail/archive/2018/12/02/10054533.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1475

关闭

原生JS替代jQuery的各种方法汇总

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。

jQuery实现全选、全不选以及反选操作

在写购物车案例时实现全选操作使用的是js的getAttribute()setAttribute()方法获取checked属性的值是undefined实现完成之后全选操作,如果在全选中的情况下改变其中一个的状态再点击全选,之前被取消的将不在被选中。之后使用js的DOM.checked属相的获得是true或false,操作很方便,很完美没有bug

jquery动画实现_浅谈jQuery之动画

jQuery提供了JS未能提供的动画效果,利用jQuery的动画效果,可以极大的简化JS动画部分的逻辑,包括:滑入滑出动画、淡入淡出动画、显示隐藏动画、停止动画、自定义动画

jQuery的淡入淡出

在jQuery中的一些特效中,可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo(),下面为分别为大家介绍各个方式的使用。

jquery设置属性attr

jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式。attr(属性名)、attr(属性名, 属性值)、attr(属性名,函数值)、attr(properties)

前端程序员应该知道的15个jQuery小技巧

15个jQuery小技巧:返回顶部按钮,预加载图像,检查图像是否加载,自动修复破坏的图像,悬停切换类,禁用输入字段,停止加载链接,淡入/滑动切换,简单的手风琴...

原生js中DOM对象转成jQuery对象、jQuery 对象转成 DOM 对象的实现

jquery是对js语言的封装、扩展,实现了对浏览器的兼容,使用jquery能让操作更方便简洁,这篇文章主要讲解原生js中Dom对象和jquery对象的相互转换。

两种方法使vue实现jQuery调用

vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞。MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作。而jQuery需要记忆的内容颇多

jQuery中页面返回顶部的方法总结

当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点。三个方法各有优劣,不过总体来讲,jQuery的方法更适合大多数场景。

高效Web开发的10个jQuery代码片段

在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库。今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!