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改变HTML元素
• 一个外部JavaScript
• 实例解析

 

JavaScript 语句、注释和代码块

• JavaScript 语句
• JavaScript 代码块
• JavaScript 单行注释
• JavaScript 多行注释
• 使用单行注释来防止执行
• 使用多行注释来防止执行
• 实例解析

 

JavaScript 变量

• 声明一个变量，为它赋值，然后显示出来
  
• 实例解析

 

JavaScript 条件语句 If ... Else

• If 语句
• If...else 语句
• 随机链接
• Switch 语句
• 实例解析

 

JavaScript 消息框

• Alert(警告)框
• 带有换行的警告框
• 确认框
• 提示框
• 实例解析

 

JavaScript 函数

• 函数
• 带有参数的函数
• 带有参数的函数 2
• 返回值的函数
• 带有参数并返回值的函数
• 实例解析

 

JavaScript 循环

• For 循环
• 循环输出 HTML 标题
• While 循环
• Do while 循环
• break 语句
• continue 语句
• 使用 For...In 声明来遍历数组内的元素
  
• 实例解析

 

JavaScript 事件

• onclick事件
• onmouseover 事件
• 实例解析

 

JavaScript 错误处理

• try...catch 语句
• 带有确认框的 try...catch 语句
• onerror 事件
• 实例解析

 

 

高级 JavaScript 实例

 

• 创建一个欢迎 cookie
• 简单的计时
• 另一个简单的计时
• 在一个无穷循环中的计时事件
• 带有停止按钮的无穷循环中的计时事件
• 使用计时事件制作的钟表
• 创建对象的实例
• 创建用于对象的模板

 

 

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 对象

• 被按下的键盘键的keycode？
• 鼠标的坐标？
• 鼠标相对于屏幕的坐标？
• shift键被按下了吗？
• 哪个事件发生了？

Option 和 Select 对象

• 禁用和启用下拉列表
• 获得有下拉列表的表单的ID
• 获得下拉列表的选项数量
• 将下拉列表变成多行列表
• 在下拉列表中选择多个选项
• 弹出下拉列表中被选中的选项
• 弹出下拉列表中被选中的选项的索引
• 改变下拉列表中被选中的选项的文本
• 删除下拉列表中的选项

Table, TableHeader, TableRow, TableData 对象

• 改变表格边框的宽度
• 改变表格的cellpadding和cellspacing
• 指定表格的frame
• 为表格指定规则
• 一个行的innerHTML
• 一个单元格的innerHTML
• 为表格创建一个标题
• 删除表格中的行
• 添加表格中的行
• 添加表格行中的单元格
• 单元格内容水平对齐
• 单元格内容垂直对齐
• 对单个单元格的内容水平对齐
• 对单个单元格的内容垂直对齐
• 改变单元格的内容
• 改变行的内容