jQuery 源码分析(十三) 数据操作模块 DOM属性详解

SIMONDOMAIN

2019-10-21

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

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(obj) 　　 ;参数1是对象时

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

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

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>

渲染如下:

jQuery 源码分析(十三) 数据操作模块 DOM属性详解

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

jQuery 源码分析(十三) 数据操作模块 DOM属性详解

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

jQuery 源码分析(十三) 数据操作模块 DOM属性详解

源码分析

$.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实例来说，它和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实例的prop方法也是借用了$.access工具方法，$.access在HTML特性部分已经讲过了，这里不说了。

jquery dom jquery源码分析