jQuery 源码分析(十三) 数据操作模块 DOM属性 详解_泠吢_前端开发者

jquery属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性)

DOM属性的静态方法接口如下:

  • prop(elem, name, value)    ;设置或读取DOM属性,有两种用法,如下
  • prop(elem, name, value)    ;设置或读取DOM属性,有两种用法,如下
  •       ·$.prop(elem,name,value)      ;传入第三个参数表示设置elem元素的name属性值为value
          ·$.prop(elem,name,)          ;第三个参数为传入或者设置为undefined则表示获取elem的name属性

    jquery/$ 实例方法(可以通过jQuery实例调用的):

     writer by:大沙漠 QQ:22969969

    • prop(name, value)    ;设置或读取DOM属性,有以下用法
  • prop(name, value)    ;设置或读取DOM属性,有以下用法
  •       .prop(obj)             ;参数1是对象时   

          .prop(name)          ;参数1是字符串时,参数2未指定或者设置为undefined时,表示获取第一个匹配元素属性为name的值

          .prop(name,value)     ;为每个匹配元素的谁能够设置一个值

    • removeProp(name)  从每个匹配元素上移除一个name属性,name可以是一个或多个dom属性名(用空格分开)
  • removeProp(name)  从每个匹配元素上移除一个name属性,name可以是一个或多个dom属性名(用空格分开)
  • 举个栗子:

    <!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>
    </head>
    <body>
        <input type="text">
        <button id="b1">设置值</button>
        <button id="b2">获取值</button>
        <script>
            let input    = document.getElementsByTagName('input')[0],
                b1         = document.getElementsByTagName('button')[0],
                b2         = document.getElementsByTagName('button')[1];
                b1.onclick = ()=>{                
                    $('input').prop('value',555)            //设置输入框的值为555     等于$.prop(input,'value',555) 
                }
                b2.onclick = ()=>{
                    let result = $('input').prop('value');     //获取输入框的值    等于:let result = $.prop(input,'value');
                    console.log(result);
                }
        </script>    
    </body>
    </html>
    <!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>
    </head>
    <body>
        <input type="text">
        <button id="b1">设置值</button>
        <button id="b2">获取值</button>
        <script>
            let input    = document.getElementsByTagName('input')[0],
                b1         = document.getElementsByTagName('button')[0],
                b2         = document.getElementsByTagName('button')[1];
                b1.onclick = ()=>{                
                    $('input').prop('value',555)            //设置输入框的值为555     等于$.prop(input,'value',555) 
                }
                b2.onclick = ()=>{
                    let result = $('input').prop('value');     //获取输入框的值    等于:let result = $.prop(input,'value');
                    console.log(result);
                }
        </script>    
    </body>
    </html>

    <!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><title></title><script src=”http://libs.baidu.com/jquery/1.7.1/jquery.min.js></script></head><body><input type=”text”><button id=”b1″></button><button id=”b2″></button><script>
    let input
    = document.getElementsByTagName(input)[0],
    b1
    = document.getElementsByTagName(button)[0],
    b2
    = document.getElementsByTagName(button)[1];
    b1.onclick
    = ()=>{
    $(
    input).prop(value,555) //设置输入框的值为555 等于$.prop(input,’value’,555) }
    b2.onclick
    = ()=>{
    let result
    = $(input).prop(value); //获取输入框的值 等于:let result = $.prop(input,’value’); console.log(result);
    }
    </script></body></html>

    渲染如下:

     我们点击设置值按钮值就会变为555了:

    然后点击获取值,就会获输入框这个DOM对象的value值:

     

    源码分析

    源码分析源码分析


    $.prop实现如下:

    jQuery.extend({
            prop: function( elem, name, value ) {        //设置或读取DOm属性。elem是要读取、设置的DOM元素,name是要操作的DOM属性名、value是要操作的DOM属性值
                var ret, hooks, notxml,
                    nType = elem.nodeType;
                if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {        //如果elem为空 或者是文本、注释、属性节点
                    return;                                                            //直接返回,不接着处理
                }    
                notxml = nType !== 1 || !jQuery.isXMLDoc( elem );                //是否为xml文档元素
        
                if ( notxml ) {                                                    //如果不是xml文档元素
                    name = jQuery.propFix[ name ] || name;                            //修正DOM属性名
                    hooks = jQuery.propHooks[ name ];                                //修正扩展DOM属性修正对象
                }
        
                if ( value !== undefined ) {    //如果value不为空,则设置值
                    if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {        //优先调用修正方法set()
                        return ret;
        
                    } else {
                        return ( elem[ name ] = value );                                 //设置值,并将值返回
                    }
        
                } else {                        //如果value为空则读取name的值
                    if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {                    //优先调用修正方法get()
                        return ret;
        
                    } else {
                        return elem[ name ];                                            //获取对应的值
                    }
                }
            },
            /**/
    })
    jQuery.extend({
            prop: function( elem, name, value ) {        //设置或读取DOm属性。elem是要读取、设置的DOM元素,name是要操作的DOM属性名、value是要操作的DOM属性值
                var ret, hooks, notxml,
                    nType = elem.nodeType;
                if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {        //如果elem为空 或者是文本、注释、属性节点
                    return;                                                            //直接返回,不接着处理
                }    
                notxml = nType !== 1 || !jQuery.isXMLDoc( elem );                //是否为xml文档元素
        
                if ( notxml ) {                                                    //如果不是xml文档元素
                    name = jQuery.propFix[ name ] || name;                            //修正DOM属性名
                    hooks = jQuery.propHooks[ name ];                                //修正扩展DOM属性修正对象
                }
        
                if ( value !== undefined ) {    //如果value不为空,则设置值
                    if ( hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {        //优先调用修正方法set()
                        return ret;
        
                    } else {
                        return ( elem[ name ] = value );                                 //设置值,并将值返回
                    }
        
                } else {                        //如果value为空则读取name的值
                    if ( hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ) {                    //优先调用修正方法get()
                        return ret;
        
                    } else {
                        return elem[ name ];                                            //获取对应的值
                    }
                }
            },
            /**/
    })

    jQuery.extend({
    prop:
    function//设置或读取DOm属性。elem是要读取、设置的DOM元素,name是要操作的DOM属性名、value是要操作的DOM属性值var ret, hooks, notxml,
    nType
    elem.nodeType;
    if//如果elem为空 或者是文本、注释、属性节点return//直接返回,不接着处理 }
    notxml
    //是否为xml文档元素if//如果不是xml文档元素//修正DOM属性名//修正扩展DOM属性修正对象 }

    if//如果value不为空,则设置值ifin//优先调用修正方法set()return ret;

    } else {
    return//设置值,并将值返回 }

    } else//如果value为空则读取name的值ifinnull//优先调用修正方法get()return ret;

    } else {
    return//获取对应的值 }
    }
    },
    /**/
    })

    挺简单的吧,对于jQuery实例来说,它和HTMl特性部分一样,如下:

    jQuery.fn.extend({
        prop: function( name, value ) {        //设置或读取DOM属性
            return jQuery.access( this, name, value, true, jQuery.prop );   //也是借用了$.access工具方法
        },
    
        removeProp: function( name ) {        //从每个匹配元素上移除一个DOM属性
            name = jQuery.propFix[ name ] || name;        //如果属性名name需要修正,则修正属性
            return this.each(function() {
                // try/catch handles cases where IE balks (such as removing a property on window)
                try {
                    this[ name ] = undefined;                //先设置为undefined
                    delete this[ name ];                     //再删除属性
                } catch( e ) {}
            });
        },
        /**/
    })
    jQuery.fn.extend({
        prop: function( name, value ) {        //设置或读取DOM属性
            return jQuery.access( this, name, value, true, jQuery.prop );   //也是借用了$.access工具方法
        },
    
        removeProp: function( name ) {        //从每个匹配元素上移除一个DOM属性
            name = jQuery.propFix[ name ] || name;        //如果属性名name需要修正,则修正属性
            return this.each(function() {
                // try/catch handles cases where IE balks (such as removing a property on window)
                try {
                    this[ name ] = undefined;                //先设置为undefined
                    delete this[ name ];                     //再删除属性
                } catch( e ) {}
            });
        },
        /**/
    })

    jQuery.fn.extend({
    prop:
    function//设置或读取DOM属性returnthistrue, jQuery.prop );   //也是借用了$.access工具方法
    },

    removeProp: //也是借用了$.access工具方法function//从每个匹配元素上移除一个DOM属性//如果属性名name需要修正,则修正属性returnthisfunction() {
    // try/catch handles cases where IE balks (such as removing a property on window)try {
    this//先设置为undefineddeletethis//再删除属性catch( e ) {}
    });
    },
    /**/
    })

    我们可以看到,jQuery实例的prop方法也是借用了$.access工具方法,$.access在HTML特性部分已经讲过了,这里不说了。

    » 本文来自:前端开发者 » 《jQuery 源码分析(十三) 数据操作模块 DOM属性 详解_泠吢_前端开发者》
    » 本文链接地址:https://www.rokub.com/73744.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!