JavaScript
关注
分享
扫一扫
文章平均质量分 93
JavaScript 语言
韩曙亮
中国人民大学硕士 , 专注于 移动开发 领域 , 博客专家 , 2023 年博客之星 TOP1 , 2021 年博客之星 TOP9 , 华为云 云享专家 , 阿里云社区 专家博主 , 51CTO 专家博主 ;
展开
-
【Web APIs】JavaScript 操作多个元素 ② ( 动态换肤效果 | 取消内外边距样式 | 设置背景 | 取消 li 默认样式 | 改变界面样式 | 精确计算布局宽度 )
一、案例需求 - 实现动态换肤效果二、案例核心要点1、取消内外边距样式2、设置背景3、取消 li 默认样式4、精确计算宽度5、改变界面样式 - 鼠标移动上去变成小手6、JS 分析三、完整代码示例1、代码示例2、执行结果原创 2024-08-10 23:15:00 · 1193 阅读 · 10 评论 -
【Web APIs】JavaScript 操作多个元素 ① ( 多选一互斥按钮案例 | getElementsByTagName 方法获取 HTMLCollection 伪数组对象 )
一、多元素操作案例1、案例需求 - 多选一互斥按钮案例2、案例核心要点 - getElementsByTagName 方法获取多个元素3、案例核心要点 - 实现策略4、完整代码示例原创 2024-08-07 23:29:39 · 3047 阅读 · 22 评论 -
【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素 案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取/设置 HTML 页面背景颜色 )
一、案例需求二、案例核心要点1、获取焦点事件 - onfocus 事件2、失去焦点事件 - onblur 事件三、完整代码示例1、代码示例2、执行效果四、开关灯案例1、案例需求2、核心要点 - 获取 / 设置 HTML 页面背景颜色3、代码示例原创 2024-08-07 22:18:07 · 1353 阅读 · 1 评论 -
【Web APIs】JavaScript 操作元素 ⑦ ( 多精灵图背景设置 | 核心要点 - 设置 backgroundPosition 属性 | 清除默认样式 | )
一、案例需求二、案例核心要点分析1、清除元素的默认内外边距样式 ★ ( 重点 )2、清除 li 元素的默认样式3、ul 和 li 元素的块级元素本质4、为 li 元素设置浮动 ★ ( 重点 )5、精灵图设置要点 ★ ( 重点 ) - 设置 backgroundPosition 属性三、完整代码示例1、代码示例2、执行效果原创 2024-08-04 22:38:35 · 2331 阅读 · 15 评论 -
【Web APIs】JavaScript 操作元素 ⑥ ( 关闭对话框案例 | display 属性简介 | 页面标签结构和样式 | 盒子模型细节 | 绝对布局要点 - 设置负值即可超出父容器模型 )
一、案例需求二、案例核心要点1、关闭对话框的效果实现2、display 属性简介3、页面标签结构和样式4、盒子模型细节5、绝对布局要点 - 设置负值即可超出父容器模型边框三、完整代码示例原创 2024-08-03 20:33:16 · 2084 阅读 · 15 评论 -
【Web APIs】JavaScript 操作元素 ⑤ ( 修改元素样式属性 | 行内样式操作 - element.style | 类名样式操作 | 类列表样式操作 )
一、修改元素样式属性二、行内样式操作1、行内样式操作2、行内样式操作优缺点3、行内样式操作适用场景4、完整代码示例三、类名样式操作1、类名样式操作2、完整代码示例四、类列表样式操作1、Element.classList 简介2、Element.classList#add 函数3、Element.classList#toggle 函数4、完整代码示例原创 2024-08-02 23:25:51 · 1672 阅读 · 9 评论 -
【Web APIs】JavaScript 操作元素 ④ ( 修改元素属性示例 | 密码表单标签结构 | 密码输入框样式设置 | 右侧图标按钮设置 | JavaScript 修改元素属性示例 )
一、案例需求二、关键要点1、密码表单标签结构2、设置盒子样式3、密码输入框样式设置4、右侧图标按钮设置5、盒子模型右侧图标按钮设置三、JavaScript 修改元素属性示例四、完整代码示例原创 2024-08-01 09:18:57 · 783 阅读 · 4 评论 -
【Web APIs】JavaScript 操作元素 ③ ( 修改表单元素属性 | 表单常用属性 | 表单常用属性修改示例 )
一、修改表单元素属性1、表单简介2、表单常用属性3、表单常用属性修改示例原创 2024-07-31 10:56:58 · 1403 阅读 · 10 评论 -
【Web APIs】JavaScript 操作元素 ② ( 修改元素属性 | 直接访问属性 | 使用setAttribute、getAttribute 和 removeAttribute访问属性 )
一、修改元素属性1、修改属性操作简介2、直接访问属性3、使用 setAttribute、getAttribute 和 removeAttribute 方法访问属性原创 2024-07-30 10:40:20 · 825 阅读 · 3 评论 -
【Web APIs】JavaScript 操作元素 ① ( 修改元素内容 | innerText 属性修改元素文本内容 | innerHTML 属性修改元素 HTML 内容 )
一、修改元素内容1、innerText 属性修改元素文本内容2、innerHTML 属性修改元素 HTML 内容3、页面加载后自动执行修改元素内容的 JS 脚本原创 2024-07-29 20:30:00 · 1952 阅读 · 10 评论 -
【Web APIs】JavaScript 事件基础 ② ( “ 事件 “ 开发步骤 | 常见鼠标 “ 事件 “ )
一、" 事件 " 开发步骤1、" 事件 " 开发步骤2、完整代码示例二、常见鼠标 " 事件 "1、常见鼠标 " 事件 "2、鼠标 " 事件 " 代码示例原创 2024-06-24 19:50:16 · 1033 阅读 · 1 评论 -
【Web APIs】JavaScript 事件基础 ① ( JavaScript 事件简介 | “ 事件 “ 概念 | “ 事件 “ 三要素 - 事件源 / 事件 / 事件处理程序 | 事件类型 )
一、JavaScript 事件简介1、" 事件 " 概念2、" 事件 " 三要素 - 事件源 / 事件 / 事件处理程序3、" 事件 " 类型4、" 事件 " 代码示例原创 2024-06-23 21:50:46 · 935 阅读 · 3 评论 -
【Web APIs】DOM 文档对象模型 ⑤ ( 获取特殊元素 | 获取 html 元素 | 获取 body 元素 )
一、获取特殊元素1、获取 html 元素2、获取 body 元素3、完整代码示例原创 2024-06-23 20:34:53 · 854 阅读 · 0 评论 -
【Web APIs】DOM 文档对象模型 ④ ( querySelector 函数 | querySelectorAll 函数 | NodeList 对象 )
一、querySelector 函数1、querySelector 函数简介2、完整代码示例二、querySelectorAll 函数1、querySelectorAll 函数简介2、完整代码示例三、NodeList 对象1、NodeList 对象简介2、完整代码示例原创 2024-06-20 23:45:00 · 1325 阅读 · 7 评论 -
【Web APIs】DOM 文档对象模型 ③ ( 根据类名获取 DOM 元素 - getElementsByClassName 函数 | 代码示例 )
一、根据类名获取 DOM 元素1、根据类名获取 DOM 元素 - getElementsByClassName 函数2、代码示例 - 获取 文档中 指定类名的 DOM 元素3、代码示例 - 获取 Element 元素下指定类名的 DOM 元素原创 2024-06-20 23:15:00 · 1569 阅读 · 7 评论 -
【Web APIs】DOM 文档对象模型 ② ( 根据标签名获取 DOM 元素 - getElementsByTagName 函数 | 获取指定标签下的 DOM 元素 )
一、获取 DOM 元素1、根据标签名获取 DOM 元素 - getElementsByTagName 函数2、HTMLCollection 遍历及使用3、获取指定标签下的 DOM 元素 - getElementsByTagName 函数原创 2024-06-18 11:28:32 · 4362 阅读 · 0 评论 -
【Web APIs】DOM 文档对象模型 ① ( DOM 相关概念 - DOM 文档、DOM 树、DOM 节点 | 根据元素 ID 获取 DOM 元素 - getElementById 函数 )
一、DOM 相关概念1、DOM 简介2、DOM 相关概念 - DOM 文档、DOM 树、DOM 节点二、获取 DOM 元素1、获取 DOM 元素的常用方法2、根据元素 ID 获取 DOM 元素 - getElementById 函数3、标签和 JavaScript 脚本书写顺序4、console.dir 函数打印对象属性列表原创 2024-06-17 19:17:52 · 2342 阅读 · 10 评论 -
【Web APIs】Web APIs 简介 ( JavaScript 组成 | Web APIs 概念 | DOM 文档对象模型 | BOM 浏览器对象模型 | MDN 参考文档 )
一、Web APIs 简介1、JavaScript 组成2、Web APIs 引入3、Web APIs 概念4、Web APIs 参考文档5、常见的 Web APIs 功能原创 2024-06-17 13:44:40 · 1401 阅读 · 6 评论 -
【JavaScript】简单数据类型 与 复杂数据类型 ② ( 简单数据类型参数传递 | 复杂数据类型参数传递 )
一、简单数据类型参数传递1、值传递2、代码示例二、复杂数据类型参数传递1、引用传递2、代码示例原创 2024-06-12 20:15:00 · 1477 阅读 · 2 评论 -
【JavaScript】简单数据类型 与 复杂数据类型 ① ( 堆内存和栈内存 | 简单数据类型内存存储 | 复杂数据类型内存存储 )
一、简单数据类型1、简单数据类型简介2、简单数据类型 null 空类型的特殊性二、复杂数据类型三、堆内存和栈内存原创 2024-06-12 19:15:00 · 1472 阅读 · 3 评论 -
【JavaScript】内置对象 - 字符串对象 ⑦ ( String 字符串替换 | replace 函数 | replaceAll 函数 | String 字符串切割 | split 函数 )
一、String 字符串替换1、replace 函数替换字符串2、使用 replace 函数替换所有匹配字符串3、replaceAll 函数替换字符串二、String 字符串转数组1、split 函数切割字符串2、代码示例 - 切割字符串原创 2024-06-10 00:13:57 · 3144 阅读 · 6 评论 -
【JavaScript】内置对象 - 字符串对象 ⑥ ( String 字符串拼接 | concat 函数 | String 字符串截取 | substr 函数 | substring 函数 )
一、String 字符串拼接1、concat 函数拼接字符串2、代码示例 - 拼接字符串二、String 字符串截取1、substr 函数截取字符串2、substring 函数截取字符串原创 2024-06-09 13:51:04 · 1241 阅读 · 3 评论 -
【JavaScript】内置对象 - 字符串对象 ⑤ ( 判断对象中是否有某个属性 | 统计字符串中每个字符出现的次数 )
一、判断对象中是否有某个属性1、获取对象属性2、判定对象是否有某个属性二、统计字符串中每个字符出现的次数1、算法分析2、代码示例原创 2024-06-08 22:34:29 · 1216 阅读 · 6 评论 -
【JavaScript】内置对象 - 字符串对象 ④ ( 根据索引位置返回字符串中的字符 | 代码示例 )
一、根据索引位置返回字符串中的字符1、charAt 函数获取字符2、charCodeAt 函数获取字符 ASCII 码3、数组下标获取字符原创 2024-06-08 22:11:32 · 889 阅读 · 2 评论 -
【JavaScript】内置对象 - 字符串对象 ③ ( 字符串常用方法 | 查找字符串子串第一次出现的位置 - indexOf | 代码示例 )
一、字符串常用方法1、字符串类型不可变性回顾2、查找字符串子串第一次出现的位置 - indexOf二、代码示例1、查找子字符串2、查找子字符串 - 指定起始查找范围3、查找子字符串出现次数及索引原创 2024-05-21 17:22:55 · 1019 阅读 · 0 评论 -
【JavaScript】内置对象 - 字符串对象 ② ( 字符串类型不可变性 | 字符串不可变的好处 | 字符串不可变 - 示例分析 )
一、字符串不可变1、字符串类型不可变性说明2、字符串不可变的好处二、字符串不可变 - 示例分析1、字符串不可变示例分析2、完整代码示例3、字符串拼接性能测试 - 拼接 10 次字符串4、字符串拼接性能测试 - 拼接 10000000 次字符串原创 2024-05-20 20:15:13 · 1198 阅读 · 4 评论 -
【JavaScript】内置对象 - 字符串对象 ① ( 基本包装类型 | 三种基本装包类型 - String / Number / Boolean | 包装过程触发条件 | 包装过程 )
一、基本包装类型引入1、字符串类型变量示例2、基本包装类型引入二、基本包装类型1、三种基本装包类型 - String / Number / Boolean2、包装过程触发条件3、基本包装类型的包装过程原创 2024-05-19 20:51:13 · 953 阅读 · 2 评论 -
【JavaScript】内置对象 - 数组对象 ⑤ ( 数组转字符串 | toString 方法 | join 方法 )
一、数组转字符串1、数组转字符串 ( 逗号分割 ) - toString()2、数组转字符串 ( 自定义分割符 ) - join()原创 2024-05-11 10:01:12 · 1157 阅读 · 1 评论 -
【JavaScript】内置对象 - 数组对象 ④ ( 索引方法 | 查找给定元素的第一个索引 | 查找给定元素的最后一个索引 | 索引方法案例 - 数组元素去重 )
一、索引方法1、查找给定元素的第一个索引 - indexOf()2、查找给定元素的最后一个索引 - lastIndexOf()二、索引方法案例 - 数组元素去重1、需求分析2、代码实现原创 2024-05-11 04:45:00 · 1855 阅读 · 0 评论 -
【JavaScript】内置对象 - 数组对象 ③ ( 数组反转 - reverse 方法 | 数组排序 - sort 方法 | 自定义数组排序规则 )
一、数组排序1、翻转数组元素 - reverse()2、数组元素排序 - sort() 默认从小到大排序3、数组元素排序 - sort() 自定义排序规则4、数组元素排序 - sort() 自定义降序排序简化写法原创 2024-05-11 01:45:00 · 1444 阅读 · 1 评论 -
【JavaScript】内置对象 - 数组对象 ② ( 数组添加元素 - push 方法 / unshift 方法 | 数组删除元素 - pop 方法 / shift 方法 )
一、添加数组元素1、添加数组元素 - push()2、添加数组元素 - unshift()二、删除数组元素1、删除数组元素 - pop()2、删除数组元素 - shift()三、数组筛选1、数组筛选回顾2、代码示例原创 2024-05-10 21:15:00 · 746 阅读 · 2 评论 -
【JavaScript】内置对象 - 数组对象 ① ( 数组简介 | 数组创建 | 数组类型检测 )
一、数组对象1、数组简介2、数组创建3、数组检测 - Array.isArray() 方法4、数组检测 - instanceof 运算符原创 2024-05-10 20:15:00 · 1394 阅读 · 2 评论 -
【JavaScript】内置对象 - Date 日期对象 ④ ( 制作倒计时页面 )
一、倒计时页面实现1、需求分析2、计算秒数3、计算倒计时时间的 天 / 时 / 分 / 秒4、页面中显示倒计时时间二、完整代码示例1、完整代码2、执行结果原创 2024-05-08 17:14:35 · 1554 阅读 · 3 评论 -
【JavaScript】内置对象 - Date 日期对象 ③ ( 获取日期对应时间戳 | getTime 方法 | valueOf 方法 | +new Date() 方法 | Date.now方法 )
一、获取日期对应的毫秒时间戳1、时间戳简介2、调用 Date 对象的 getTime 函数获取时间戳3、调用 Date 对象的 valueOf 函数获取时间戳4、使用 + 运算符获取 Date 对象的时间戳 ( 最常用 )5、调用 Date 对象的 now 方法获取现在时间戳 ( H5 新增 - 不兼容低版本 )原创 2024-05-07 07:56:45 · 1706 阅读 · 4 评论 -
【JavaScript】内置对象 - Date 日期对象 ② ( 日期格式化 | 获取年 - getFullYear | 获取月 - getMonth | 获取每月的第几天 - getDate )
一、日期格式化1、获取年 - getFullYear2、获取月 - getMonth3、获取每月的第几天 - getDate4、获取每周的第几天 - getDay5、获取每天的第几小时 - getHours6、完整代码示例原创 2024-04-28 23:15:00 · 1674 阅读 · 9 评论 -
【JavaScript】内置对象 - Date 日期对象 ① ( Date 对象简介 | 使用构造函数创建 Date 对象 | 构造函数参数为时间戳 | 构造函数参数为空 | 构造函数参数为字符串 )
一、Date 日期内置对象1、Date 对象简介2、创建 Date 对象二、使用构造函数创建 Date 对象1、构造函数参数为空2、构造函数参数为时间戳3、构造函数参数为字符串4、构造函数参数为多个数字值5、完整代码示例原创 2024-04-26 21:45:00 · 1424 阅读 · 9 评论 -
【JavaScript】内置对象 ④ ( Math 内置对象常用方法 | 取绝对值 | 向下取整 | 向上取整 | 四舍五入取整 | 取随机数 )
一、Math 内置对象常用方法1、计算绝对值 - Math.abs2、取整计算 - Math.floor 向下取整 / Math.ceil 向上取整 / Math.round 四舍五入3、随机数 - Math.random4、代码示例 - 猜随机数原创 2024-04-26 19:15:00 · 2329 阅读 · 1 评论 -
【JavaScript】内置对象 ③ ( Math 内置对象 | Math 内置对象简介 | Math 内置对象的使用 )
一、Math 内置对象1、Math 内置对象简介2、Math 内置对象的使用二、代码示例1、代码示例 - Math 内置对象的使用2、代码示例 - 封装 Math 内置对象原创 2024-04-25 22:13:37 · 1320 阅读 · 4 评论 -
【JavaScript】内置对象 ② ( JavaScript 技术文档查询 | MDN 文档简介 | MDN 文档查询方法 | 查询对象描述 | 查询对象属性 | 查询对象方法 )
一、JavaScript 技术文档查询1、MDN 文档简介2、MDN 文档查询方法3、查询对象描述4、查询对象属性5、查询对象方法原创 2024-04-25 19:45:00 · 1218 阅读 · 5 评论 -
【JavaScript】内置对象 ① ( 内置对象简介 | JavaScript 中的三类对象 - 自定义对象 / 内置对象 / 浏览器对象 | 常用的内置对象 )
一、JavaScript 内置对象简介1、JavaScript 中的三类对象 - 自定义对象 / 内置对象 / 浏览器对象2、JavaScript 中常用的内置对象3、代码示例 - Math 内置对象使用示例原创 2024-04-23 23:15:00 · 1624 阅读 · 7 评论