jQuery知识框架

一、jQuery 基础

1. 核心概念

   • $ 或 jQuery：全局函数，用于选择元素或创建DOM对象。

   • 链式调用：多数方法返回jQuery对象，支持连续操作。

   • 文档就绪事件：

     $(document).ready(function() { /* 代码 */ });
     // 简写
     $(function() { /* 代码 */ });

2. 选择器

   • 基础选择器：

     • $("#id")、$(".class")、$("tag")、$("*")（通配符）。

   • 层级选择器：

     • $("parent > child")（子元素）、$("ancestor descendant")（后代）。

   • 过滤选择器：

     • :first、:last、:even、:odd、:eq(index)、:not(selector)。

   • 属性选择器：

     • $("[attr]")、$("[attr='value']")。

3. DOM 遍历

   • 向上查找：parent()、parents()、closest(selector)。

   • 同级查找：siblings()、next()、prev()、nextAll()。

   • 向下查找：children()、find(selector)。

---

二、DOM 操作

1. 内容操作

   • 获取/设置文本：text()、text("new text")。

   • 获取/设置HTML：html()、html("<b>new html</b>")。

   • 表单值：val()、val("new value")。

2. 属性与CSS

   • 属性操作：

     • attr("name")、attr("name", "value")。

     • removeAttr("name")。

   • CSS操作：

     • css("property")、css("property", "value")。

     • 添加/移除类：addClass()、removeClass()、toggleClass()。

3. 节点操作

   • 创建元素：$("<div>New Element</div>")。

   • 插入元素：

     • append()、prepend()（内部插入）。

     • after()、before()（外部插入）。

   • 删除元素：remove()、empty()。

---

三、事件处理

1. 事件绑定

   • 简写方法：click()、hover()、submit()。

   • 通用方法：on("event", handler)（推荐统一使用）。

     $("#btn").on("click", function() { alert("Clicked!"); });

   • 事件解绑：off("event")。

2. 事件委托

   • 动态元素事件绑定：

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

3. 常用事件

   • 鼠标事件：click、dblclick、mouseenter、mouseleave。

   • 键盘事件：keypress、keyup、keydown。

   • 表单事件：submit、change、focus、blur。

---

四、动画与效果

1. 基础动画

   • 显示/隐藏：show()、hide()、toggle()。

   • 淡入淡出：fadeIn()、fadeOut()、fadeToggle()。

   • 滑动效果：slideDown()、slideUp()、slideToggle()。

2. 自定义动画

   • animate() 方法：

     $("#box").animate({ opacity: 0.5, left: "+=50px" 
     }, 1000);

   • 停止动画：stop()、delay()。

---

五、AJAX 与工具方法

1. AJAX 请求

   • $.ajax()（底层方法）：

     $.ajax({url: "api/data",method: "GET",success: function(data) { console.log(data); }
     });

   • 简写方法：

     • $.get(url, callback)、$.post(url, data, callback)。

     • $.getJSON(url, callback)。

2. 工具函数

   • 数组/对象操作：

     • $.each(array, function(index, value) {})。

     • $.extend()（合并对象）。

   • 类型判断：

     • $.isArray()、$.isFunction()。

---

六、插件与扩展

1. 使用插件

   • 引入jQuery插件（如 jQuery UI、DataTables）：

     <script src="jquery.plugin.js"></script>

2. 编写插件

   • 扩展jQuery方法：

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

---

七、性能优化

1. 选择器优化

   • 缓存jQuery对象：var $el = $("#element");。

   • 避免过度嵌套选择器（如 $("div ul li a")）。

2. 事件优化

   • 使用事件委托代替重复绑定。

   • 移除无用事件监听（off()）。

3. 链式调用

   • 减少DOM查询次数：

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

---

八、兼容性与现代替代

1. jQuery 与原生JS

   • 对比示例：

     • $("#id") → document.getElementById("id")。

     • $.ajax → fetch API。

2. 现代替代方案

   • 原生JS + querySelector。

   • 前端框架（React/Vue）的组件化开发。

---

学习建议

1. 快速上手：从DOM操作和事件处理开始实践。

2. 官方文档：jQuery API。

3. 逐步过渡：理解jQuery原理后，转向现代JS或框架。

jQuery的核心优势是简化DOM操作和跨浏览器兼容性，适合快速开发传统Web应用，但在现代开发中可结合需求选择是否使用。