jQuery知识框架

news2025/5/15 12:03:48

核心概念
- $ 或 jQuery：全局函数，用于选择元素或创建DOM对象。
- 链式调用：多数方法返回jQuery对象，支持连续操作。
- 文档就绪事件：
```
$(document).ready(function() { /* 代码 */ });
// 简写
$(function() { /* 代码 */ });
```
选择器
- 基础选择器：
  - $("#id")、$(".class")、$("tag")、$("*")（通配符）。
- 层级选择器：
  - $("parent > child")（子元素）、$("ancestor descendant")（后代）。
- 过滤选择器：
  - :first、:last、:even、:odd、:eq(index)、:not(selector)。
- 属性选择器：
  - $("[attr]")、$("[attr='value']")。
DOM 遍历
- 向上查找：parent()、parents()、closest(selector)。
- 同级查找：siblings()、next()、prev()、nextAll()。
- 向下查找：children()、find(selector)。

内容操作
- 获取/设置文本：text()、text("new text")。
- 获取/设置HTML：html()、html("<b>new html</b>")。
- 表单值：val()、val("new value")。
属性与CSS
- 属性操作：
  - attr("name")、attr("name", "value")。
  - removeAttr("name")。
- CSS操作：
  - css("property")、css("property", "value")。
  - 添加/移除类：addClass()、removeClass()、toggleClass()。
节点操作
- 创建元素：$("<div>New Element</div>")。
- 插入元素：
  - append()、prepend()（内部插入）。
  - after()、before()（外部插入）。
- 删除元素：remove()、empty()。

事件绑定
- 简写方法：click()、hover()、submit()。
- 通用方法：on("event", handler)（推荐统一使用）。
```
$("#btn").on("click", function() { alert("Clicked!"); });
```
- 事件解绑：off("event")。

事件委托

动态元素事件绑定：

$("#parent").on("click", ".child", function() { /* 逻辑 */ });

常用事件
- 鼠标事件：click、dblclick、mouseenter、mouseleave。
- 键盘事件：keypress、keyup、keydown。
- 表单事件：submit、change、focus、blur。

基础动画
- 显示/隐藏：show()、hide()、toggle()。
- 淡入淡出：fadeIn()、fadeOut()、fadeToggle()。
- 滑动效果：slideDown()、slideUp()、slideToggle()。
自定义动画
- animate() 方法：
```
$("#box").animate({ 
  opacity: 0.5, 
  left: "+=50px" 
}, 1000);
```
- 停止动画：stop()、delay()。

AJAX 请求
- $.ajax()（底层方法）：
```
$.ajax({
  url: "api/data",
  method: "GET",
  success: function(data) { console.log(data); }
});
```
- 简写方法：
  - $.get(url, callback)、$.post(url, data, callback)。
  - $.getJSON(url, callback)。
工具函数
- 数组/对象操作：
  - $.each(array, function(index, value) {})。
  - $.extend()（合并对象）。
- 类型判断：
  - $.isArray()、$.isFunction()。

使用插件
- 引入jQuery插件（如 jQuery UI、DataTables）：
```
<script src="jquery.plugin.js"></script>
```

编写插件

扩展jQuery方法：

(function($) {
  $.fn.myPlugin = function(options) {
    // 插件逻辑
  };
})(jQuery);

选择器优化
- 缓存jQuery对象：var $el = $("#element");。
- 避免过度嵌套选择器（如 $("div ul li a")）。
事件优化
- 使用事件委托代替重复绑定。
- 移除无用事件监听（off()）。

链式调用

减少DOM查询次数：

$("#box").css("color", "red").slideDown().fadeIn();

jQuery 与原生JS
- 对比示例：
  - $("#id") → document.getElementById("id")。
  - $.ajax → fetch API。
现代替代方案
- 原生JS + querySelector。
- 前端框架（React/Vue）的组件化开发。