jQuery源码探索之路(4)-- .eq(), .first(), .last(), .find(), .get()的实现

  1. 自己最近在学习一些js的插件的写法,那么当然就绕不开jquery,于是自己就学习中遇到的一些问题做些总结和记录
  1. 自己也是在学习过程中,有问题请各位指出,希望大伙能多多支持,给给star,点点赞呗,github地址

这次增加五个方法,.eq(), .first(), .last(), .find(), .get(),不明白这个几个方法作用的可以去看下JQ的使用文档,先放代码

Ye.prototype = {
//....
 find: function(selector) {
     if (!selector) return;
     var context = this.selector;
     return new Ye(context + ' ' + selector);
 },
 first: function() {
     return new Ye(this[0]);
 },
 last: function() {
     var len = this.length - 1;
     return new Ye(this[num]);
 },
 eq: function(num) {
     var num = num < 0 ? (this.length - 1) : num;
     return new Ye(this[num]);
 },
 get: function(num) {
     var num = num < 0 ? (this.length - 1) : num;
     return this[num];
 },
//...
}

这几个方法都很类似,都是需要返回只有指定的那个DOM的JQ对象。

我们就可以有两种思路,一种是将那个JQ对象中除了那个指定DOM外其他的DOM都去掉,另一种思路就是用那个DOM构造一个新的JQ对象,再将其返回就好了。

在JQ源码中其实也是利用的第二种思路,只是它专门封装了一个.pushStack()方法来构造新的JQ对象,其中涉及到修改selector,上下文context等。

我们就偷偷懒,直接利用new Ye(selector)来构造就好了。

get方法只需返回DOM对象,其他eq,first,last都需要封装。

find()方法实际上是比较复杂的,但我们也可以偷下懒,利用selector属性可以拿到当前JQ对象的选择器,再和.find(selector)里的selector拼接起来就可以得到一个新的selector。
然后就可以构造新的JQ对象了。return new Ye(context + ' ' + selector);

例如$("ul").find("li"),我们拼接成"ul li"传过去return new Ye("ul li")

 find: function(selector) {
     if (!selector) return;
     var context = this.selector;
     return new Ye(context + ' ' + selector);
 },

这几个方法就大功告成啦。


附:
既然您看都看完了,麻烦您点个赞,给个star呗,谢谢您的支持
源码地址:https://github.com/LY550275752/my-js-plug/blob/master/Ye.js

如果您不知道我在说什么的话,推荐您从头开始看我的这个系列文章:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,408评论 0 8
  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 868评论 0 8
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 1,055评论 0 9
  • 生完宝宝一晃半年要过去了,从100天后开始励志的看书写作,可惜持续时间不到一个月就被宝宝出现的睡眠问题打败。从四个...
    安婩阅读 121评论 0 0
  • 2016-08-30 氺慶 提到“说教“这件事,我想大家脑海里浮现最多的景象莫过于父母喋喋不休的唠叨,课堂上老师的...
    靳水悠悠阅读 5,104评论 0 2