摘要：是现在最流行的工具库。据统计，目前全世界的网站使用它。好，说了这么多我们就看看自己写一个库，有没有你想想的那么难。写法写法三事件的监听四类操作的方法，用于为元素添加一个。
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（加请注明学习）
期待你的进步。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/83039.html
摘要：随后水友就提到了关键信息当水友实际用请求时，返回的内容却是代码。所以在水友找到我的时候，我首先看下网站长的什么样子，水友需要的信息是各大区的名称。 showImg(https://segmentfault.com/img/remote/1460000016755031); 阅读文本大概需要 5 分钟。 JS 都是大猪蹄子 昨天读者群有位水友发了这么一条消息，说这样的网站页面信息要如何提...
摘要：以上代码功能很简单，就是把定义为一个模块，在中引用，最终两文件中要添加的内容都显示在中。我们的任务完成了，成功生成，合并，引入了，被执行了。安装，处理文件。 前言： 本套教程是零基础学打包工具webpack； 后面会结合gulp+webpack搞定所有你得需求； 闲谈： 百度搜了一下，虽然教程多，但是杂乱无章，实用的没多少，都是匆匆了事，所以我就自己学了两天，现在从最底层教大家完成we...
摘要：以上代码功能很简单，就是把定义为一个模块，在中引用，最终两文件中要添加的内容都显示在中。我们的任务完成了，成功生成，合并，引入了，被执行了。安装，处理文件。 前言： 本套教程是零基础学打包工具webpack； 后面会结合gulp+webpack搞定所有你得需求； 闲谈： 百度搜了一下，虽然教程多，但是杂乱无章，实用的没多少，都是匆匆了事，所以我就自己学了两天，现在从最底层教大家完成we...
阅读 870·2021-10-25 09:45
阅读 3286·2021-09-22 14:58
阅读 3851·2021-08-31 09:43
阅读 916·2019-08-30 15:55
阅读 919·2019-08-29 13:51
阅读 1228·2019-08-29 13:02
阅读 3486·2019-08-29 12:52
阅读 1963·2019-08-26 13:27
