摘要：是現(xiàn)在最流行的工具庫(kù)。據(jù)統(tǒng)計(jì)，目前全世界的網(wǎng)站使用它。好，說了這么多我們就看看自己寫一個(gè)庫(kù)，有沒有你想想的那么難。寫法寫法三事件的監(jiān)聽四類操作的方法，用于為元素添加一個(gè)。

jQuery是現(xiàn)在最流行的JavaScript工具庫(kù)。
據(jù)統(tǒng)計(jì)，目前全世界57.3%的網(wǎng)站使用它。也就是說，10個(gè)網(wǎng)站里面，有6個(gè)使用jQuery。如果只考察使用工具庫(kù)的網(wǎng)站，這個(gè)比例就會(huì)上升到驚人的91.7%。

因此，經(jīng)常我們看到一些前端面試會(huì)有這么一條要求，入拉勾的招聘：

https://www.lagou.com/jobs/99... 精通 Javascript,jQuery

https://www.lagou.com/jobs/31... 熟悉業(yè)界常用Javascript腳本庫(kù)（如prototype、jQuery、YUI、mootools等），熟悉前端工程化本地化開發(fā)解決方案

https://www.lagou.com/jobs/16... 熟悉jquery和prototype的JavaScript類庫(kù)；

https://www.lagou.com/jobs/18... 熟悉至少一種JS框架或者對(duì)JS語言掌握較深；

大家看到他們的工資都很高，兩眼放光，一看自己的工作經(jīng)驗(yàn)也符合，可是一看到上面這些話，就無奈的關(guān)掉網(wǎng)頁或者心虛了。

因?yàn)槟愦蟛糠謺r(shí)間使用jquery是這樣的:

你們公司的項(xiàng)目需要一個(gè)輪播圖或者選項(xiàng)卡或者一個(gè)功能，你不會(huì)寫，然后直接百度，恰好發(fā)現(xiàn)一個(gè)jquery插件可以用，你看了下api文檔，然后改了幾個(gè)參數(shù)，功能跑通了，然后你開始審查元素，修改樣式，然后你想這個(gè)等項(xiàng)目完了，我一定好好研究研究，然后就沒有然后了，一不小心兩年過去了，似乎自己需要的功能都能從網(wǎng)上找到插件，但是一點(diǎn)都不熟悉jquery更不用說精通了，因?yàn)槟銉赡甑臅r(shí)間都沒有嘗試懂它，你只是插件的參數(shù)修改工，或者代碼搬運(yùn)工。

有人會(huì)說，不是的老師，我嘗試著學(xué)了，但是

我想嘗試著寫一個(gè)插件，卻發(fā)現(xiàn)不會(huì)寫，看了幾篇文章不知道怎么做，看到有人解讀jquery源碼，終于下定決心好好看看了，結(jié)果一打開源代碼就懵圈了，根本看不懂，就那么放棄了。或者一個(gè)源碼解讀視頻好幾十個(gè)，幾個(gè)月過去了，我還是再等等吧。

這，像不像工作兩三年依舊苦惱的你？

其實(shí)深入jquery的難點(diǎn)不在技術(shù)本身，可以說jquery的架構(gòu)非常清晰，入手起來非常簡(jiǎn)單，而你學(xué)習(xí)的攔路虎是：

1.缺少必要的基礎(chǔ)知識(shí)鋪墊，你懂不懂匿名函數(shù)自執(zhí)行，jquery第一句代碼你都看不明白為什么人家那么做。
2.缺少系列的體系化的教程，你剛嘗試著去模擬別人敲的東西，結(jié)果一不小心卡住了，卻不明白為什么。
3.缺少及時(shí)的引導(dǎo)，你卡了兩個(gè)小時(shí)，一晚上過去了信心也沒了，這時(shí)候如果有個(gè)人也許幾句話就解決了你的問題。
4.缺少信心和正確的學(xué)習(xí)庫(kù)方式。一提到源碼就覺得很高深學(xué)不會(huì)，只是大神的專利，我還是學(xué)會(huì)用吧，然后看文檔成為了軟件使用者而不是軟件開發(fā)者。

好，說了這么多我們就看看自己寫一個(gè)jquery庫(kù)，有沒有你想想的那么難。

jQuery的核心是通過各種選擇器，選中DOM元素，可以用querySelectorAll方法模擬這個(gè)功能。

var $ = document.querySelectorAll.bind(document);

這里需要注意的是，querySelectorAll方法返回的是NodeList對(duì)象，它很像數(shù)組（有數(shù)字索引和length屬性），但不是數(shù)組，不能使用pop、push等數(shù)組特有方法。如果有需要，可以考慮將Nodelist對(duì)象轉(zhuǎn)為數(shù)組。

myList = Array.prototype.slice.call(myNodeList);

DOM本身就具有很豐富的操作方法，可以取代jQuery提供的操作方法。

　尾部追加DOM元素。

     // jQuery寫法
　　(parent).append((child));
　　// DOM寫法
　　parent.appendChild(child)

頭部插入DOM元素。

　　// jQuery寫法
　　$(parent).prepend($(child));
　　// DOM寫法
　　parent.insertBefore(child, parent.childNodes[0])

刪除DOM元素。

　　// jQuery寫法
　　$(child).remove()
　　// DOM寫法
　　child.parentNode.removeChild(child)

Element.prototype.on = Element.prototype.addEventListener;

jQuery的addClass方法，用于為DOM元素添加一個(gè)class。

　　$("body").addClass("hasJS");

DOM元素本身有一個(gè)可讀寫的className屬性，可以用來操作class。
　

    HTML 5還提供一個(gè)classList對(duì)象
　　document.body.classList.add("hasJS");
　　document.body.classList.remove("hasJS");
　　document.body.classList.toggle("hasJS");
　　document.body.classList.contains("hasJS");

簡(jiǎn)要的說了一下，自己寫jquery庫(kù)的一些技術(shù)解決方案，哪個(gè)東西大家看不懂呢？所以并不是你不努力或者學(xué)不會(huì)，而是你學(xué)習(xí)方式和學(xué)習(xí)的內(nèi)容不妥當(dāng)，

通過我一上午的講解，然后下午已經(jīng)能夠簡(jiǎn)單的實(shí)現(xiàn)一個(gè)jquery庫(kù)了，然后在實(shí)際項(xiàng)目中不斷完善和實(shí)用它，那么你手里也會(huì)有一個(gè)精巧的jquery庫(kù)，而且是自己寫的，這個(gè)時(shí)候你還會(huì)因?yàn)槭煜ぶ辽僖环NJS框架或者對(duì)JS語言掌握較深對(duì)著好的工作機(jī)會(huì)望而卻步嗎？

給自己一個(gè)機(jī)會(huì)，只要一天，也許你的工作狀態(tài)和人生會(huì)因此而改變，

微信：leolau2012（加請(qǐng)注明學(xué)習(xí)）

期待你的進(jìn)步。