jq框架封装学习笔记4-DOM操作模块

jquery - DOM操作

核心框架成员

核心成员

1> selector 用来存储该 itcast 对象的选择器2> toArray 方法3> get 方法4> each 与 map 方法5> eq 方法

selector 和 toArray

selector

凡是使用选择器获得元素来创建的 jq 对象都有 selector 属性凡是使用 jq 对象创建 jq 对象都有 该属性其实就是为了说明该元素是使用 指定的选择器获取到的.我们只需要在使用选择器创建的对象时来添加即可在 jq 中还使用 该属性来判断 对象是否为 jq 对象我们实现对其简化:1) 提供一个 selector 表示 选择器2) 提供一个 type 属性, 存储 'jepson'. 用来表示对象是否为 jepson 类型

toArray

将 jq 对象中的每一个元素取出来组成一个数组返回var res = [];for ( ... ) {    res.push( ... )}

    jepson.fn = jepson.prototype = {        constructor: jepson,        length: 0,        selector: '', // 表示使用了选择器        type: 'jepson', // 标记对象类型        init: function (html) {            // 如果是空对象 或者 空字符串            if (html == null || html == '') return; // 直接结束            // 如果是函数            if (typeof html == 'function') {                // do something            }            // 如果是字符串            if ( jepson.isString(html) ) {                // 看是不是标签字符串                if ( /^</.test( html ) ) {                    // 是就转换成 dom 对象伪数组 分别 push 到 this 对象中                    push.apply( this, parseHTML( html ) );                } else {                    // 不是就是选择器，选中页面中的 dom 对象伪数组 分别 push 到this对象中                    push.apply( this, jepson.select( html ) );                    // 是选择器，就给他加上 selector 属性                    this.selector = html;                }            }            // 如果是 jepson 对象            if ( html && html.type === 'jepson' ) {                // 是 jepson 对象                // 将传入 的 jepson 对象所有的元素都 添加到 this 中                push.apply( this, html );                this.selector = html.selector;            }        },        toArray: function () {            var res = [];            for ( var i = 0; i < this.length; i++ ) {                res.push( this[ i ] );            }            return res;        }    }

get方法, 就是利用 toArray先转换成dom数组

    jepson.fn = jepson.prototype = {        constructor: jepson,        length: 0,        selector: '', // 表示使用了选择器        type: 'jepson', // 标记对象类型        init: function (html) {            ...        },        toArray: function () {            var res = [];            for ( var i = 0; i < this.length; i++ ) {                res.push( this[ i ] );            }            return res;        },        get: function( index ) {            if ( index === undefined ) {                return this.toArray();            }            return this[ index ];        }    }

eq 方法, $.eq(num)

$.eq(num)

num >= 0 正向取num < 0  倒着取, 使用 length + num 获得元素 返回 jquery 对象没找到不传参返回空 jquery 对象

    jepson.fn = jepson.prototype = {        constructor: jepson,        length: 0,        selector: '', // 表示使用了选择器        type: 'jepson', // 标记对象类型        init: function (html) {            // 如果是空对象 或者 空字符串            ...            // 如果是字符串            ...            // 如果是 jepson 对象            ...            // 判断是不是一个 DOM 对象, DOM 对象 有 nodeType 属性            if ( html.nodeType ) {                this[ 0 ] = html;            }        },        toArray: function () {      // 注意返回 dom 对象数组            ...        },        get: function( index ) {    // 注意返回 dom 对象            ...        },        eq: function ( num ) {            var dom;            // 这里要做判断 num >= 0 正向取  num < 0  倒着取            if ( num >= 0 ) {                dom = this.get( num );            } else {                dom = this.get( this.length + num );            }            // 这里要么是 undefined，要么就是 dom 对象， 调用自己的构造函数来构造            return this.constructor( dom );        }    }

each 和 map 方法

    // 需要一些公共，共有方法，函数对象的方法，通过 extend 添加进来    jepson.extend( {        each: function ( arr, func ) {            var i;            // 在 ES5 中还引入了 Array.isArray 的方法专门来判断数组            if ( arr instanceof Array || arr.length >= 0 ) {                for ( i = 0; i < arr.length; i++ ) {                    // 方法借调，让 arr[ i ] 成为宿主对象                    func.call( arr[ i ], i, arr[ i ] );                }            } else {                for ( i in arr ) {                    func.call( arr[ i ], i, arr[ i ] );                }            }            return arr;        },        map: function ( arr, func ) {            var i, res = [], tmp;            if ( arr instanceof Array || arr.length >= 0 ) {                for ( i = 0; i < arr.length; i++ ) {                    tmp = func( arr[i], i );                    if ( tmp != null ) {                        res.push( tmp );                    }                }            } else {                for ( i in arr ) {                    tmp = func( arr[ i ], i );                    if ( tmp != null ) {                        res.push( tmp );                    }                }            }            return res;        }    });

利用给对象函数扩展的 map 和 each 的静态方法， 我们给实例对象添加原型方法

    jepson.fn = jepson.prototype = {        constructor: jepson,        length: 0,        selector: '', // 表示使用了选择器        type: 'jepson', // 标记对象类型        init: ...,        toArray: ...,        get: ...,        eq: ...,        each: function ( func ) {            // 将 this 中的每一个 dom 元素遍历一下            return jepson.each( this, func );        },        map: function( func ) {            return jepson.map( this, func );        }   }

使用 slice 对 toArray 进行优化

slice 方法

获得数组的子元素， 且不会改变原数组arr.slice( startIndex );    // 从 startIndex 取到尾arr.slice( startIndex, endIndex );拷贝数据获得数组arr.slice( 0 )将伪数组转换成数组[].slice.call( 伪数组, 0 );不传参 从 0 开始， [].slice.call( 伪数组 );

    ...,    toArray: function () {      // 注意返回 dom 对象数组        // var res = [];        // for ( var i = 0; i < this.length; i++ ) {        //     res.push( this[ i ] );        // }        // return res;        return slice.call( this );    },    ...

添加 DOM 操作方法

appendTo 和 append

        jepson.fn.extend({            appendTo: function ( selector ) {                var iObj = this.constructor( selector );                // 用构造函数构造出一个新对象，用以存储所有的 克隆体 和 本体，用以链式调用                var newObj = this.constructor();                for ( var i = 0; i < this.length; i++ ) {                    for ( var j = 0; j < iObj.length; j++ ) {                        // 只要不是最后一个，就克隆，最后一个就用本体                        var temp = (j == iObj.length - 1) ? this[ i ] : this[ i ].cloneNode( true );                        [].push.call( newObj, temp );                        iObj[ j ].appendChild( temp );                    }                }                return newObj;            },            append: function ( selector ) {                J( selector ).appendTo( this );//                // 给 当前对象 添加元素//              var iObj = this.constructor( selector );    // 要添加的元素//                for ( var i = 0; i < this.length; i++ ) {   // 遍历当前对象//                    for ( var j = 0; j < iObj.length; j++ ) {   // 遍历要添加的元素//                        // 只要不是最后一个要添加的 对象，就要clone要添加的元素//                        var temp = (i == this.length - 1) ? iObj[ j ] : iObj[ j ].cloneNode( true );//                        this[ i ].appendChild( temp );//                    }//                }                return this;            }        });

prependTo

jquery 中 的 prepend 方法

    <body>        <div class="c">            <div>111</div>        </div>        <div class="c">            <div>222</div>        </div>    </body>    <script src="../../../资料/jquery/jquery-1.12.0/jquery-1.12.0.js"></script>    <script>        var $1 = $( '<p>000</p>' );        var $2 = $1.prependTo( '.c' );    </script>

    ...,    prependTo: function( selector ) {        var iObj = this.constructor( selector );        var newObj = this.constructor();        for ( var i = 0; i < this.length; i++ ) {            for ( var j = 0; j < iObj.length; j++ ) {                var temp = ( j == iObj.length - 1 ) ? this[ i ] : this[ i ].cloneNode( true );                [].push.call( newObj, temp );            }        }    },    ...    /* 扩展 DOM 静态方法 */    jepson.extend( {        prependChild: function ( parent, element ) {            // parent.insertBefore( 新元素, 旧元素 )            var first = parent.firstChild;            parent.insertBefore( element, first );        }    });