jQuery原型方法first,last,eq,slice源码分析
这4个方法中前3个方法很常用大家都见过,但是slice方法可能会以为是数组方法,其实slice也是jQuery的一个原型方法,只不过是底层方法是为其他方法服务的(更具体点是为eq方法服务的),首先还是看下这几个方法前台是怎么使用的;
eq 概述 获取第N个元素
参数
一个整数,指示元素的位置,从集合中的最后一个元素开始倒数。(1算起)
示例
参数index描述:
//获取匹配的第二个元素//HTML 代码:<p> This is just a test.</p> <p> So is this</p> //jQuery 代码: $("p").eq(1) //结果: [ <p> So is this</p> ]
参数-index描述:
//获取匹配的第二个元素//HTML 代码:<p> This is just a test.</p> <p> So is this</p> //jQuery 代码: $("p").eq(-2) //结果: [ <p> This is just a test.</p> ]
first() 获取第一个元素
示例
描述:
获取匹配的第一个元素
//HTML 代码:<ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li> </ul> //jQuery 代码: $('li').first() //结果: [ <li>list item 1</li> ]
last() 获取最后个元素
示例
描述:
获取匹配的最后个元素
//HTML 代码:<ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li><li>list item 5</li> </ul> //jQuery 代码: $('li').last() //结果: [ <li>list item 5</li> ]
下面来看1.7.1中的源码:
eq: function( i ) {i = +i;return i === -1 ?this.slice( i ) :this.slice( i, i + 1 );},first: function() {return this.eq( 0 );},last: function() {return this.eq( -1 );},slice: function() {return this.pushStack( slice.apply( this, arguments ),"slice", slice.call(arguments).join(",") );},
东西其实不多而且都是相互引用,首先我们可以简单的分下他们的关系 first,last>eq>slice>pushStack;
所以最红结果的输出依赖pushStack方法,此方法介绍在上一篇随笔中http://www.cnblogs.com/yy-hh/p/4636106.html感兴趣的可以了解下或者参考源码;所以直接从slice方法开始;
在源码中可以看到是直接ruturn pushStack处理后的结果,而在pushStack方法中需要3个参数,第一个是待处理元素数组,第二个是调用的方法,第三个是传入的selector,其中真正作用的是第一个参数剩下的两个参数是作调试使用的,他最后会返回一个新的jQuery对象,并且会在这个对象中添加一个prevObject属性执行原来的或者叫执行此方法时的jQuery对象,具体的请参考介绍pushStack的随笔。下面重点来看下参数的处理:
slice.apply( this, arguments )
这个是一个数组的截取,其实是一个类数组或者特殊数组转换为纯数组的方法,前面我们介绍的toArray方法亦是如此
toArray: function() {return slice.call( this, 0 );},
这不过是这里并不是需要所有的元素而是仅仅保留数字下标的dom元素,为了更方便的理解我们在前台调用下这个方法然后观察源码中的结果变化:
<script>$('div').slice();</script>
slice: function() {console.log(this);console.log(this.toArray());console.log(slice.apply( this, arguments));return this.pushStack( slice.apply( this, arguments ),"slice", slice.call(arguments).join(",") );}, //Object { 0: <div>, 1: <div>, length: 2, prevObject: Object, context: HTMLDocument → test.html, selector: "div" } //Array [ <div>, <div> ] //Array [ <div>, <div> ]
结果是不是很明显呢?在未处理之前是一个jQuery对象,拥有众多属性和方法在使用toArray方法和slice.apply( this, arguments)结果是一样的仅仅保留的是两个dom元素,不是所有的非数组都是可以这样转化的一定要是从0开始下标而且有length属性的才可以或者更简单点可以使用for循环的。但是既然可以使用toArray方法直接不就行了干嘛还要在写一个用对象冒充一次呢,其实toArray方法只是arguments为0的特殊情况,toArray方法也是写得很清楚,如果我调用此方法加上参数就不一样了例如:
$('div').slice(0,1);
Object { 0: <div>, 1: <div>, length: 2, prevObject: Object, context: HTMLDocument → test.html, selector: "div" } Array [ <div>, <div> ] Array [ <div> ]
第二个参数“slice”就是从这个方法入栈的作为调试用,第三个参数是一个字符串arguments是类数组所以要对象冒充掉join方法 在上面例子的调用下就是"0,1" 最后来看看下slice方法最终返回的结果
console.log($('div').slice(0,1));
Object { 0: <div>, length: 1, prevObject: Object, context: HTMLDocument → test.html, selector: "div.slice(0,1)" }
如果不够清楚可以看下目录
console.dir($('div').slice(0,1));
prevObject属性指向未调用slice(也就是pushStack)方法时的对象 selector属性告诉我们是什么元素调用了什么方法入栈的以及参数是什么
理解了slice方法eq方法就很清晰了:
eq: function( i ) {i = +i;return i === -1 ?this.slice( i ) :this.slice( i, i + 1 );},
返回slice的结果,其实我上面局的例子完全可以是eq方法调用转换而来,因为一般情况下我们是不会单独调用slice方法的例如:
$('div').eq(0);
执行完其实就是return this.slice(0,1);
first方法都是eq方法的特殊情况当值为0或1的时候,所以也不建议大家使用这个方法,不好听点叫脱裤子放屁多此一举啊,好听点就是增加调用开销啊。
分析完毕:如果您耐心的看完了此篇还是不知所云可能有以下几个原因:
1.js基础不够扎实比如slice,apply等方法的使用
2.没有了解pushStack方法,这个方法是很多jQuery方法的底层支持方法一定要先弄清楚
转载于:https://www.cnblogs.com/yy-hh/p/4645525.html
jQuery原型方法first,last,eq,slice源码分析相关推荐
- java 向上取整方法 Math.ceil() 用法、源码分析
刷题用到了,正好好好看看源码. 用法 Math.ceil() 返回值.参数均为double类型, 如果参数为int类型,idea不会报错,但是方法同时不会向上取整. 参数为int类型时,Math.ce ...
- jquery Callbacks 回调对象的读书笔记-源码分析
2019独角兽企业重金招聘Python工程师标准>>> Callbacks:回调对象,函数的一个统一管理(观察者模式) 基本使用 function test1() {console. ...
- jquery1.43源码分析之工具方法
相关文章: jQuery插件开发全解析 读jq之四 jquery1.43源码分析之核心部分 推荐圈子: Jquery 更多相关推荐 这个部分是jquery一些常用的工具方法. 包括为jquery对象扩 ...
- jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/unde
10.4 .bind() .one() 10.4.1 如何使用 .bind( eventType, [eventData], handler(eventObject) ) 在匹配的元素上绑 ...
- jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/undelegate
Js代码 作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 后文预告:封装事件对象 便 ...
- 【Android 插件化】VirtualApp 源码分析 ( 启动应用源码分析 | HomePresenterImpl 启动应用方法 | VirtualCore 启动插件应用最终方法 )
文章目录 一.启动应用源码分析 1.HomeActivity 启动应用点击方法 2.HomePresenterImpl 启动应用方法 3.VirtualCore 启动插件应用最终方法 一.启动应用源码 ...
- 【Android 启动过程】Activity 启动源码分析 ( AMS -> ActivityThread、AMS 线程阶段 )
文章目录 一.Activity 启动源码分析 ( AMS | ActivityManagerService ) 1.Instrumentation 调用 AMS 方法 2.ActivityStarte ...
- kafka源码愫读(5)、ReplicaManager模块源码分析
1.ReplicaManager模块简介 replicaManager主要用来管理topic在本broker上的副本信息.并且读写日志的请求都是通过replicaManager进行处理的. 每个rep ...
- OkHttpClient源码分析(一)—— 同步、异步请求分析和Dispatcher的任务调度
OkHttpClient同步请求的执行流程和源码分析 同步请求示例 OkHttpClient okHttpClient = new OkHttpClient.Builder().readTimeout ...
最新文章
- Linux LVM硬盘管理及LVM扩容
- ubuntu共享usb接口给虚拟机_如何在虚拟机的Ubuntu12.04中使用外部USB设备
- Random类、String类的一些常用方法
- 接口中私有方法【应用】
- android 设置线程优先级
- 重修 mongoDB 系列(一) 配置环境
- 三相四线怎样查漏电_漏电保护器的选用
- sga_target大于sga_max_size数据库无法启动
- 人脸识别:AI产品经理需要了解的CV通识
- p-7-24青蛙跳台阶
- 比热容相关的热量计算机应用,13章三节比热容.doc
- Kali Linux——小白安装过程(2021)
- 鲲鹏devkit开发套件——编译调试工具介绍
- mac nexus 资源下载及安装
- Static Clutter Removal DPU
- 个人网站与博客的区别
- python下载笔趣阁小说生成txt文档
- HYDRUS模型应用高级培训班
- MPC5744-PIT
- 17967 大师姐唱K的固有结界
热门文章
- 原生JavaScript如何解决父元素查找指定类名的子元素的问题
- ubuntu循环登录问题的解决
- 001_关于选中的磁盘具有MBR分区表。在 EFI 系统上,Windows 只能安装到 GPT 磁盘。问题解决
- 如何将列表分成大小均匀的块?
- Android实战经验之图像处理及特效处理的集锦
- activiti配置文件activiti.cfg.xml
- jquery的validate表单验证表单注册插件
- android activity获取dialog对象,Android:从DialogFragment调用Activity的功能
- linux6.5双屏显示,Redhat 6.5的系统如何设置双显示屏,急急急!
- java 静态传值到构造器_java 静态初始化块,初始化块,构造器执行顺序