一. 什麼 jQuery？

jQuery 是 JavaScript 的一個框架，是對 JS 的一種封裝，使得 JS 使用方便，簡單易學

優點

1. 不用考慮相容性問題

2. jQuery 擁有強大的選擇器，簡化了 JS 程式碼

3. jQuery 封裝了很多系統函式，直接呼叫，非常方便

4. 完善的異常處理機制

5. 出色的瀏覽器相容性

6. 提高開發效率

二. 怎麼使用 jQuery？

1. 下載 jQuery 的核心 JS 放入專案中 jquery-1.xx.xx.js

2. 在頁面上使用 <script src="js/jquery-1.xx.xx.js"></script>

三. 初始化函式

• JS 初始化函式 window.onload = function() {}

• jQuery 初始化函式

  1. jQuery(function() {});

  2. $(function() {});

  3. jQuery().ready(function(){});

  4. $().ready(function(){});

注：

jQuery 與 $是全等
jQuery() 與 $()是jQuery的核心函式

四. window.onload 與 jQuery() 初始化的區別（☆）

• window.onload 頁面載入完網頁元素後被執行

• jQuery() 頁面讀完程式碼後被執行

五. 選擇器（☆）

• $("*") 萬用字元

• $("div") 標籤

• $(".divcla") 類

• $("#zwb") id

• $("#king > p") 子代

• $("table td") 後代

• $("div + p") 同層目錄第一個標籤

• $("div ~ p") 同層目錄所有標籤

• $("table td:first") 獲取第一個元素的偽類

• $("table td:last") 獲取最後一個元素的偽類

• $("table tr:odd") 奇數偽類

• $("table tr:even") 偶數偽類

• $("input[name=username]")

  屬性選擇

萬用字元 < 標籤 < 類 < ID

六. jQuery 屬性操作

1. attr 獲取標籤的屬性值或者給屬性賦值 <input type="checkbox"/> $("input").attr("checked")

2. prop 獲取標籤的屬性值或者給屬性賦值 <input type="checkbox"/> $("input").attr("checked")

3. addClass 給標籤加上類名 <div class="test"></div>

4. toggleClass 若標籤有該樣式，則移除掉；若沒有，則新增

5. HTML 功能與 innerHTML 功能一樣

6. text 獲取的是純文字內容

7. val 獲取“input輸入框”的值

七. 文件處理

1. append：A.append(B) 把B元素新增到A中的末尾處

2. appendTo：B.appendTo(A) 把B元素新增到A中的末尾處

3. remove 移除某一個元素

4. empty 清除某一個元素中的所有的內容

八. jQuery 效果

1. show() 顯示

2. hide() 隱藏

3. slideDown() 向下滑動

4. slideUp() 向上滑動

5. fadeIn() 淡入

6. fadeOut() 淡出

7. animate() 動畫效果

8. stop() 停止動畫效果

9. delay 延遲

九. jQuery 遍歷

each 迴圈

本文來自部落格園，作者：Schieber，轉載請註明原文連結：https://www.cnblogs.com/xiqingbo/p/front-end-10.html