JQuery 笔记(六)【96~283】给JQ对象添加方法和属性 {其他方法}

【202~204】 jQuery( ).toArray( )

源码笔记:

toArray: function() {
    return core_slice.call( this );// core_slice在54行,存的是原生的slice方法
},// core_slice不传参的话,会截取整个数组,复制一个新数组
// 用call改变一下其执行环境,在json下执行,返回一个全新的数组

备注:

    $('div').toArray();
    // 将json转成数组,返回的是原生的,因此得用原生的操作,而不能用JQ方法
    //如 $('div') : { 0 : div , 1 : div , 2 : div , length : 3 }
    //则 $('div').toArray() : [div,div,div]

【208~216】 jQuery( ).get( )

源码笔记:

get: function( num ) { // 转原生集合
    return num == null ?

        this.toArray() :// 不传参,返回整个集合数组

        ( num < 0 ? this[ this.length + num ] : this[ num ] );
        // 有传参,则通过this这个json的下标属性来找
        // num为负数,为从后往前找
},

备注:

$('div').get(-1).innerHTML = '222222222';// 若有3个div,则写-1和2结果一样
$('div').get(3).innerHTML = '222222222';

for(var i=0;i<$('div').get().length;i++){ // 不传参,返回集合数组,可for循环
        $('div').get(i).innerHTML = '222222';
}

【220~231】 jQuery( ).pushStack( )

源码笔记:

// 栈:先进后出(乘电梯)   队列:先进先出(过隧道)
pushStack: function( elems ) { // JQ对象的入栈

    var ret = jQuery.merge( this.constructor(), elems ); // this.constructor()是个空的JQ对象
    // 用merge转成json

    ret.prevObject = this; // 将this挂到该属性下,就可通过end()找到
    ret.context = this.context;

    return ret;
},

备注:

$('div').pushStack( $('span') ).css('background','red');
// $('div')在栈底,$('span')在其上面,因此span会变红

【271~273】 jQuery( ).end( )

源码笔记:

// 通过prevObject属性找到栈的下一层
end: function() {// prevObject是在pushStack方法中添加的
    return this.prevObject || this.constructor(null);// 没有的话就走个空
},

备注:

$('div').pushStack( $('span') ).end().css('background','yellow');

// $('div')在栈底,$('span')在其上面。通过end( )找到栈下层,使div变黄。
// 因为end()里调用了pushStack( )
// 而pushStack( )里将$('div')挂到了$('span')的prevObject属性上。
// 因此end( )通过该属性就可以找到$('span')找到$('div')。

【247~249】 jQuery( ).slice( )

源码笔记:

// 集合的截取
slice: function() {// 通过入栈实现
    return this.pushStack( core_slice.apply( this, arguments ) );
},

备注:

$('div').slice(1,3).css('background','red');

// slice( )中用挂在JQ对象下的原生slice方法,
// 其会把要选择的东西从$('div')里截出。
// slice( )中使用了pushStack( ),将截出的东西入栈。
// $('div')在栈底,截出的东西在其上,因此截出的东西变红。

【251~263】 jQuery( ).first( ) , jQuery( ).last( ) , jQuery( ).eq( )

源码笔记:

// 集合的第一项
first: function() {
    return this.eq( 0 );// 通过eq()实现
},

// 集合的最后一项
last: function() {
    return this.eq( -1 );// 通过eq()实现
},

// 集合的指定项
eq: function( i ) {
    var len = this.length,
        j = +i + ( i < 0 ? len : 0 );// 负数为倒着数
    return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
},// this是个有length和下标的json

//通过 pushStack( )将要选择的东西(以this的下标形式选择)入栈,再根据栈的层级关系,对其进行处理。

【263~245】 jQuery( ).each( ) , jQuery( ).ready( )

【265~269】 jQuery( ).map( )

源码笔记:

// 遍历集合,加强版的for循环
each: function( callback, args ) {
    return jQuery.each( this, callback, args );// 通过工具方法实现
},
// DOM加载的接口
ready: function( fn ) {
    jQuery.ready.promise().done( fn );// 通过工具方法实现

    return this;
},
// 返回新集合,对集合的二次处理
map: function( callback ) {// 通过工具方法实现
    return this.pushStack( jQuery.map(this, function( elem, i ) {
        return callback.call( elem, i, elem );
    }));
},

备注:

// 工具方法$.map()
var arr = ['a','b','c'];

arr = $.map(arr,function(elem,i){
        return elem + i;
});

arr; //['a0', 'b1', 'c2']

// 实例方法$().map(),只不过是通过入栈对集合进行二次处理而已

【277~279】 jQuery( ).push( ) , jQuery( ).sort( ) , jQuery( ).splice( )

源码笔记:

// 内部用的,不建议在外部使用
push: core_push,// JQ把原生的数组方法挂到了JQ对象下
sort: [].sort,
splice: [].splice

【283】 jQuery.fn.init.prototype = jQuery.fn;

你可能感兴趣的:(JQuery 笔记(六)【96~283】给JQ对象添加方法和属性 {其他方法})