课七：jQuery

选择器 · 事件处理 · DOM操作 · 动态效果

一、核心知识点

  • jQuery基础：
    • 引入方式：CDN引入、本地文件引入
    • 核心语法：$(selector).action()（选择器+方法）
    • 入口函数：$(document).ready() 或 $(function(){})
  • jQuery选择器：
    • 元素选择器：$("tag")、$(".class")、$("#id")
    • 层次选择器：$("parent child")、$("parent>child")
    • 属性选择器：$("[attr]")、$("[attr=value]")
    • 过滤选择器：:first、:last、:eq(index)
  • jQuery事件处理：
    • 常用事件：click()、hover()、mouseenter()、submit()
    • 事件绑定：on()、off()、one()
    • 事件委托：$(parent).on(event, child, handler)
  • jQuery DOM操作：
    • 内容操作：html()、text()、val()
    • 属性操作：attr()、prop()、data()
    • 样式操作：css()、addClass()、toggleClass()
    • 元素操作：append()、remove()、empty()
  • jQuery动态效果：
    • 显示隐藏：show()、hide()、toggle()
    • 淡入淡出：fadeIn()、fadeOut()、fadeToggle()
    • 滑动效果：slideUp()、slideDown()、slideToggle()
    • 自定义动画：animate()

二、实操实例

实例名称

动态相册（图片轮播+点击放大+动态加载）

实例目标

制作一个包含图片轮播、点击放大、动态加载图片功能的相册，掌握jQuery选择器、事件处理、DOM操作、动态效果等核心技能。

三、详细实现步骤

📁 步骤1：创建文件结构

lesson7/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── script.js └── images/ (放置5张图片)

📄 步骤2：编写HTML结构

<!-- 完整结构见下方演示区源码，此处为关键部分 -->

🎨 步骤3：编写CSS样式

/* 样式已集成在演示区中，可参考下方演示区效果 */

⚙️ 步骤4：编写jQuery逻辑

// 完整JS代码见演示区底部脚本，实现轮播、弹窗、动态加载

📸 jQuery动态相册 · 在线演示

轮播 / 点击放大 / 加载更多 (所有效果基于jQuery实现)

轮播1
轮播2
轮播3
缩略1
缩略2
缩略3

▶️ 步骤5：运行与验证

  1. 直接在上方演示区操作，验证三大核心功能：
    • 轮播图：自动轮播、点击箭头切换、点击指示器切换、鼠标悬停暂停
    • 图片放大：点击缩略图弹出大图，点击关闭按钮或背景关闭弹窗
    • 动态加载：点击“加载更多图片”按钮，1秒后模拟加载新图片，按钮状态更新
  2. 调整浏览器窗口大小，观察相册网格布局的响应式变化。
  3. 也可将完整代码复制到本地，替换为真实图片进一步体验。

四、关键注意事项

  • 引入jQuery时要确保路径正确，优先使用CDN引入（稳定且加载快）。
  • jQuery选择器要精准，避免选择到无关元素（可使用console.log()调试选择结果）。
  • 事件绑定前确保DOM元素已加载完成（使用入口函数$(function(){})）。
  • 动态添加的元素需要重新绑定事件，或使用事件委托：$(parent).on(event, child, handler)。
  • 使用setTimeout模拟异步加载时，要处理按钮的加载状态，避免重复点击。
  • jQuery方法返回的是jQuery对象，可链式调用（如$('div').addClass('active').css('color', 'red')）。
← 返回总目录