携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情 >>
前言
在前端工程化趋势的当下，jQuery貌似是已经过时的一代产品，毕竟现在都流行数据驱动，jQuery的便利性就在于封装了复杂了dom query，以vue，react为代表的现代web框架都在基于数据流做事情了，基于dom操作的jQuery就显得略微有一点“笨重”，那为什么还要写着一篇文章呢？笔者认为，九层之台 起于累土 千里之行，始于足下，jQuery或许在工程化场景下显得不那么合时宜，但是，作为风靡了一代的web框架，他终究有值得我们去探寻的东西。
write less do more
标题是jQuery的slogan，而实际上，jQuery也做到了，让我们在那个时代，写的更少，但是能实现的更多，不管是封装的各类选择器，还是针对css属性的操作还有动画队列，在今天来去阅读源码，依然能从中学到作者设计的巧妙。
链式调用 隐式循环
标题是我总结的jQuery的特点，除了直接返回数值的几个方法，jQuery几乎所有的方法都支持通过.的方式继续调用，这就是链式调用，隐式循环指的是，我们通过选择器选中了多个元素，后续的链式调用会自动进行循环。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>
以上代码，我们只是通过标签选择器选择了p标签，后续的click事件会给所有的p标签绑定上点击事件
链式调用是如何实现的？
接下来，我尝试用最简单的办法，来实现一个链式调用,这里我们需要判断一下传入的参数是字符串的话，就调用querySelectorAll选择器，如果传入的是个对象，那就直接进行赋值
function myjquery(selector){
if(typeof selector=="string"){
var eles=document.querySelectorAll(selector);
for(var i=0;i<eles.length;i++){
this[i]=eles[i];
}
this.length=eles.length;
}else if(typeof selector=="object" && selector.nodeType==1){
this[0]=selector;
this.length=1;
}
}
myjquery.prototype={
this.onclick=function(){
callback.call(obj)
}
return this
}
通过 return this 这样的方式，就实现了链式调用，因为每次return 的都是jquery本身，所以可以调用jquery自身的方法。
- nodeType
隐式循环是如何实现的？
隐式循环是在调用其他方法的时候，会自动帮我们调用循环方法,我们改写一下click方法，并且提供一个each方法，注意我们一开始的写法，通过选择器选择后，是以下标为key，然后写入了this对象本身
myjquery.prototype={
each:function (callback) {
for(var i=0;i<this.length;i++){
callback(i,this[i]);
}
}
}，
click:function(callback){
this.each(function(index,obj){
obj.onclick=function(){
callback.call(obj)
}
})
return this;
},
