JQurey的基本使用

使用jquery, 必須先引入jq庫

"jquery-3.4.1.min.js"

>
<
/script>

var a =

10;

var $a =10;

// $ 宣告該變數是jq變數  同時$也是jquery的簡寫

轉換為jq變數

var odiv = document.

getelementsbyclassname
("box")[
0];var $b =
$(odiv)
;   console.
log($b)
;

var $c = $b[0]

;    console.
log($c)
;

注意： jquery中的 $ 和 jquery關鍵字 本身同為乙個物件

js中的入口函式： window.onload

jq中的入口函式： $(document).ready(function());

onload和 ready的區別：

文件的載入步驟：

1. 解析html結構

2. 載入外部的樣式表和指令碼

3. 解析並執行指令碼

4. 構建html–dom模型 (ready方法執行)

5. 載入等外部資源

6. 頁面載入完畢 (load方法執行)

$

(document)
.ready
(function()
);

ready的簡寫：

$(function()
);

因為jq是輕量級別的框架，大小不大30kb

它有強大的選擇器，出色的dom操作封裝

有可靠的事件處理機制

完善的ajax

出色的瀏覽器相容性

持鏈式操作，隱式迭代

行為層(功能)和結構層(頁面元素) 的分離，還支援豐富的外掛程式

jqurey的動畫效果

目標.hide 讓目標隱藏 修改的display屬性 小括號中，可是設定動畫執行的時間 目標.show 讓目標顯示 小括號中，可以設定動畫執行的時間 var flag 1 btn first click function else 目標.toggle 會先進行目標的屬性，如果是顯示，就設定為隱藏 如...

jqurey的事件委託

1.什麼是事件委託？事件委託是利用事件冒泡來實現，只指定乙個事件處理程式 來管理某一型別的所有事件。2.為什麼要用事件委託 1 在js中新增到頁面的事件處理程式的個數直接關係到頁面的整體載入速度 因為每個事件處理程式都是乙個物件，物件會占用記憶體。物件越多需要載入的記憶體就越多 2 有很多個資料的 ...

jQurey動畫的區別

1.對比fadein 與show slidedown 的區別 show duration 和.hide duration 是長度 寬度 透明度三個屬性一起變化 fadein fodeout是設定好了盒子的尺寸，變化透明度 所以使用者看到頁面會跳一下 slidedown slideup 僅改變元素的高...