jquery源码解析:pushStack,end,ready,eq详解
上一篇主要讲解了jQuery原型中最重要的方法init。接下来再讲一些比较常用的原型方法和属性
core_slice = [].slice,
jQuery.fn = jQuery.prototype = {
toArray: function(){
//把jQuery对象转换成原生元素的数组,比如:$("div").toArray(),{0:"div",1:"div"} -> ["div","div"]
return core_slice.call( this );
},
get: function( num ) { //得到原生的元素(可以取到某一个)
return num == null ?
this.toArray() :( num < 0 ? this[ this.length + num ] : this[ num ] );
//[],除了取下标,还可以取属性。如果this是数组,就取下标,如果是对象就取属性
},
pushStack: function( elems ) { //栈的实现,先进后出。
var ret = jQuery.merge( this.constructor(), elems ); //把传入的elems(数组)转换成jQuery对象
//this.constructor()是一个空的jQuery对象,jQuery()。
ret.prevObject = this; //使p(jQuery)的prevObject指向div(jQuery)
//这里的作用是为了回溯用,比如,$("div").pushStack($("p")).css()后,我想对div进行处理,这时可以调用$("div").pushStack($("p")).css().end().css(),后面这个css就会只对div进行处理了,end方法就是取p的prevObject属性。
ret.context = this.context;
return ret; //返回p(jQuery)
},//举个列子,$("div").pushStack($("p")).css();这个css就只对p进行处理。
end: function() {
return this.prevObject || this.constructor(null); //如果没有,就创建一个空的jQuery对象
},
slice: function() { //$("div").slice(1,3).css().end().css(),假设有4个div,那么第一个css只对第二个和第三个有效果,end之后,第二个css对这4个div都有效果。
return this.pushStack( core_slice.apply( this, arguments ) ); //4个div.pushStack(2个div)
},
each: function( callback, args ) { //实例方法调用的是工具方法(很多这种调用方式)。
return jQuery.each( this, callback, args ); //$("div").each(a) -> return jQuery.each( $("div"), a, undefined),第三个参数供jQuery内部使用。
//jQuery.each会循环每一个div,执行a回调方法,a.call( obj[ i ], i, obj[ i ] );也就是在div的执行上下文,执行a(i,div),其中i为当前div的index值。
},
ready: function( fn ) {
//可以先看我的另外一篇博客:http://www.cnblogs.com/chaojidan/p/4121788.html
jQuery.ready.promise().done( fn );
return this;
},
eq: function( i ) {
var len = this.length,
j = +i + ( i < 0 ? len : 0 ); //+i就是把传入的数字字符转化成数字,比如:"3"->3.
return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );
},//eq方法也可以用end方法,返回到原jQuery对象。
map: function( callback ) { //$("div").map(a)
return this.pushStack( jQuery.map(this, function( elem, i ) {
return callback.call( elem, i, elem );
//map方法是针对每一个div,执行function(elem,i)方法,传入div,和div的index值。里面调用callback.call( elem, i, elem ),a.call(div,i,div),如果执行a方法得到的是undefined或者是null,就会过滤掉此div。
}));
},
.....
}
差不多就这些了,其实我还想说下js各种方法调用时,里面的参数个数和顺序,面试官很喜欢问。请看我这篇博客:http://www.cnblogs.com/chaojidan/p/4142338.html
加油!
jquery源码解析:pushStack,end,ready,eq详解的更多相关文章
- jQuery 源码分析(十八) ready事件详解
ready事件是当DOM文档树加载完成后执行一个函数(不包含图片,css等),因此它的触发要早于load事件.用法: $(document).ready(fun) ;fun是一个函数,这样当DOM树加 ...
- gulp源码解析(一)—— Stream详解
作为前端,我们常常会和 Stream 有着频繁的接触.比如使用 gulp 对项目进行构建的时候,我们会使用 gulp.src 接口将匹配到的文件转为 stream(流)的形式,再通过 .pipe() ...
- jQuery 源码分析(十一) 队列模块 Queue详解
队列是常用的数据结构之一,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队).特点是先进先出,最先插入的元素最先被删除. 在jQuery内部,队列模块为动画模块提供基 ...
- Linux源码解析-内核栈与thread_info结构详解
1.什么是进程的内核栈? 在内核态(比如应用进程执行系统调用)时,进程运行需要自己的堆栈信息(不是原用户空间中的栈),而是使用内核空间中的栈,这个栈就是进程的内核栈 2.进程的内核栈在计算机中是如何描 ...
- Spring源码解析--IOC根容器Beanfactory详解
BeanFactory和FactoryBean的联系和区别 BeanFactory是整个Spring容器的根容器,里面描述了在所有的子类或子接口当中对容器的处理原则和职责,包括生命周期的一些约定. F ...
- AngularJS源码解析2:注入器的详解
上一课,没有讲createInjector方法,只是讲了它的主要作用,这一课,详细来讲一下这个方法.此方法,最终返回的注册器实例对象有以下几个方法: invoke, instantiate, get, ...
- hanlp源码解析之中文分词算法详解
词图 词图指的是句子中所有词可能构成的图.如果一个词A的下一个词可能是B的话,那么A和B之间具有一条路径E(A,B).一个词可能有多个后续,同时也可能有多个前驱,它们构成的图我称作词图. 需要稀疏2维 ...
- axios 源码解析(下) 拦截器的详解
axios的除了初始化配置外,其它有用的应该就是拦截器了,拦截器分为请求拦截器和响应拦截器两种: 请求拦截器 ;在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要 ...
- JQuery源码解析(一)
写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.j ...
- jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
随机推荐
- Application.LoadLevel & Object.DontDestroyOnLoad
[Application.LoadLevel] 只有在File->Build Setting中设置了的按钮才能被加载. 当level加载完成后,MonoBehaviour.OnLevelWasL ...
- 刷题向》一道关于位运算的神题(BZOJ3668)(HARD-)
个人觉得这道题对于位运算的加深理解很有意义 根据题目所说,我们要求出一个在给定范围里的自变量,使得最终结果最大. 那么因为这道题是针对于位运算的,所以可以想到用对于位运算取极限情况,即对于“0”和“( ...
- SEL 类型
1.SEL类型的第一个作用, 配合对象/类来检查对象/类中有没有实现某一个方法 SEL sel = @selector(setAge:); Person *p = [Person new]; // 判 ...
- Crack IDEA
使用破解补丁 Crack IDEA→在http://idea.lanyus.com/上可以找到最新的破解补丁,下载并放到软件的bin目录下 →更改bin目录下的两个文件:Idea.exe.vmopti ...
- 每个内存大小:sudo dmidecode -t memory |grep -A16 "Memory Device$" |grep "Size:"
CPU: 型号:grep "model name" /proc/cpuinfo |awk -F ':' '{print $NF}' 数量:lscpu |grep "CPU ...
- TTF字体基本知识及其在QT中的应用
字体类型 以Windows为例,有4种字体技术: Raster:光栅型,就是用位图来绘制字形(glyph),每个字都以位图形式保存 Vector:矢量型,就是用一系列直线的结束点来表示字形 TrueT ...
- 循环结构之for循环
循环结构之for循环(一) 在很多编程语言中都有一种直接.简单的循环,它的一般形式为: 它的执行过程如下: 第一步:执行表达式1,对循环变量做初始化: 第二步:判断表达式2,若其值为真(非0),则执行 ...
- zigbee初探
什么是zigbee? 1.它是一种通信方式,一种通信协议: 2.其作用就是构建一个类似无线局域网的东西:如果这个局域网用于传感器的数据收集.监控,那么这个网络就叫做无线传感器网络. 应用领域:家居.工 ...
- Spring Boot☞ 使用Thymeleaf模板引擎渲染web视图
静态资源访问 在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源. 默认配置 Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /s ...
- C++11学习笔记之三lamda表达式,std::function, std::bind
//lamda //first lamda [] {}; // second lamda []() //or no need () when paramater is null { std::cout ...