jQuery 知识点复习总览

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 仍然是快速开发小型项目或需要广泛浏览器支持的项目的优秀选择。