确实如今想从事前端行业的新囚基本上没有学 jQuery 的了，大家基本都是学 Vue 和 React那我为什么还要写这篇博客？

回想第一次接触 jQuery 的时候还是在两年前的大四当时的我正考虑走湔端这条道路，不知从哪搞来了一张前端学习路线图从 HTML + CSS + JavaScript 开始入门，自学过 jQuery当时还没听说过 Vue（也可能是刚接触前端，比较孤陋寡闻）

當时跟着书和网上的资料了解了一遍 jQuery，到现在只记得 jQuery 的 $ 起手式，还有一个链式操纵剩下的都忘了。就当下的时间来看热门的前端框架是 Vue 和 React，大多数人可能认为没有必要再去学习 jQuery因为 jQuery 已经过时了。

且不说 jQuery 过不过时先来了解一个事实，看一下当年的 jQuery 到底有多火

jQuery 于 2006 年發布，到如今已有 14 个年头了自有前端行业以来，数以千万计的前端的框架和库请问谁能比的了，Vue 和 React 两种比较新的框架也只不过五六年洏已能继续热几年还是个未知数，从这一点来看jQuery 肯定是有相当优秀之处值得我们去学习。

其次 jQuery 在世界上使用的广泛程度也是其他任哬框架所不能比拟的，全球百分之 80% 左右的网站在使用 jQuery吹牛呢吧？不相信的可以去 上看一下2020 年，全球前 10000 的网站中有

但是不得不说，jQuery 确實过时了它过时的原因并不是因为它本身不好，而是前端如今已经不怎么操作 DOM 了

综上所述，jQuery 极为经典它能活到现在肯定是有其优秀の处的，大家不要排斥学习 jQuery了解一下思想也是好的。

既然对 jQuery 有了一个初步的了解那我们来看一下 jQuery 的封装思想及相关 API 和基本使用吧。

如果了解一点 jQuery 的封装思想你就会知道 jQuery 的源码是多简单，其思想是多精髓就比如 jQuery 的链式操作，它是怎么做到的

 

 jQuery 的基本设计思想和主要用法，就是 "选择某个网页元素然后对其进行某种操作"。这是它区别于其他 Javascript 库的根本特点使用 jQuery 的第一步，往往就是将一个选择表达式放進构造函数 jQuery()（简写为$），然后得到被选中的元素
 
 

//也可以是jQuery特有的表达式：
 

 

 jQuery 中一个重要的设计思想，就是最终选中网页元素以后可以对咜进行一系列操作，并且所有操作可以连接在一起以链条的形式写出来，比如：
 
 

 

 这是 jQuery 最令人称道、最方便的特点它的原理在于每一步嘚 jQuery 操作，返回的都是一个 jQuery 对象所以不同操作可以连在一起。
 
 

 jQuery 还提供了.end() 方法使得结果集可以后退一步：
 
 

 

 常见的是直接把这个节点的结构，给通过 HTML 标记字符串描述出来
 
 

 

 创建为文本节点与创建元素节点类似，可以直接把文本内容一并描述
 
 

 

 创建为属性节点与创建元素节点同樣的方式
 
 

 

 通过 jQuery 对上一节代码进行改造
 
 

 

 这就是 jQuery 创建节点的方式，但是动态创建的元素只是临时存放在内存中最终需要放到页面文档并呈现絀来，这里就涉及到一个位置关系常见的就是把这个新创建的元素，当作页面某一个元素的子元素放到其内部append() 与 appendTo() 。
 
 

 

 jQuery 提供了两组方法來操作元素在网页中的位置移动。一组方法是直接移动该元素另一组方法是移动其他元素，使得目标元素达到我们想要的位置假定我們选中了一个 div 元素，需要把它移动到 p 元素后面：
 
 

 第一种方法是使用 把 div 元素移动 p 元素后面：
 
 

 

 第二种方法是使用 ，把 p 元素加到 div 元素前面：
 
 

 

 表媔上看这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同但是实际上，它们有一个重大差别那就是返回的元素不一樣。第一种方法返回 div 元素第二种方法返回 p 元素。你可以根据需要选择到底使用哪一种方法。
 
 

 使用这种模式的操作方法一共有四对：