jQuery是现在最流行的JavaScript工具库。

据统计，目前全世界57.3%的网站使用它。也就是说，10个网站里面，有6个使用jQuery。如果只考察使用工具库的网站，这个比例就会上升到惊人的91.7%。

因此，经常我们看到一些前端面试会有这么一条要求，入拉勾的招聘：

https://www.lagou.com/jobs/999059.html 精通 Javascript,jQuery；

https://www.lagou.com/jobs/3122579.html 熟悉业界常用Javascript脚本库(如prototype、jQuery、YUI、mootools等)，熟悉前端工程化本地化开发解决方案；

https://www.lagou.com/jobs/1638628.html 熟悉jquery和prototype的JavaScript类库；

https://www.lagou.com/jobs/1866249.html 熟悉至少一种JS框架或者对JS语言掌握较深；

大家看到他们的工资都很高，两眼放光，一看自己的工作经验也符合，可是一看到上面这些话，就无奈的关掉网页或者心虚了。

因为你大部分时间使用jquery是这样的:

公司的项目需要一个轮播图、选项卡或者其他功能，你不会写，然后直接百度，恰好发现一个jquery插件可以用，你看了下api文档，改了几个参数，功能跑通了，然后你开始审查元素，修改样式，你想这个等项目完了，我一定好好研究研究，然后就没有然后了，一不小心两年过去了，似乎自己需要的功能都能从网上找到插件，但是一点都不熟悉jquery，更不用说精通了，因为你两年的时间都没有尝试懂它，你只是插件的参数修改工，或者代码搬运工。

有人会说，不是的老师，我尝试着学了，但是

却发现不会写，看了几篇文章不知道怎么做，看到有人解读jquery源码，终于下定决心好好看看了，结果一打开源代码就懵圈了，根本看不懂，就那么放弃了。或者一个源码解读视频好几十个，几个月过去了，我还是再等等吧。

这，像不像工作两三年依旧苦恼的你？

其实深入jquery的难点不在技术本身，可以说jquery的架构非常清晰，入手起来非常简单，而你学习的拦路虎是：

1.缺少必要的基础知识铺垫，你懂不懂匿名函数自执行，jquery第一句代码你都看不明白为什么人家那么做。

2.缺少系列的体系化的教程，你刚尝试着去模拟别人敲的东西，结果一不小心卡住了，却不明白为什么。

3.缺少及时的引导，你卡了两个小时，一晚上过去了信心也没了，这时候如果有个人也许几句话就解决了你的问题。

4.缺少信心和正确的学习库方式。一提到源码就觉得很高深学不会，只是大神的专利，我还是学会用吧，然后看文档成为了软件使用者而不是软件开发者。

好，说了这么多我们就看看自己写一个jquery库，有没有你想想的那么难。

一、选取DOM元素

jQuery的核心是通过各种选择器，选中DOM元素，可以用querySelectorAll方法模拟这个功能。

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

这里需要注意的是，querySelectorAll方法返回的是NodeList对象，它很像数组(有数字索引和length属性)，但不是数组，不能使用pop、push等数组特有方法。如果有需要，可以考虑将Nodelist对象转为数组。

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

二、DOM操作

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语言掌握较深对着好的工作机会望而却步了。

给自己一个机会，只要一天，也许你的工作状态和人生会因此而改变。

期待你的进步。

·END·

面包理想

让涨工资变得简单

微信号：mblx-sun