如何更快的學習JQuery基礎-有解無憂

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/236091.html

標籤：其他

上一篇：前端學習（2734）：重讀vue電商網站44之使用 echarts

下一篇：js中關于call的原始碼決議