From：https://www.runoob.com/js/js-examples.html
JavaScript 和 HTML DOM 参考手册（：https://www.runoob.com/jsref/jsref-tutorial.html）
- 所有内置的JavaScript对象
- 所有浏览器对象
- 所有HTML DOM对象
HTML DOM Document 对象（：https://www.runoob.com/jsref/dom-obj-document.html）
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
- 文档是一个文档节点。
- 所有的HTML元素都是元素节点。
- 所有 HTML 属性都是属性节点。
- 文本插入到 HTML 元素是文本节点。are text nodes。
- 注释是注释节点。
Document 对象
- 当浏览器载入 HTML 文档, 它就会成为 Document 对象。
- Document 对象是 HTML 文档的根节点。
- Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
- 提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
基础 JavaScript 实例
JavaScript 语句、注释和代码块
JavaScript 变量
JavaScript 条件语句 If ... Else
JavaScript 消息框
JavaScript 函数
JavaScript 循环
JavaScript 事件
JavaScript 错误处理
高级 JavaScript 实例
JavaScript 应用实例
- javascript 幻灯片代码(含自动播放)
- CSS 日历样式
- JavaScript 弹窗
- JavaScript 图片弹窗
- JavaScript Lightbox
- javascript 搜索框自动提示
- JavaScript 表格数据搜索
- JavaScript 实现列表按字母排序
- JavaScript 实现表格单列按字母排序
- JavaScript 动画应用实例
- JavaScript 进度条实例
- JavaScript 百分比进度条
- JavaScript/CSS 实现提示弹窗
- JavaScript/CSS 实现待办事项列表(To Do List)
- HTML CSS, JavaScript 计算器
- HTML、CSS、JavaScript 实现下拉菜单效果
- JS/CSS 各种操作信息提示效果
- JS/CSS 在屏幕底部弹出消息(snackbar)
- JS/CSS 登录表单
- JS/CSS 注册表单
- JavaScript 计算器(倒计时)
- JS/CSS 菜单按钮切换(打开/关闭)
- JS/CSS 手风琴动画效果
- JS/CSS 带图标手风琴动画效果
- JS/CSS 选项卡
- JS/CSS 选项卡 – 淡入效果
- JS/CSS 选项卡 – 设置默认选项
- JS/CSS 选项卡 – 设置关闭按钮
- JS/CSS 选项卡 – 垂直方向
- JS/CSS 选项卡 – 幻灯片效果
- JS/CSS 响应式顶部导航样式实例
- JS/CSS 侧边栏动画实例
- JS/CSS 侧边栏动画实例 - 页面主体内容向右移动
- JS/CSS 侧边栏动画实例 - 页面主体内容黑色透明背景
- JS/CSS 全屏幕侧边栏
- JS/CSS 侧边栏 - 无动画效果
- JS/CSS 右侧侧边栏
- JS/CSS 全屏幕导航 – 从上到下动画
- JS/CSS 点击式下拉菜单
- JS/CSS 点击式下拉菜单 - 右对齐
- JS/CSS 点击式导航栏下拉菜单
- JS/CSS 下拉菜单可进行搜索/过滤操作
- JS 联想、自动补齐功能
- JavaScript 按下回车(Enter)键触发按钮点击事件
- JavaScript 创建一个菜单搜索
- Javascript 判断是移动端浏览器还是 PC 端浏览器
- JavaScript 判断是否微信浏览器
JavaScript 对象 实例
使用内置的JavaScript对象实例。
String（字符串）对象
- 返回字符串的长度
- 为字符串添加样式
- 返回字符串中指定文本首次出现的位置 - indexOf()方法
- 查找字符串中特定的字符，若找到，则返回该字符 - match() 方法
- 替换字符串中的字符 - replace()
- 更多的字符串对象的例子，在我们的JavaScript String 对象参考手册。
Date（日期）对象
- 使用 Date() 方法来返回今天的日期和时间
- 使用 getTime() 计算从1970年到今天有多少毫秒
- 使用 setFullYear() 设置具体的日期
- 使用 toUTCString() 把当日的日期（根据 UTC）转换为字符串
- 使用 getDay() 来显示星期，而不仅仅是数字
- 显示一个钟表
- 更多的Date（日期）对象的例子，在我们的JavaScript Date 对象参考手册。
Array（数组）对象
- 创建数组
- 合并两个数组 - concat()
- 合并三个数组 - concat()
- 用数组的元素组成字符串 - join()
- 删除数组的最后一个元素 - pop()
- 数组的末尾添加新的元素 - push()
- 反转一个数组中的元素的顺序 - reverse()
- 删除数组的第一个元素 - shift()
- 从一个数组中的选择元素 - slice()
- 数组排序（按字母顺序升序）- sort()
- 数字排序（按数字顺序升序）- sort()
- 数字排序（按数字顺序降序）- sort()
- 在数组的第2位置添加一个元素 - splice()
- 转换数组到字符串 -toString()
- 在数组的开头添加新元素 - unshift()
- 更多的Array（数组）对象的例子，在我们的JavaScript Array 对象的参考手册。
Boolean（布尔）对象
- 检查逻辑值
- 更多的Boolean（布尔）对象对象的例子，在我们的JavaScript Boolean 对象的参考手册。
Math（算数）对象
- 使用 round() 对数字进行舍入
- 使用 random() 来返回 0 到 1 之间的随机数
- 使用 max() 来返回两个给定的数中的较大的数
- 使用 min() 来返回两个给定的数中的较小的数
- 摄氏度与华氏转换
一般
- 通过对象元素使用for...in语句
- 更多Math 对象实例在我们的JavaScript Math 对象的参考手册。
Browser 对象 实例
使用JavaScript来访问和控制浏览器对象实例。
Window 对象
- 弹出一个警告框
- 弹出一个带折行的警告框
- 弹出一个确认框，并提醒访客点击的内容
- 弹出一个提示框
- 点击一个按钮时，打开一个新窗口
- 打开一个新窗口，并控制其外观
- 打开多个新窗口
- 确保新的窗口没有获得焦点
- 确保新的窗口获得焦点
- 关闭新窗口
- 检查新的窗口是否已关闭
- 返回新窗口的名字
- 传输一些文本到源（父）窗口
- 相对于当前位置移动新窗口
- 移动新窗口到指定位置
- 打印当前页面
- 用像素指定窗口大小
- 指定窗口大小
- 由指定的像素数滚动内容
- 滚动到指定内容处
- 一个简单的时钟
- 用setTimeout() 和 clearTimeout()设置和停止定时器
- 用setInterval() 和 clearInterval()设置和停止定时器
- 更多的Window 对象的例子，在我们的JavaScript 参考手册。
Navigator 对象
- 访问者的浏览器的详细
- 更多的Navigator 对象的例子，在我们的JavaScript 参考手册。
Screen 对象
- 访问者的屏幕的详细
- 更多的Screen 对象的例子，在我们的JavaScript 参考手册。
History 对象
- 返回一个url的历史清单
- 创建一个后退按钮
- 创建一个前进按钮
- 从url的历史清单转到指定的url
- 更多的History 对象对象的例子，在我们的JavaScript 参考手册。
Location 对象
- 返回主机名和当前url的端口号
- 返回当前页面的整个URL
- 返回当前url的路径名
- 返回当前URL的协议部分
- 加载个新文档
- 重新载入当前文档
- 替代当前文档
- 跳出框架
- 更多Location 对象实例在我们的JavaScript 参考手册。
HTML DOM 实例
使用内置 JavaScript 的对象实例。
Document 对象
- 使用 document.write() 输出文本
- 使用 document.write() 输出 HTML
- 返回文档中锚的数目
- 返回文档中第一个锚的 innerHTML
- 返回文档中表单的数目
- 返回文档中第一个表单的名字
- 返回文档中的图像数
- 返回文档中第一个图像的ID
- 返回文档中的链接数
- 返回文档中的第一个链接的ID
- 返回文档中的所有cookies的名称/值对
- 返回加载的文档的服务器域名
- 返回文档的最后一次修改时间
- 返回加载的当前文档的URL
- 返回文档的标题
- 返回文档的完整的URL
- 打开输出流，向流中输入文本
- write() 和 writeln()的不同
- 用指定的ID弹出一个元素的innerHTML
- 用指定的Name弹出元素的数量
- 用指定的tagname弹出元素的数量
- 更多的 Document 对象的例子，在我们的JavaScript 参考手册。
Anchor 对象
- 返回和设置链接的charset属性
- 返回和设置链接的href属性
- 返回和设置链接的hreflang属性
- 返回一个锚的名字
- 返回当前的文件和链接的文档之间的关系
- 改变链接的target属性
- 返回一个链接的type属性的值
- 更多的 Anchor 对象的例子，在我们的JavaScript 参考手册。
Area 对象
- 返回图像映射某个区域的替代文字
- 返回图像映射某个区域的坐标
- 返回一个区域的href属性的锚部分
- 返回的主机名：图像映射的某个区域的端口
- 返回图像映射的某个区域的hostname
- 返回图像映射的某个区域的port
- 返回图像映射的某个区域的href
- 返回图像映射的某个区域的pathname
- 返回图像映射的某个区域的protocol
- 返回一个区域的href属性的querystring部分
- 返回图像映射的某个区域的shape
- 返回图像映射的某个区域的target的值
- 更多的 Area 对象的例子，在我们的JavaScript 参考手册。
Base 对象
- 返回页面上所有相对URL的基URL
- 返回页面上所有相对链接的基链接
- 更多的 Base 对象对象的例子，在我们的JavaScript 参考手册。
Button 对象
- 当点击完button不可用
- 返回一个button的name
- 返回一个button的type
- 返回一个button的value
- 返回一个button所属表的ID
- 更多 Button 对象实例在我们的JavaScript 参考手册。
Form 对象
- 返回一个表单中所有元素的value
- 返回一个表单acceptCharset属性的值
- 返回一个表单action属性的值
- 返回表单中的enctype属性的值
- 返回一个表单中元素的数量
- 返回发送表单数据的方法
- 返回一个表单的name
- 返回一个表单target属性的值
- 重置表单
- 提交表单
- 更多 Form 对象实例在我们的JavaScript 参考手册。
Frame/IFrame 对象
- 对iframe排版
- 改变一个包含在iframe中的文档的背景颜色
- 返回一个iframe中的frameborder属性的值
- 删除iframe的frameborder
- 改变iframe的高度和宽度
- 返回一个iframe中的longdesc属性的值
- 返回一个iframe中的marginheight属性的值
- 返回一个iframe中的marginwidth属性的值
- 返回一个iframe中的name属性的值
- 返回和设置一个iframe中的scrolling属性的值
- 改变一个iframe的src
- 更多 Frame/IFrame 对象实例在我们的JavaScript 参考手册。
Image 对象
- 对image排版
- 返回image的替代文本
- 给image加上border
- 改变image的高度和宽度
- 设置image的hspace和vspace属性
- 返回image的longdesc属性的值
- 创建一个链接指向一个低分辨率的image
- 返回image的name
- 改变image的src
- 返回一个客户端图像映射的usemap的值
- 更多 Image 对象实例在我们的JavaScript 参考手册。
Event 对象
Option 和 Select 对象
- 禁用和启用下拉列表
- 获得有下拉列表的表单的ID
- 获得下拉列表的选项数量
- 将下拉列表变成多行列表
- 在下拉列表中选择多个选项
- 弹出下拉列表中被选中的选项
- 弹出下拉列表中被选中的选项的索引
- 改变下拉列表中被选中的选项的文本
- 删除下拉列表中的选项
Table, TableHeader, TableRow, TableData 对象
- 改变表格边框的宽度
- 改变表格的cellpadding和cellspacing
- 指定表格的frame
- 为表格指定规则
- 一个行的innerHTML
- 一个单元格的innerHTML
- 为表格创建一个标题
- 删除表格中的行
- 添加表格中的行
- 添加表格行中的单元格
- 单元格内容水平对齐
- 单元格内容垂直对齐
- 对单个单元格的内容水平对齐
- 对单个单元格的内容垂直对齐
- 改变单元格的内容
- 改变行的内容