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(){});
完結撒花 ❀