JQuery
JQuery是一個JavaScript框架，可以簡化js的開發。
JQuery封裝了JavaScript常用的功能代碼，優化了HTML文檔操作、事件處理、動畫設計。
框架是什么？
通用的代碼，抽取出來，封裝為獨立的文件。需要使用的使用引入一下這個文件，使用它提供的功能即可。
示例：抽取出demo.js
function $(id) {// $是個可以用作函數名的字符，JQuery喜歡用這個字符
let e = document.getElementById(id);
return e;
}
調用：
引入js文件，即可使用$(id)函數。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div_1"></div>
<script src="js/demo.js"></script>
<script>
$("div_1").innerText = "模擬JQuery獲取元素";
</script>
</body>
</html>
版本
http://www.jq22.com/jquery-info122
(注！jquery-2.0以上版本不再支持IE 6/7/8) 並不是最新的版本就最好的，而是根據您項目需求所適合的版本！
一般的項目使用1.x版本
2.x版本很少人使用
3.x版本只支持最新的瀏覽器，很多老JQuery插件不支持。除非特殊需求，一般不使用3.x
jquer-xxx.js是開發版本
jquer-xxx.min.js是生產版本（去掉了換行，文件更小，但嚴重影響閱讀）
JQuery對象和JavaScript對象的區別
通過如下代碼查看JQ對象和JS對象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div></div>
<div></div>
<script>
// JS
var divs = document.getElementsByTagName("div");
console.log("JS:" + divs);
// JQ
var jq_divs = $("div");
console.log("JQ:" + jq_divs);
jq_divs.text("JQ對象操作更方便");
// JS對象→JQ對象(加$)
var jq_js2jq = $(divs);
console.log(jq_js2jq);
jq_js2jq.text("JS對象轉JQ對象");
</script>
</body>
</html>
"JS:[object HTMLCollection]"
"JQ:[object Object]"
"[object Object]"
結論：JQuery對象對JS對象進行了包裝。
JQ的ready() VS 和JS的onload()
ready() :后發而先至。
- window.onload在頁面全部加載完畢（包括圖片下載）后才能執行；
- $(document).ready在頁面框架下載完畢后就執行；
- $是JQuery的簡寫形式。
<head>
<meta charset="utf-8" />
<title>ready() VS onload()
</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
window.onload = function() {
console.log("onload");
}
//----------------------------------
$(document).ready(function() {
console.log("$(document).ready");
});
$(function() {
console.log("$()");
});
jQuery(function() {
console.log("jQuery");
});
</script>
</head>