欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-02-18 22:22:34
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特性部分已经讲过了，这里不说了。

上一篇： 苹果发布iOS 12.3新测试版：提升速度、稳定性

下一篇： 什么是全文检索

推荐阅读