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

程序员文章站 2022-05-09 18:00:09

jQuery的属性操作模块总共有4个部分，本篇说一下第2个部分:DOM属性部分，用于修改DOM元素的属性的(属性和特性是不一样的，一般将property翻译为属性，attribute翻译为特性) DOM属性的静态方法接口如下: prop(elem, name, value) ;设置或读取DOM属性， ......

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特性部分已经讲过了，这里不说了。

上一篇：红米note9对比iqoou1x哪个值得买?

下一篇： win10专业版激活秘钥神key推荐电脑系统激活码分享

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