What ？Are you kidding me？老弟，现在是 2020 年了，你还在学 jQuery？别是个傻子吧？
确实，如今想从事前端行业的新人基本上没有学 jQuery 的了，大家基本都是学 Vue 和 React，那我为什么还要写这篇博客？
1、为什么还要学 jQuery
回想第一次接触 jQuery 的时候还是在两年前的大四，当时的我正考虑走前端这条道路，不知从哪搞来了一张前端学习路线图，从 HTML + CSS + JavaScript 开始入门，自学过 jQuery，当时还没听说过 Vue（也可能是刚接触前端，比较孤陋寡闻）。
当时跟着书和网上的资料了解了一遍 jQuery，到现在，只记得 jQuery 的 $ 起手式，还有一个链式操纵，剩下的都忘了。就当下的时间来看，热门的前端框架是 Vue 和 React，大多数人可能认为没有必要再去学习 jQuery，因为 jQuery 已经过时了。
且不说 jQuery 过不过时，先来了解一个事实，看一下当年的 jQuery 到底有多火。
jQuery 于 2006 年发布，到如今已有 14 个年头了，自有前端行业以来，数以千万计的前端的框架和库，请问谁能比的了，Vue 和 React 两种比较新的框架也只不过五六年而已，能继续热几年还是个未知数，从这一点来看，jQuery 肯定是有相当优秀之处值得我们去学习。
其次 jQuery 在世界上使用的广泛程度，也是其他任何框架所不能比拟的，全球百分之 80% 左右的网站在使用 jQuery，吹牛呢吧？不相信的可以去 builtwith.com 上看一下，2020 年，全球前 10000 的网站中，有 8000+ 的网站在使用 jQuery。同比 Vue 还不到 1000。
但是不得不说，jQuery 确实过时了，它过时的原因并不是因为它本身不好，而是前端如今已经不怎么操作 DOM 了。
综上所述，jQuery 极为经典，它能活到现在肯定是有其优秀之处的，大家不要排斥学习 jQuery，了解一下思想也是好的。
既然对 jQuery 有了一个初步的了解，那我们来看一下 jQuery 的封装思想及相关 API 和基本使用吧。阮一峰：jQuery设计思想
2、jQuery 的封装思想
jQuery 极为简单，这句话是相对 Vue 和 React 来说的。jQuery 的源码就是封装的 JavaScript 的原生 dom API，而 Vue 和 React 是不推荐操作 dom 的，它们是基于 MVVM 的思想，其底层源码肯定是比 jQuery 复杂的。
如果了解一点 jQuery 的封装思想，你就会知道 jQuery 的源码是多简单，其思想是多精髓。就比如 jQuery 的链式操作，它是怎么做到的？
$('#div').addClass('red').addClass('blue'); //链式操作 window.$ = window.jQuery = function(selector){ //jQuery的封装思想 let nodes = document.querySelctorAll(selector); return { //闭包，返回一个可以操作当前选中节点的对象 addClass:function(className){ for (let i=0;i<nodes.length;i++){ nodes[i].classList.add(className); } ruturn this; //返回调用该函数的对象 } } }
jQuery 的其他相关 API 也是这样封装的，是不是符合上面说的，jQuery 的封装比较简单？实际上就是用到的闭包，每次调用封装的 API 后都能返回调用该方法的对象，通过这样来实现链式编程。
jQuery 其他方法的封装这里就先不写了，打算后期出一个完整的文档，如有更新会在这附上链接。 Build your own dom API
3、jQuery 如何获取元素
在使用 jQuery 前注意先将其引入到项目中，可以到 BootCDN 上找，或者到 jQuery 官网：
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
jQuery 的基本设计思想和主要用法，就是 "选择某个网页元素，然后对其进行某种操作"。这是它区别于其他 Javascript 库的根本特点。使用 jQuery 的第一步，往往就是将一个选择表达式，放进构造函数 jQuery()（简写为$），然后得到被选中的元素。
$(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myClass的div元素 $('input[name=first]') // 选择name属性等于first的input元素 //也可以是jQuery特有的表达式： $('a:first') //选择网页中第一个a元素 $('tr:odd') //选择表格的奇数行 $('#myForm :input') // 选择表单中的input元素 $('div:visible') //选择可见的div元素 $('div:gt(2)') // 选择所有的div元素，除了前三个 $('div:animated') // 选择当前处于动画状态的div元素
4、jQuery 的链式操作
jQuery 中一个重要的设计思想，就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，比如：
$('div').find('h3').eq(2).html('Hello');
这是 jQuery 最令人称道、最方便的特点。它的原理在于每一步的 jQuery 操作，返回的都是一个 jQuery 对象，所以不同操作可以连在一起。
jQuery 还提供了.end() 方法，使得结果集可以后退一步：
$('div').find('h3').html('Hello').end() //退回到选中所有的h3元素的那一步 .html('World'); //将它的内容改为World
5、jQuery 如何创建元素
常见的是直接把这个节点的结构，给通过 HTML 标记字符串描述出来
$("<div></div>")
创建为文本节点，与创建元素节点类似，可以直接把文本内容一并描述
$("<div>我是文本节点</div>")
创建为属性节点，与创建元素节点同样的方式
$("<div id='test' class='aaron'>我是文本节点</div>")
通过 jQuery 对上一节代码进行改造
$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
这就是 jQuery 创建节点的方式，但是动态创建的元素只是临时存放在内存中，最终需要放到页面文档并呈现出来，这里就涉及到一个位置关系，常见的就是把这个新创建的元素，当作页面某一个元素的子元素放到其内部，append() 与 appendTo() 。
6、jQuery 如何移动元素
jQuery 提供了两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。假定我们选中了一个 div 元素，需要把它移动到 p 元素后面：
第一种方法是使用 .insertAfter()，把 div 元素移动 p 元素后面：
$('div').insertAfter($('p'));
第二种方法是使用 .after()，把 p 元素加到 div 元素前面：
$('p').after($('div'));
表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回 div 元素，第二种方法返回 p 元素。你可以根据需要，选择到底使用哪一种方法。
使用这种模式的操作方法，一共有四对：
.insertAfter()和.after()：在现存元素的外部，从后面插入元素 .insertBefore()和.before()：在现存元素的外部，从前面插入元素 .appendTo()和.append()：在现存元素的内部，从后面插入元素 .prependTo()和.prepend()：在现存元素的内部，从前面插入元素
7、说点关于编程语言的个人观点 ~
可能大家也会有同感，在网上会看到或听到如：" ***是世界上最好的语言！" 这种的言论，可能是某些开发人员在长期使用***编程语言产生感情的缘故，其实我个人是不赞同的这种观点的，因为我觉的各种语言其实没什么好与不好的区别，只有是否更适用于哪个场景的区别。
比如 Java 更适合写服务端，JavaScript 虽然有很多问题，但是是前端最好的选择，python 的计算能力比较强大，一般应用在机器学习和深度学习领域。其实作为一个开发爱好者来说，我认为各种编程语言没有好与坏的区分，它们只是开发人员解决问题的工具，没有什么特殊性，就比如说铅笔和钢笔，你能说铅笔或者钢笔更好吗？很显然不能，因为它们只是使用场景不同。
编程语言也是一样的，它只是开发人员处理问题和解决问题的工具，不存在学习哪门语言更好的问题。
Programming is just a tool，it is nothing special，if you press it hard enough，you can write a novel，paint a beautiful portrait，build a plan for skyscraper。
