让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )

一、jQuery 排他思想1、核心概念2、核心逻辑拆解二、代码示例1、代码示例 - 排他思想案例① 代码示例② 执行结果2、代码示例 - 排他思想综合案例① 代码示例② 运行结果3、代码示例 - 下拉菜单 ( 筛选方法案例 )① 代码示例② 执行结果

一、jQuery 筛选方法1、核心概念2、核心特点3、分类场景 - 向下找后代、向上找祖先、同级找兄弟、范围限定查找4、jQuery 筛选方法列举二、代码示例1、代码示例 - 向下找后代2、代码示例 - 向上找祖先3、代码示例 - 同级找兄弟

一、jQuery 隐式迭代1、核心概念2、使用场景二、JS 原生显式迭代 与 jQuery 隐式迭代1、JS 原生 显式迭代2、jQuery 隐式迭代

一、代码示例 - jQuery 基础选择器1、代码示例2、执行结果二、代码示例 - jQuery 层级选择器1、代码示例2、执行结果三、代码示例 - jQuery 筛选选择器1、代码示例2、执行结果

一、jQuery 学习路径二、jQuery 选择器1、jQuery 基础选择器2、jQuery 层级选择器3、jQuery 筛选选择器

一、jQuery 相关对象1、jQuery 顶级对象 $2、DOM 对象3、jQuery 对象4、jQuery 对象与 DOM 对象互相转换二、代码示例1、代码示例2、执行结果

一、JavaScript 库简介1、JavaScript 库简介2、常见的 JavaScript 库二、jQuery 简介1、jQuery 核心概念2、jQuery 特点三、jQuery 使用1、jQuery 下载地址2、jQuery 下载并使用3、代码示例 - 默认代码4、代码示例 - 隐藏盒子5、代码示例 - DOM 加载完毕后隐藏盒子

一、浏览器本地存储1、存储 / 修改数据2、读取数据3、删除指定数据4、清空所有数据5、根据索引获取键名6、获取键值对数量二、代码示例 - window.sessionStorage 本地存储1、代码示例2、执行结果

一、浏览器本地存储1、核心概念2、核心特点3、本地存储核心类型二、window.sessionStorage 本地存储1、核心概念2、适用场景3、代码示例三、window.localStorage 本地存储1、核心概念2、适用场景3、代码示例

一、JavaScript 框架1、JS 框架核心概念2、JS 框架与 JS 插件3、常用前端框架二、使用 Bootstrap 实现轮播图1、Bootstrap 核心概念2、代码示例3、执行效果

一、JavaScript 插件使用流程二、iScroll 插件1、iScroll 插件简介2、代码示例 - iScroll 插件3、执行效果

一、Swiper 插件案例 - 3D 木马特效1、需求说明2、官方示例代码二、完整流程1、拷贝并导入 CSS 和 JS 依赖文件2、修改 HTML 结构3、拷贝 CSS样式4、拷贝 JS 脚本5、样式调整三、完整代码示例1、HTML 代码 - index.html2、CSS 样式代码 - index.css3、JS 脚本代码 - index.js4、执行效果

一、Swiper 插件案例1、需求说明2、HTML 页面设置① 导入外部依赖② 编写 HTML 结构3、编写 CSS 代码4、编写 JS 代码二、代码示例 - Swiper 插件案例1、HTML 代码 - index.html2、JavaScript 脚本 - index.js3、CSS 样式 - index.css4、执行效果

一、Swiper 插件简介1、核心概念2、核心特点二、Swiper 插件使用方法1、下载 Swiper 插件2、Swiper 插件案例3、Swiper 插件案例源码查看4、Swiper 插件案例源码分析5、Swiper 插件 API 文档三、Swiper 插件使用步骤0、使用文档1、步骤一 : 加载插件2、步骤二 : 加载插件3、步骤三 : 设置 Swiper 轮播图大小4、步骤四 : 初始化 Swiper

一、FastClick 插件简介1、插件由来2、插件工作原理3、FastClick 插件使用流程① 引入 FastClick 插件② 初始化插件③ 排除特定元素二、代码示例 - fastclick 插件1、主页面代码示例2、fastclick.js 插件代码3、执行结果

一、JavaScript 插件1、概念简介2、核心特点3、常见的 JS 插件分类二、JavaScript 插件使用流程

一、移动端网页 JavaScript 中 click 事件 300ms 延迟问题1、问题来源2、浏览器适配问题二、解决方案1、设置 viewport 元标签 全局禁用 双击缩放功能2、使用 CSS 的 touch-action 属性 局部 / 全局禁用3、使用移动端原生触摸事件替代 click 事件

一、移动端返回顶部案例1、需求说明2、返回顶部按钮 显示 / 隐藏 设置3、返回顶部操作二、代码示例 - 移动端返回顶部案例1、代码示例2、执行结果

一、移动端轮播图案例1、需求说明2、HTML 结构布局4、轮播图自动播放5、设置无缝衔接滑动6、手指滑动轮播图二、代码示例 - 移动端轮播图案例1、代码示例2、执行结果

一、Element.classList 操作 DOM 元素 类名集合1、Element.classList 核心概念2、添加类名 - add 函数3、移除类名 - remove 函数4、切换类名 - toggle 函数5、判断类名是否存在 - contains 函数二、代码示例 - Element.classList 操作 DOM 元素 类名集合1、代码示例2、执行结果

一、拖动元素案例1、需求说明2、实现原理① 关键事件② 实现步骤③ 默认行为阻止3、代码示例① 代码示例② 执行结果

一、TouchEvent 触摸事件对象1、TouchEvent 概念2、TouchEvent 的核心属性3、单个触点信息 Touch 对象4、触摸事件对象 TouchEvent 对应的 触摸事件类型二、代码示例 - TouchEvent 触摸事件对象1、代码示例2、执行结果

一、浏览器调试模式1、桌面浏览模式2、设备模拟模式3、桌面浏览模式 与 设备模拟模式 对比

一、JavaScript touch 触摸事件1、 touchstart 触摸开始事件2、touchmove 触摸移动事件3、touchend 触摸结束事件二、代码示例 - touch 触摸事件1、代码示例2、执行结果

一、动画案例 - 筋斗云导航栏1、需求说明2、HTML 结构3、CSS 样式① 清除内外边距、列表样式② 设置顶层父容器样式③ 设置 ul 列表样式4、JavaScript 脚本① 页面加载完成事件② 获取 DOM 元素③ 设置鼠标 进入 / 移出 / 点击 事件二、代码示例 - 筋斗云导航栏1、主页面代码 - HTML 结构、CSS 样式、JS 脚本2、动画封装 JS 脚本3、执行效果

一、动画案例 - 返回网页顶部1、需求说明2、直接跳转到顶部3、使用动画效果滚动到顶部

一、轮播图案例 - 需求、结构、页面样式解析1、需求说明2、HTML 结构3、CSS 样式 - 清除边距及默认样式① 清除默认内外边距② 清除列表样式③ 清除链接样式4、CSS 样式 - 轮播图图片① 左浮动横向排列② 轮播图图片父容器 ul 列表样式③ 轮播图父容器样式5、CSS 样式 - 轮播图左右按钮6、CSS 样式 - 轮播图小圆点按钮二、轮播图案例 - JavaScript 脚本解析1、页面加载执行脚本、获取必要的 DOM 元素2、鼠标进出轮播图区域的事件设定

一、动画案例 - 侧边栏展开案例1、需求说明2、元素样式3、核心动画函数4、设置 mouseenter、mouseleave 鼠标进出事件二、代码示例1、完整代码① 主体界面② js 脚本 - animate.js2、执行结果

本文介绍了前端开发中动画回调函数的概念与应用。动画回调函数的核心作用是在动画完成后执行自定义逻辑，通过将函数作为参数传入动画函数，在清除定时器后执行该函数。文章提供了代码示例，展示了如何实现缓动动画效果，并在动画结束时触发回调函数改变元素背景色。此外，还演示了如何将动画函数封装到独立的JS脚本中，便于复用。关键点在于将附加逻辑的控制权交给调用者，而非写死在动画函数里。

缓动动画与匀速动画不同，通过动态计算步长实现平滑移动效果。缓动动画的核心原理是根据目标位置与当前元素位置的差值，按比例（如1/10）计算每次移动的步长，使元素逐渐减速靠近目标。步长计算需考虑方向：正数（向右）向上取整，负数（向左）向下取整，避免位置回退。代码示例展示了如何通过定时器动态调整left属性值，实现从0px到300px的缓动动画效果，确保最终位置精确对齐。

一、setInterval 动画原理1、setInterval 实现动画原理2、代码示例 - setInterval 实现动画二、动画函数封装1、动画函数封装2、代码示例 - 动画函数封装三、动画封装函数 - 获取定时器标识1、元素自定义属性接收定时器标识2、代码示例 - 元素自定义属性接收定时器标识

本文对比了鼠标经过和离开事件的两种类型：mouseover/mouseout和mouseenter/mouseleave。mouseover/mouseout会在鼠标移入元素或其子元素时频繁触发，支持事件冒泡；而mouseenter/mouseleave仅在鼠标进出元素本身时触发，不冒泡且不响应子元素移动，触发更精准。通过代码示例展示了两种事件的行为差异，前者会在父子元素间移动时重复触发，后者则只关注元素自身的进出状态。

一、元素滚动 scroll 系列属性案例 - 右侧固定侧边栏1、需求说明2、HTML 结构3、右侧固定侧边栏解析① 相关代码② 绝对定位③ 位置设置4、window.pageYOffset 属性① window.pageYOffset 属性简介② scroll 滚动事件监听③ 向下滚动 侧边栏 由 绝对定位 -> 固定定位④ 向上滚动 侧边栏 由 固定定位 -> 绝对定位⑤ 判断 返回顶部 按钮 显示 / 隐藏二、代码示例1、代码示例2、执行结果

scroll系列属性用于控制元素内容与可视区域的滚动关系，分为滚动位置属性和内容尺寸属性。滚动位置属性（scrollTop/scrollLeft）可读写，控制元素内容被滚动隐藏的距离；内容尺寸属性（scrollWidth/scrollHeight）只读，获取元素内容总尺寸（含隐藏部分）。通过设置scrollTop/scrollLeft可实现精准滚动控制，结合scrollHeight/scrollWidth可判断滚动状态。示例中展示了获取滚动属性、滚动到底部/最右侧的功能实现，并说明了滚动条对可视区域尺寸的影

一、 window 对象的 load 事件 / resize 事件 / pageshow 事件1、 window.load 事件简介2、 window.load 事件触发场景3、 window.resize 事件及触发场景4、 window.pageshow 事件引入5、 页面尺寸发生变化 -> 重新计算 rem ( 重点 )6、案例分析 - 监听 页面尺寸发生变化 ( 重点 )二、代码示例1、代码示例2、执行结果

一、 初始化字体大小1、 设备像素比 DPR2、 常见的设备像素比3、 html 标签 font-size 属性 - 设置 rem 的基准单位4、 body 标签 font-size 属性 - 设置页面普通文字大小5、 html 和 body 标签 font-size 属性对比二、 代码示例1、 代码示例2、 代码分析3、 执行结果

一、立即执行函数1、 立即执行函数简介2、 立即执行函数语法3、 立即执行函数与普通函数对比二、代码示例1、 代码示例 - 普通函数2、 代码示例 - 立即执行函数两种写法

一、元素可视区 client 系列属性1、 client 属性简介2、 常用的 client 属性3、client 属性应用场景二、代码示例 - client 系列属性1、 代码示例2、 执行结果

一、offset 属性案例 - 放大镜效果1、 需求说明2、HTML 结构3、CSS 样式① 清除内外边距② 小图容器样式③ 遮挡层样式④ 大图容器样式⑤ 大图容器内的图片样式4、设置 window 对象 onload 事件5、显示 / 隐藏 遮挡层和大图容器6、计算鼠标在小图容器中的坐标7、计算小图容器中遮挡层的位置8、大图片显示设置二、 完整代码示例1、 代码示例2、图片资源3、 执行效果

一、 offset 属性案例 - 计算鼠标指针在盒子内位置1、 需求说明2、 实现原理3、 代码示例 - 鼠标点击获取在盒子中的位置4、 代码示例 - 鼠标移动获取在盒子中的位置二、 offset 属性案例 - 鼠标拖动盒子移动1、 需求说明2、 实现原理① 定位方式② 鼠标按下事件③ 鼠标移动事件④ 鼠标抬起事件3、 代码示例