正值angular.js、vue.js、react.js等框架盛行的时代，不再需要开发者自己操作DOM了，所以不得不承认jQuery已经在慢慢过时了。
但是jQuery中的开发思想还是很经典，现在它更多的是作为前端的技术基础而存在。
文章目录
一. 初识jQuery
1.1 简介
jQuery简写jq，Query是查询的意思，jQuery顾名思义就是一个让JavaScript更加方便的查询和控制页面控件的库。
很多人把jQuery定位为一个JavaScript框架，这是不严谨的。框架是解决方案的轮子，而jQuery的本质是js文件，是对原生js进行浓缩和优化后，进一步封装成的超集（库）。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。 它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
1.2 诸多优点
jQuery凭借其优秀的设计思想和简洁实用的语法流行多年，还是有诸多优点的：
- 对JavaScript语言增强的同时，大大简化了代码的编写工作；
jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。还有一点是对js事件处理的增强：
jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题！ - 快速获取文档元素；
jQuery的选择机制构建于css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。 - 提供漂亮的页面动态效果；
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。
1.3 不足之处
- 需要引入第三方jQuery文件，且jQuery各个版本之间存在用法冲突；
- 极度依赖DOM节点，全DOM操作，维护难度较大；
- 体量臃肿，有很多功能不实用；
1.4 导入方式
- 引入在线资源：
我比较倾向于使用CDN服务，链接附上：bootCDN-jQuery地址
当然我给大家摘出了jquery-3.5.1的min版本链接，直接复制放到你的HTML文档的head标签里即可。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- 引入本地文件：
要是网络不佳，也可以把jQuery库文件下载到本地：
点击复制链接按钮，然后浏览器打开该地址，全选复制代码，粘贴到本地空js文件，再src导入即可。
<script src='文件路径'></script>
// 例如：
<script src="./jquery-3.5.1.min.js"></script>
❀ 拓展一点 ❀
jquery.js和jquery.min.js有什么区别 ？ 什么时候用哪个 ？
我们分别打开这两个文件链接，左边是jquery.js正常版，右边是jquery.min.js的压缩版，可以明显看出来正产版的文件代码更容易阅读一些，喜欢研究源码的大佬可以下载来看看；
右边的压缩版才是我们实际开发中需要导入的，相对来说压缩版文件体积更小，加载速度更快。
1.5 入口函数
由于我们需要在整个HTML文档都加载完成之后再加载js代码，所以我们可以有以下四种实现方式：
- jQuery中的常规写法：
$(document).ready()
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
// js代码块
};
</script>
</head>
</html>
- 上述方法还可以简写为：
$()
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jquery-3.5.1.min.js"></script>
<script>
$(function(){
// js代码块
});
</script>
</head>
<body>
// html代码块
</body>
</html>
- 也可以使用原生js的入口函数：
window.onload()
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jquery-3.5.1.min.js"></script>
<script>
window.onload = function(){
// js代码块
};
</script>
</head>
<body>
// html代码块
</body>
</html>
- body标签末尾
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jquery-3.5.1.min.js"></script>
</head>
<body>
// html代码块
<script>
// js代码块
</script>
</body>
</html>
❀ 拓展一点 ❀
原生js的入口函数：window.onload()和 jQuery中封装的：$(document).ready()有什么区别？
| window.onload() | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等待网页中的所有内容加载完毕后(包括图片)才能执行 | 整个网页的dom树绘制完成之后就会执行，可能dom元素相关联的资源并没有加载完成 |
| 定义次数 | 只能定义一次，多次定义将会覆盖之前 | 可定义多次 |
| 简写形式 | 无 | $() |
从这里也可以看出，jQuery是原生js的升级版，大大简化了我们的js代码编写。
1.6 jQuery版hello world
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./jquery-3.5.1.min.js"></script>
<script>
$(function(){
console.log("hello world");
});
</script>
</head>
</html>
二. jQuery函数
jQuery库只提供了一个叫jQuery的函数$( )，该函数以及该函数的原型中定义了大量的方法 ，方便jQuery对象和jQuery函数调用。jQuery函数可以接受以下四种参数：
2.1 DOM对象
jQuery函数将会把该DOM对象封装成一个jQuery对象并返回。
<div id='app'>hello jQuery!</div>
$(function(){
console.log($(document.querySelector('#app')));
})
2.2 HTML代码片段
jQuery函数会根据传入的文本创建好HTML元素并封装成jQuery对象返回。比如：
$("<div class='one'>one<div>");
2.3 匿名函数
前边讲入口函数的提过，当文档结构加载完毕之后jQuery函数调用匿名函数。
$(function(){
});
2.4 选择器
jQuery函数通过该选择器获取对应的DOM，然后将这些DOM对象封装到一个jQuery对象中并返回。请看下一章节jQuery对象的示例。
详细的jQuery选择器介绍有后续更新。
三. jQuery对象
<div id='app'>hello jQuery!</div>
$(function(){
console.log($('#app'));
})
jQuery对象是一个类数组对象，其中的元素就是DOM对象（Element元素）。可以调用jQuery函数及原型实例方法。
3.1 jQuery对象转化成DOM对象
3.1.1 $(selector)[index]
既然jQuery对象是一个类数组对象，那么我们直接拿到它的第一个元素，就可以达到把jQuery对象转化成DOM对象的目的。 仍然来看刚才的例子：
<div id='app'>hello jQuery!</div>
$(function(){
console.log($('#app'));
console.log($('#app')[0]);
// 对比于js原生dom操作
console.log(document.querySelector('#app'));
console.log($('#app')[0] === document.querySelector('#app'));
})
3.1.2 $(selector).get(index)
我们还可以使用jQuery中的get方法，它的作用和直接中括号选择效果一致：
<div id='app'>hello jQuery!</div>
$(function(){
console.log($('#app'));
console.log($('#app').get(0));
})
