- 自己最近在學(xué)習(xí)一些js的插件的寫(xiě)法，那么當(dāng)然就繞不開(kāi)jquery，于是自己就學(xué)習(xí)中遇到的一些問(wèn)題做些總結(jié)和記錄
- 自己也是在學(xué)習(xí)過(guò)程中，有問(wèn)題請(qǐng)各位指出，希望大伙能多多支持，給給star，點(diǎn)點(diǎn)贊唄，github地址
這次增加五個(gè)方法,.eq(), .first(), .last(), .find(), .get()，不明白這個(gè)幾個(gè)方法作用的可以去看下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];
},
//...
}
這幾個(gè)方法都很類(lèi)似，都是需要返回只有指定的那個(gè)DOM的JQ對(duì)象。
我們就可以有兩種思路，一種是將那個(gè)JQ對(duì)象中除了那個(gè)指定DOM外其他的DOM都去掉，另一種思路就是用那個(gè)DOM構(gòu)造一個(gè)新的JQ對(duì)象，再將其返回就好了。
在JQ源碼中其實(shí)也是利用的第二種思路，只是它專(zhuān)門(mén)封裝了一個(gè).pushStack()方法來(lái)構(gòu)造新的JQ對(duì)象，其中涉及到修改selector，上下文context等。
我們就偷偷懶，直接利用new Ye(selector)來(lái)構(gòu)造就好了。
get方法只需返回DOM對(duì)象，其他eq,first,last都需要封裝。
find()方法實(shí)際上是比較復(fù)雜的，但我們也可以偷下懶，利用selector屬性可以拿到當(dāng)前JQ對(duì)象的選擇器，再和.find(selector)里的selector拼接起來(lái)就可以得到一個(gè)新的selector。
然后就可以構(gòu)造新的JQ對(duì)象了。return new Ye(context + ' ' + selector);
例如$("ul").find("li"),我們拼接成"ul li"傳過(guò)去return new Ye("ul li")
find: function(selector) {
if (!selector) return;
var context = this.selector;
return new Ye(context + ' ' + selector);
},
這幾個(gè)方法就大功告成啦。
附：
既然您看都看完了，麻煩您點(diǎn)個(gè)贊，給個(gè)star唄，謝謝您的支持
源碼地址：https://github.com/LY550275752/my-js-plug/blob/master/Ye.js
如果您不知道我在說(shuō)什么的話，推薦您從頭開(kāi)始看我的這個(gè)系列文章:
