【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;