jQuery 知识点复习总览

文章目录

[jQuery 知识点复习总览](#jQuery 知识点复习总览)
- [一、jQuery 基础](#一、jQuery 基础)
- - [1. jQuery 简介](#1. jQuery 简介)
  - [2. jQuery 引入](#2. jQuery 引入)
  - [3. jQuery 核心函数](#3. jQuery 核心函数)
- 二、选择器
- - [1. 基本选择器](#1. 基本选择器)
  - [2. 层级选择器](#2. 层级选择器)
  - [3. 过滤选择器](#3. 过滤选择器)
  - [4. 表单选择器](#4. 表单选择器)
- [三、DOM 操作](#三、DOM 操作)
- - [1. 内容操作](#1. 内容操作)
  - [2. 属性操作](#2. 属性操作)
  - [3. CSS 操作](#3. CSS 操作)
  - [4. 元素操作](#4. 元素操作)
- 四、事件处理
- - [1. 事件绑定](#1. 事件绑定)
  - [2. 事件对象](#2. 事件对象)
  - [3. 自定义事件](#3. 自定义事件)
- 五、效果与动画
- - [1. 基本效果](#1. 基本效果)
  - [2. 自定义动画](#2. 自定义动画)
  - [3. 动画控制](#3. 动画控制)
- 六、Ajax
- - [1. 基本方法](#1. 基本方法)
  - [2. Ajax 设置](#2. Ajax 设置)
  - [3. 全局 Ajax 事件](#3. 全局 Ajax 事件)
- 七、工具方法
- - [1. 数组和对象操作](#1. 数组和对象操作)
  - [2. 其他工具方法](#2. 其他工具方法)
- 八、插件开发
- - [1. 基本模式](#1. 基本模式)
  - [2. 最佳实践](#2. 最佳实践)
- 九、性能优化
- - [1. 选择器优化](#1. 选择器优化)
  - [2. DOM 操作优化](#2. DOM 操作优化)
  - [3. 事件优化](#3. 事件优化)
- 十、常见问题
- - [1. ` $(this)\` 与 \`this\`](#1. `$ (this)` 与 `this`)
  - [2. 链式调用中断](#2. 链式调用中断)
  - [3. 版本兼容](#3. 版本兼容)
- 十一、现代替代方案

jQuery 知识点复习总览

一、jQuery 基础

1. jQuery 简介

轻量级 JavaScript 库
简化 DOM 操作、事件处理、动画和 Ajax
链式调用语法
跨浏览器兼容

2. jQuery 引入

html 复制代码

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

3. jQuery 核心函数

jQuery() 或 $()：选择元素或创建 DOM 元素
$(document).ready()：DOM 加载完成后执行

javascript 复制代码

$(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()：自定义动画

javascript 复制代码

$("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. 基本模式

javascript 复制代码

(function($) {
  $.fn.pluginName = function(options) {
    // 默认设置
    const settings = $.extend({
      // 默认参数
    }, options);
    
    // 插件逻辑
    return this.each(function() {
      // 对每个元素执行操作
    });
  };
})(jQuery);

2. 最佳实践

保持链式调用
提供默认设置
允许方法调用
命名空间化事件
数据缓存

九、性能优化

1. 选择器优化

尽量使用 ID 选择器
给选择器提供上下文
缓存 jQuery 对象

javascript 复制代码

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

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

2. DOM 操作优化

批量操作 DOM
使用文档片段
分离 DOM 操作和计算

3. 事件优化

使用事件委托

javascript 复制代码

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

jQuery 知识点复习总览

文章目录

jQuery 知识点复习总览

一、jQuery 基础

1. jQuery 简介

2. jQuery 引入

3. jQuery 核心函数

二、选择器

1. 基本选择器

2. 层级选择器

3. 过滤选择器

4. 表单选择器

三、DOM 操作

1. 内容操作

2. 属性操作

3. CSS 操作

4. 元素操作

四、事件处理

1. 事件绑定

2. 事件对象

3. 自定义事件

五、效果与动画

1. 基本效果

2. 自定义动画

3. 动画控制

六、Ajax

1. 基本方法

2. Ajax 设置

3. 全局 Ajax 事件

七、工具方法

1. 数组和对象操作

2. 其他工具方法

八、插件开发

1. 基本模式

2. 最佳实践

九、性能优化

1. 选择器优化

2. DOM 操作优化

3. 事件优化

十、常见问题

1. $(this) 与 this

2. 链式调用中断

3. 版本兼容

十一、现代替代方案

1. `$(this)` 与 `this`