轻轻松松自己写一个jquery库-要不要试试？

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库，有没有你想想的那么难。

一、选取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语言掌握较深对着好的工作机会望而却步吗？

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

微信：leolau2012（加请注明学习）

期待你的进步。