jQuery 知識點復習總覽

一、jQuery 基礎

1. jQuery 簡介

• 輕量級 JavaScript 庫
• 簡化 DOM 操作、事件處理、動畫和 Ajax
• 鏈式調用語法
• 跨瀏覽器兼容

2. jQuery 引入

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

3. jQuery 核心函數

• jQuery() 或 $()：選擇元素或創建 DOM 元素
• $(document).ready()：DOM 加載完成后執行

$(document).ready(function() {// 代碼
});// 簡寫
$(function() {// 代碼
});

二、選擇器

1. 基本選擇器

• $("#id")：ID 選擇器
• $(".class")：類選擇器
• $("element")：標簽選擇器
• $("*")：所有元素
• $("selector1, selector2")：多選擇器組合

2. 層級選擇器

• $("parent > child")：子元素選擇器
• $("ancestor descendant")：后代選擇器
• $("prev + next")：相鄰兄弟選擇器
• $("prev ~ siblings")：后續兄弟選擇器

3. 過濾選擇器

• :first / :last
• :even / :odd
• :eq(index) / :gt(index) / :lt(index)
• :not(selector)
• :contains(text)
• :has(selector)
• :hidden / :visible

4. 表單選擇器

• :input
• :text / :password
• :radio / :checkbox
• :submit / :button
• :enabled / :disabled
• :checked / :selected

三、DOM 操作

1. 內容操作

• .html()：獲取/設置 HTML 內容
• .text()：獲取/設置文本內容
• .val()：獲取/設置表單元素值

2. 屬性操作

• .attr()：獲取/設置屬性
• .removeAttr()：移除屬性
• .prop()：獲取/設置 DOM 屬性
• .removeProp()：移除 DOM 屬性
• .data()：數據存儲

3. CSS 操作

• .css()：獲取/設置樣式
• .addClass() / .removeClass()
• .toggleClass()
• .hasClass()
• .width() / .height()
• .innerWidth() / .innerHeight()
• .outerWidth() / .outerHeight()

4. 元素操作

• .append() / .appendTo()
• .prepend() / .prependTo()
• .after() / .insertAfter()
• .before() / .insertBefore()
• .wrap() / .unwrap()
• .wrapAll() / .wrapInner()
• .replaceWith() / .replaceAll()
• .empty() / .remove() / .detach()
• .clone()

四、事件處理

1. 事件綁定

• .on()：標準事件綁定
• .off()：移除事件
• .one()：一次性事件
• 快捷方法：
  • .click() / .dblclick()
  • .mouseenter() / .mouseleave()
  • .hover()
  • .focus() / .blur()
  • .keydown() / .keyup()
  • .submit() / .change()

2. 事件對象

• event.target：觸發事件的元素
• event.currentTarget：綁定事件的元素
• event.preventDefault()：阻止默認行為
• event.stopPropagation()：阻止事件冒泡
• event.type：事件類型
• event.which：鍵盤/鼠標按鍵

3. 自定義事件

• .trigger()：觸發事件
• .triggerHandler()：觸發事件但不冒泡

五、效果與動畫

1. 基本效果

• .show() / .hide() / .toggle()
• .fadeIn() / .fadeOut() / .fadeToggle()
• .fadeTo()：漸變到指定透明度
• .slideDown() / .slideUp() / .slideToggle()

2. 自定義動畫

• .animate()：自定義動畫

$("div").animate({left: "250px",opacity: "0.5",height: "toggle"
}, 1000);

3. 動畫控制

• .stop()：停止當前動畫
• .delay()：延遲執行
• .finish()：完成所有動畫

六、Ajax

1. 基本方法

• $.ajax()：底層接口
• $.get()：GET 請求
• $.post()：POST 請求
• $.getJSON()：獲取 JSON 數據
• $.getScript()：加載并執行 JS 文件

2. Ajax 設置

• url：請求地址
• type：請求方法
• data：發送數據
• dataType：預期返回類型
• success：成功回調
• error：失敗回調
• complete：完成回調
• beforeSend：發送前回調
• timeout：超時設置

3. 全局 Ajax 事件

• .ajaxStart()：Ajax 請求開始時
• .ajaxStop()：Ajax 請求結束時
• .ajaxComplete()：每個 Ajax 請求完成時
• .ajaxError()：Ajax 請求失敗時
• .ajaxSuccess()：Ajax 請求成功時

七、工具方法

1. 數組和對象操作

• $.each()：遍歷數組或對象
• $.map()：映射數組
• $.grep()：過濾數組
• $.inArray()：查找值在數組中的位置
• $.merge()：合并數組
• $.unique() / $.uniqueSort()：去除重復元素
• $.extend()：合并對象

2. 其他工具方法

• $.trim()：去除字符串兩端空格
• $.isArray() / $.isFunction()
• $.isNumeric() / $.isEmptyObject()
• $.type()：檢測數據類型
• $.parseJSON()：解析 JSON 字符串
• $.parseHTML()：解析 HTML 字符串
• $.now()：當前時間戳

八、插件開發

1. 基本模式

(function($) {$.fn.pluginName = function(options) {// 默認設置const settings = $.extend({// 默認參數}, options);// 插件邏輯return this.each(function() {// 對每個元素執行操作});};
})(jQuery);

2. 最佳實踐

• 保持鏈式調用
• 提供默認設置
• 允許方法調用
• 命名空間化事件
• 數據緩存

九、性能優化

1. 選擇器優化

• 盡量使用 ID 選擇器
• 給選擇器提供上下文
• 緩存 jQuery 對象

// 不好
$(".item").css("color", "red");
$(".item").html("Hello");// 好
const $items = $(".item");
$items.css("color", "red");
$items.html("Hello");

2. DOM 操作優化

• 批量操作 DOM
• 使用文檔片段
• 分離 DOM 操作和計算

3. 事件優化

• 使用事件委托

// 不好
$("li").on("click", function() {});// 好
$("ul").on("click", "li", function() {});

十、常見問題

1. $(this) 與 this

• this 是原生 DOM 元素
• $(this) 是 jQuery 對象

2. 鏈式調用中斷

• 某些方法返回非 jQuery 對象（如 .text() 獲取值時）

3. 版本兼容

• 1.x：支持 IE6-8
• 2.x：不支持 IE6-8
• 3.x：不支持 IE6-8，更精簡

十一、現代替代方案

雖然 jQuery 仍然有用，但現代開發中可以考慮：

• 原生 JavaScript（ES6+）
• Vue/React/Angular 等框架
• Axios 等專門的 Ajax 庫
• Lodash 等工具庫

jQuery 仍然是快速開發小型項目或需要廣泛瀏覽器支持的項目的優秀選擇。