1.1 JS框架概述
框架（Framework）是整個或部分系統的可重用設計，表現爲一組抽象構件及構件實例間交互的方法。框架是完成某種功能的半成品，框架是將我們日常的繁瑣的代碼進行抽取，並提供出更加簡潔，功能更加強大的語法實現，我們可以對底層的API進行封裝，對外提供更加簡單的語法來實現最終的功能，從而提高開發效率。
1.2 JQuery框架介紹
1.2.1 JQuery概述
JQuery是一個優秀的JavaScript的輕量級框架之一，兼容CSS3和各大瀏覽器，提供了DOM、events、animate、ajax等簡易操作。並且jquery的插件非常豐富，大多數功能都有相應的插件解決方案。jquery的宗旨是write less do more。
JQuery插件，就是利用JQuery技術實現具有特定功能的JS效果。
1.2.2 JQuery的作用
JQuery最主要的是簡化JS的DOM樹的操作。
DOM樹：
在介紹 DOM 樹之前，首先要清楚，DOM 規範中，對於文檔的表示方法並沒有任何限制，因此，DOM 樹只是多種文檔結構中的一種較爲普遍的實現方式。
DOM 結構構成的基本要素是 “節點“，而文檔的結構就是由層次化的節點組成。在 DOM 模型中，節點的概念很寬泛，整個文檔 （Document） 就是一個節點，稱爲文檔節點。除此之外還有元素（Element）節點、屬性節點、Entity節點、註釋（Comment）節點等。
瞭解了 DOM 的結構是由各種的子節點組成的，那麼以 HTMLDocument 爲根節點，其餘節點爲子節點，組織成一個樹的數據結構的表示就是 DOM樹。
1.2.3 JQuery框架的下載與引入
Query的官方下載地址：http://www.jquery.com
JQuery的版本：
1.x：兼容IE678，使用最爲廣泛的，官方只做BUG維護，功能不再新增。因此一般項目來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG維護，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的瀏覽器。除非特殊要求，一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本
開發版本與生產版本，命名爲jQuery-x.x.x.js爲開發版本，命名爲jQuery-x.x.x.min.js爲生產版本，開發版本源碼格式良好，有代碼縮進和代碼註釋，方便開發人員查看源碼，但體積稍大。而生產版本沒有代碼縮進和註釋，且去掉了換行和空行，不方便發人員查看源碼，但體積很小。
在需要使用jQuery的html中使用js的引入方式進行引入，如下：
<script type="text/javascript" src="jquery-x.x.x.js></script>
1.2.4 JQuery對象與JS對象之間的轉換
JQuery與JS的區別：
a.加載事件不同，JS加載完成事件一個HTML頁面只能有一個，後面的會覆蓋前面的。JQ加載完成事件一個HTML頁面可以有多個。
b.對象也不同，JS對象與JQ對象不同，不能互相直接調用對方成員，需要互相轉換後才能調用。建議：將JS對象轉換爲JQ對象進行調用。
JQuery本質上雖然也是JS，但如果使用JQuery的屬性和方法那麼必須保證對象是JQuery對象而不是JS方式獲取的DOM對象。
使用JS方式獲取的對象是JS的DOM對象，使用JQuery方式獲取的對象是JQuery對象，兩者的轉換關係如下：
JS的DOM對象轉換爲JQuery對象語法：$(JS對象)
JQuery對象轉換爲JS對象語法：jQuery對象【索引】或者jQuery對象.get(索引)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery對象與JS對象之間的轉換</title>
<style type="text/css"></style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//js的加載完成事件
window.onload=function () {
alert("js加載完成事件1");
}
window.onload=function () {
alert("js加載完成事件2");
}
//Jquery加載完成事件
$(function () {
alert("Jquery加載事件1");
});
$(function () {
alert("Jquery加載事件2");
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery對象與JS對象之間的轉換</title>
<style type="text/css"></style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//獲取標籤對象彈出標籤體內容
//獲取js對象
var jsObj = document.getElementById("myDiv");
//使用js對象彈出標籤體內容
alert("使用js對象彈出標籤體內容"+jsObj.innerHTML);
//獲取jq對象，使用$f符號獲取的對象都是jq對象
var jqObj = $("#myDiv");
alert("使用jq對象彈出標籤體內容:"+jqObj.html());
//使用js對象轉換爲jq對象調用成員彈出標籤體內容
alert("使用js對象轉換爲jq對象調用成員彈出標籤體內容:"+$(jsObj).html());
//使用jq對象轉換爲js對象調用成員彈出標籤體內容
alert("使用jq對象轉換爲js對象調用成員彈出標籤體內容:"+jqObj[0].innerHTML);
});
</script>
</head>
<body>
<div id="myDiv">Hello World</div>
</body>
</html>