- 自己最近在学习一些js的插件的写法,那么当然就绕不开jquery,于是自己就学习中遇到的一些问题做些总结和记录
- 自己也是在学习过程中,有问题请各位指出,希望大伙能多多支持,给给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
如果您不知道我在说什么的话,推荐您从头开始看我的这个系列文章: