https://www.cnblogs.com/sandraryan/
前端代码优化：无效循环越少越好，DOM节点操作越少越好，HTTP请求越少越好
jq是一个js库。（不是框架）
JQ优点
1. 方便的DOM操作系统，降低了DOM代码操作量，提高了DOM操作代码的可维护性。
2. 优化了对DOM节点的操作（开发中对DOM操作越少越好，程序员无法完全写出特别优秀的代码，可以借助JQ）。
引入方法
1. CDN
https://www.bootcdn.cn/jquery/
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
2. 下载并放入项目文件，并用js引入（取决于自己的路径）
<script src="jq/jquery.js"></script>
jq有Production version（压缩后，代码无可读性，用于项目）和Development version（用于开发和学习）
代码基于jq的话，jq的引入要在自己的js代码之前
使用方法
$();
//查找 操作元素（DOM节点）
是一个函数，也是一个对象。
举个栗子
<button class="btn">button</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
//获取button，注册点击事件，点击button时，控制台打印‘this is a btn’
$('.btn').click(function(){
console.log('this is a btn');
});
</script>
再举个错误的栗子：
var btn = document.querySelector('.btn'); btn.click(function(){ console.log('this is a btn'); });
👆 不可以
jq所有的DOM操作方式只能由jq获得到的节点对象使用，js原生节点对象不能调用jq提供的DOM操作方式。
jq获取的是一个对象，可以用下标获取原生对象。
$(); 的返回值是个jq封装的对象，也是一个集合。里面包含了满足选择器规则的所有元素列表，是个集合。如果要用$()函数拿到js原生节点对象，使用[0]（中括号下标）的方式获取。
举个栗子。。
var el = $('.btn'); //jq对象 console.log(el); console.log(el[0]); //js对象
浏览器输出：
jQuery(document).ready(function(){ }) // jQuery对象可以简写成$ $(document).ready(function(){ }) // 还可以简写成 $(function(){});
完结撒花 ❀