本文共 2558 字，大约阅读时间需要 8 分钟。

目录

• 什么是jQuery
• 为什么用jQuery
• 如何用jQuery
  • 引入 jQuery
  • js 库文件
  • 版本选择
• jQuery 的两把利器
  • 核心函数
  • jQuery 函数使用
• 选择器
  • 简介
  • 分类
  • 基本选择器
  • 层次选择器
  • 过滤选择器
  • 表单选择器
• 工具方法
  • $.each()
  • $.trim()
  • 其他工具方法
• 属性操作
  • attr() 和 prop()
  • 样式操作
• CSS 模块
  • 样式获取与设置
  • 元素位置
  • 元素尺寸
• 文档处理（CUD）
  • 插入操作
  • 删除操作
  • 更新操作
• 事件模块
  • 事件绑定
  • 事件优缺点
  • 常用事件
  • 事件委托
  • 事件坐标
• 定时调用
  • setInterval()
  • setTimeout()
• 类操作
  • 通过 class 修改样式

什么是 jQuery

jQuery 是一个功能强大的 JavaScript 库，专注于简化 DOM 操作和 AJAX 编程。它通过选择器语法快速查找 DOM 元素，支持事件处理、链式调用和读写合一等特性，适合中大型 Web 项目开发。

为什么用 jQuery

jQuery 提供了许多实用功能：

• 强大选择器：支持 CSS 选择器语法，方便快速查找 DOM 元素。
• 隐式遍历：一次操作多个元素。
• 读写合一：通过单一函数完成读数据和写数据操作。
• 事件处理：简化事件绑定和处理。
• 链式调用：允许代码更加简洁。
• DOM 操作：支持 CRUD 操作，简化 AJAX 通讯。

如何用 jQuery

引入 jQuery

js 库文件

• 开发版：包含更多调试信息，文件体积较大。
• 生产版：压缩版，运行速度更快。

版本选择

• 1.x 版本：支持 IE8 及以上版本，文件较大。
• 2.x 版本：部分 IE8 及以下版本不支持，文件小，执行效率高。
• 3.x 版本：完全不支持 IE8 及以下版本，提供新功能，移除某些旧功能。

jQuery 的两把利器

核心函数

• jQuery 是一个函数库，主要通过 $ 符号使用。
• $(selector) 用于通过选择器查找 DOM 元素。

jQuery 函数使用

• 作为一般函数调用：$(function() { ... })，用于在 DOM 加载完成后执行回调。
• 作为选择器调用：$(selector) 查找匹配的 DOM 元素。
• 作为 DOM 对象调用：$(domElement) 将 DOM 对象封装为 jQuery 对象。
• 作为 HTML 标签字符串调用：$('<div></div>') 创建新标签对象。

选择器

简介

选择器本身只是一个字符串，基于 CSS 选择器语法，用于查找 DOM 元素。只有通过 jQuery 的 $() 函数才能起作用。

分类

• 基本选择器：如 #id、element 和 .class。
• 层次选择器：如 ul > span（子元素）、.box + li（兄弟元素）。
• 过滤选择器：如 li:contains("bbb")。
• 表单选择器：如 :text:disabled（不可用文本框）。

基本选择器示例

• 选择 id 为 div1 的元素：$('div1').css('background', 'red')。
• 选择所有 div 元素：$('div').css('background', 'red')。
• 选择 class 为 box 的 div 元素：$.box().css('background', 'red')。

层次选择器示例

• 选择父元素下的所有 span：$('ul span').css('background', 'yellow')。
• 选择父元素下的子元素：$('ul > span').css('background', 'yellow')。
• 选择 class 为 box 的 li 的下一个兄弟元素：$('.box + li').css('background', 'yellow')。

工具方法

$.each()

遍历数组或对象，适用于循环操作：

$.each({ name: 'Tom', setName: function(name) { this.name = name } }, function(key, value) {
  console.log(key, value);
});

$.trim()

去除字符串两端的空格：

console.log($.trim('  Hello World  ')); // 输出: Hello World

属性操作

attr() 和 prop()

• attr(name) 读取或设置非布尔值的标签属性：

  console.log($('div:first').attr('title')); // 读取 title 属性
  $('div').attr('name', 'atguigu'); // 设置 name 属性

• prop(name) 读取或设置布尔值的标签属性：

  $('div').prop('checked', true); // 设置 checkbox 的 checked 属性

• 样式操作可通过 attr() 方法完成，例如：

  $('div').attr('class', 'guiguClass'); // 添加或修改 class 属性

定时调用

setInterval()

每隔一定时间执行回调函数：

const interval = setInterval(function() { 
  console.log('定时执行'); 
}, 2000); // 每隔 2 秒执行

清除定时器：clearInterval(interval)。

setTimeout()

延迟执行回调函数：

setTimeout(function() { 
  console.log('延迟 2 秒后执行'); 
}, 2000);

清除延时调用：clearTimeout(id)。

类操作

通过修改 class 属性来间接修改样式，优于直接修改 style 属性。例如：

$('div').attr('class', 'guiguClass'); // 一行代码修改多个样式

转载地址：http://fltf.baihongyu.com/