摘要：是現在最流行的工具庫。據統計，目前全世界的網站使用它。好，說了這么多我們就看看自己寫一個庫，有沒有你想想的那么難。寫法寫法三事件的監聽四類操作的方法，用于為元素添加一個。

jQuery是現在最流行的JavaScript工具庫。
據統計，目前全世界57.3%的網站使用它。也就是說，10個網站里面，有6個使用jQuery。如果只考察使用工具庫的網站，這個比例就會上升到驚人的91.7%。

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

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

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

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

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

大家看到他們的工資都很高，兩眼放光，一看自己的工作經驗也符合，可是一看到上面這些話，就無奈的關掉網頁或者心虛了。

因為你大部分時間使用jquery是這樣的:

你們公司的項目需要一個輪播圖或者選項卡或者一個功能，你不會寫，然后直接百度，恰好發現一個jquery插件可以用，你看了下api文檔，然后改了幾個參數，功能跑通了，然后你開始審查元素，修改樣式，然后你想這個等項目完了，我一定好好研究研究，然后就沒有然后了，一不小心兩年過去了，似乎自己需要的功能都能從網上找到插件，但是一點都不熟悉jquery更不用說精通了，因為你兩年的時間都沒有嘗試懂它，你只是插件的參數修改工，或者代碼搬運工。

有人會說，不是的老師，我嘗試著學了，但是

我想嘗試著寫一個插件，卻發現不會寫，看了幾篇文章不知道怎么做，看到有人解讀jquery源碼，終于下定決心好好看看了，結果一打開源代碼就懵圈了，根本看不懂，就那么放棄了?；蛘咭粋€源碼解讀視頻好幾十個，幾個月過去了，我還是再等等吧。

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

其實深入jquery的難點不在技術本身，可以說jquery的架構非常清晰，入手起來非常簡單，而你學習的攔路虎是：

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

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

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

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

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

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元素添加一個class。

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

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

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

簡要的說了一下，自己寫jquery庫的一些技術解決方案，哪個東西大家看不懂呢？所以并不是你不努力或者學不會，而是你學習方式和學習的內容不妥當，

通過我一上午的講解，然后下午已經能夠簡單的實現一個jquery庫了，然后在實際項目中不斷完善和實用它，那么你手里也會有一個精巧的jquery庫，而且是自己寫的，這個時候你還會因為熟悉至少一種JS框架或者對JS語言掌握較深對著好的工作機會望而卻步嗎？

給自己一個機會，只要一天，也許你的工作狀態和人生會因此而改變，

微信：leolau2012（加請注明學習）

期待你的進步。