?

From：https://www.runoob.com/js/js-examples.html

?

JavaScript 和 HTML DOM?參考手冊(cè)（：https://www.runoob.com/jsref/jsref-tutorial.html）

• 所有內(nèi)置的JavaScript對(duì)象
• 所有瀏覽器對(duì)象
• 所有HTML DOM對(duì)象

?

HTML DOM?Document?對(duì)象（：https://www.runoob.com/jsref/dom-obj-document.html）

在 HTML DOM (Document Object Model) 中 , 每一個(gè)元素都是?節(jié)點(diǎn):

• 文檔是一個(gè)文檔節(jié)點(diǎn)。
• 所有的HTML元素都是元素節(jié)點(diǎn)。
• 所有 HTML 屬性都是屬性節(jié)點(diǎn)。
• 文本插入到 HTML 元素是文本節(jié)點(diǎn)。are text nodes。
• 注釋是注釋節(jié)點(diǎn)。

Document 對(duì)象

• 當(dāng)瀏覽器載入 HTML 文檔, 它就會(huì)成為?Document 對(duì)象。
• Document 對(duì)象是 HTML 文檔的根節(jié)點(diǎn)。
• Document 對(duì)象使我們可以從腳本中對(duì) HTML 頁面中的所有元素進(jìn)行訪問。
• 提示：Document 對(duì)象是 Window 對(duì)象的一部分，可通過 window.document 屬性對(duì)其進(jìn)行訪問。

?

?

基礎(chǔ) JavaScript 實(shí)例

?

• 用JavaScript輸出文本
• 用JavaScript改變HTML元素
• 一個(gè)外部JavaScript
• 實(shí)例解析

?

JavaScript 語句、注釋和代碼塊

• JavaScript 語句
• JavaScript 代碼塊
• JavaScript 單行注釋
• JavaScript 多行注釋
• 使用單行注釋來防止執(zhí)行
• 使用多行注釋來防止執(zhí)行
• 實(shí)例解析

?

JavaScript 變量

• 聲明一個(gè)變量，為它賦值，然后顯示出來
  
• 實(shí)例解析

?

JavaScript 條件語句 If ... Else

• If 語句
• If...else 語句
• 隨機(jī)鏈接
• Switch 語句
• 實(shí)例解析

?

JavaScript 消息框

• Alert(警告)框
• 帶有換行的警告框
• 確認(rèn)框
• 提示框
• 實(shí)例解析

?

JavaScript 函數(shù)

• 函數(shù)
• 帶有參數(shù)的函數(shù)
• 帶有參數(shù)的函數(shù) 2
• 返回值的函數(shù)
• 帶有參數(shù)并返回值的函數(shù)
• 實(shí)例解析

?

JavaScript 循環(huán)

• For 循環(huán)
• 循環(huán)輸出 HTML 標(biāo)題
• While 循環(huán)
• Do while 循環(huán)
• break 語句
• continue 語句
• 使用 For...In 聲明來遍歷數(shù)組內(nèi)的元素
  
• 實(shí)例解析

?

JavaScript 事件

• onclick事件
• onmouseover 事件
• 實(shí)例解析

?

JavaScript 錯(cuò)誤處理

• try...catch 語句
• 帶有確認(rèn)框的 try...catch 語句
• onerror 事件
• 實(shí)例解析

?

?

高級(jí) JavaScript 實(shí)例

?

• 創(chuàng)建一個(gè)歡迎 cookie
• 簡單的計(jì)時(shí)
• 另一個(gè)簡單的計(jì)時(shí)
• 在一個(gè)無窮循環(huán)中的計(jì)時(shí)事件
• 帶有停止按鈕的無窮循環(huán)中的計(jì)時(shí)事件
• 使用計(jì)時(shí)事件制作的鐘表
• 創(chuàng)建對(duì)象的實(shí)例
• 創(chuàng)建用于對(duì)象的模板

?

?

JavaScript 應(yīng)用實(shí)例

?

• javascript 幻燈片代碼(含自動(dòng)播放)
• CSS 日歷樣式
• JavaScript 彈窗
• JavaScript 圖片彈窗
• JavaScript Lightbox
• javascript 搜索框自動(dòng)提示
• JavaScript 表格數(shù)據(jù)搜索
• JavaScript 實(shí)現(xiàn)列表按字母排序
• JavaScript 實(shí)現(xiàn)表格單列按字母排序
• JavaScript 動(dòng)畫應(yīng)用實(shí)例
• JavaScript 進(jìn)度條實(shí)例
• JavaScript 百分比進(jìn)度條
• JavaScript/CSS 實(shí)現(xiàn)提示彈窗
• JavaScript/CSS 實(shí)現(xiàn)待辦事項(xiàng)列表(To Do List)
• HTML CSS, JavaScript 計(jì)算器
• HTML、CSS、JavaScript 實(shí)現(xiàn)下拉菜單效果
• JS/CSS 各種操作信息提示效果
• JS/CSS 在屏幕底部彈出消息(snackbar)
• JS/CSS 登錄表單
• JS/CSS 注冊(cè)表單
• JavaScript 計(jì)算器(倒計(jì)時(shí))
• JS/CSS 菜單按鈕切換(打開/關(guān)閉)
• JS/CSS 手風(fēng)琴動(dòng)畫效果
• JS/CSS 帶圖標(biāo)手風(fēng)琴動(dòng)畫效果
• JS/CSS 選項(xiàng)卡
• JS/CSS 選項(xiàng)卡 – 淡入效果
• JS/CSS 選項(xiàng)卡 – 設(shè)置默認(rèn)選項(xiàng)
• JS/CSS 選項(xiàng)卡 – 設(shè)置關(guān)閉按鈕
• JS/CSS 選項(xiàng)卡 – 垂直方向
• JS/CSS 選項(xiàng)卡 – 幻燈片效果
• JS/CSS 響應(yīng)式頂部導(dǎo)航樣式實(shí)例
• JS/CSS 側(cè)邊欄動(dòng)畫實(shí)例
• JS/CSS 側(cè)邊欄動(dòng)畫實(shí)例 - 頁面主體內(nèi)容向右移動(dòng)
• JS/CSS 側(cè)邊欄動(dòng)畫實(shí)例 - 頁面主體內(nèi)容黑色透明背景
• JS/CSS 全屏幕側(cè)邊欄
• JS/CSS 側(cè)邊欄 - 無動(dòng)畫效果
• JS/CSS 右側(cè)側(cè)邊欄
• JS/CSS 全屏幕導(dǎo)航 – 從上到下動(dòng)畫
• JS/CSS 點(diǎn)擊式下拉菜單
• JS/CSS 點(diǎn)擊式下拉菜單 - 右對(duì)齊
• JS/CSS 點(diǎn)擊式導(dǎo)航欄下拉菜單
• JS/CSS 下拉菜單可進(jìn)行搜索/過濾操作
• JS 聯(lián)想、自動(dòng)補(bǔ)齊功能
• JavaScript 按下回車(Enter)鍵觸發(fā)按鈕點(diǎn)擊事件
• JavaScript 創(chuàng)建一個(gè)菜單搜索
• Javascript 判斷是移動(dòng)端瀏覽器還是 PC 端瀏覽器
• JavaScript 判斷是否微信瀏覽器

?

?

JavaScript?對(duì)象?實(shí)例

?

使用內(nèi)置的JavaScript對(duì)象實(shí)例。

?

String（字符串）對(duì)象

• 返回字符串的長度
• 為字符串添加樣式
• 返回字符串中指定文本首次出現(xiàn)的位置 - indexOf()方法
• 查找字符串中特定的字符，若找到，則返回該字符 - match() 方法
• 替換字符串中的字符 - replace()
  
• 更多的字符串對(duì)象的例子，在我們的JavaScript String 對(duì)象參考手冊(cè)。

?

Date（日期）對(duì)象

• 使用 Date() 方法來返回今天的日期和時(shí)間
• 使用 getTime() 計(jì)算從1970年到今天有多少毫秒
• 使用 setFullYear() 設(shè)置具體的日期
• 使用 toUTCString() 把當(dāng)日的日期（根據(jù) UTC）轉(zhuǎn)換為字符串
• 使用 getDay() 來顯示星期，而不僅僅是數(shù)字
• 顯示一個(gè)鐘表
  
• 更多的Date（日期）對(duì)象的例子，在我們的JavaScript Date 對(duì)象參考手冊(cè)。

?

Array（數(shù)組）對(duì)象

• 創(chuàng)建數(shù)組
• 合并兩個(gè)數(shù)組 - concat()
• 合并三個(gè)數(shù)組 - concat()
• 用數(shù)組的元素組成字符串 - join()
• 刪除數(shù)組的最后一個(gè)元素 - pop()
• 數(shù)組的末尾添加新的元素 - push()
• 反轉(zhuǎn)一個(gè)數(shù)組中的元素的順序 - reverse()
• 刪除數(shù)組的第一個(gè)元素 - shift()
• 從一個(gè)數(shù)組中的選擇元素 - slice()
• 數(shù)組排序（按字母順序升序）- sort()
• 數(shù)字排序（按數(shù)字順序升序）- sort()
• 數(shù)字排序（按數(shù)字順序降序）- sort()
• 在數(shù)組的第2位置添加一個(gè)元素 - splice()
• 轉(zhuǎn)換數(shù)組到字符串 -toString()
• 在數(shù)組的開頭添加新元素 - unshift()
  
• 更多的Array（數(shù)組）對(duì)象的例子，在我們的JavaScript Array 對(duì)象的參考手冊(cè)。

?

Boolean（布爾）對(duì)象

• 檢查邏輯值
  
• 更多的Boolean（布爾）對(duì)象對(duì)象的例子，在我們的JavaScript Boolean 對(duì)象的參考手冊(cè)。

?

Math（算數(shù)）對(duì)象

• 使用 round() 對(duì)數(shù)字進(jìn)行舍入
• 使用 random() 來返回 0 到 1 之間的隨機(jī)數(shù)
• 使用 max() 來返回兩個(gè)給定的數(shù)中的較大的數(shù)
• 使用 min() 來返回兩個(gè)給定的數(shù)中的較小的數(shù)
• 攝氏度與華氏轉(zhuǎn)換

?

一般

• 通過對(duì)象元素使用for...in語句
  
• 更多Math 對(duì)象實(shí)例在我們的JavaScript Math 對(duì)象的參考手冊(cè)。

?

?

Browser 對(duì)象?實(shí)例

?

使用JavaScript來訪問和控制瀏覽器對(duì)象實(shí)例。

?

Window 對(duì)象

• 彈出一個(gè)警告框
• 彈出一個(gè)帶折行的警告框
• 彈出一個(gè)確認(rèn)框，并提醒訪客點(diǎn)擊的內(nèi)容
• 彈出一個(gè)提示框
• 點(diǎn)擊一個(gè)按鈕時(shí)，打開一個(gè)新窗口
• 打開一個(gè)新窗口，并控制其外觀
• 打開多個(gè)新窗口
• 確保新的窗口沒有獲得焦點(diǎn)
• 確保新的窗口獲得焦點(diǎn)
• 關(guān)閉新窗口
• 檢查新的窗口是否已關(guān)閉
• 返回新窗口的名字
• 傳輸一些文本到源（父）窗口
• 相對(duì)于當(dāng)前位置移動(dòng)新窗口
• 移動(dòng)新窗口到指定位置
• 打印當(dāng)前頁面
• 用像素指定窗口大小
• 指定窗口大小
• 由指定的像素?cái)?shù)滾動(dòng)內(nèi)容
• 滾動(dòng)到指定內(nèi)容處
• 一個(gè)簡單的時(shí)鐘
• 用setTimeout() 和 clearTimeout()設(shè)置和停止定時(shí)器
• 用setInterval() 和 clearInterval()設(shè)置和停止定時(shí)器
  
• 更多的Window 對(duì)象的例子，在我們的JavaScript? 參考手冊(cè)。

?

Navigator 對(duì)象

• 訪問者的瀏覽器的詳細(xì)
  
• 更多的Navigator 對(duì)象的例子，在我們的JavaScript? 參考手冊(cè)。

?

Screen 對(duì)象

• 訪問者的屏幕的詳細(xì)
  
• 更多的Screen 對(duì)象的例子，在我們的JavaScript 參考手冊(cè)。

?

History 對(duì)象

• 返回一個(gè)url的歷史清單
• 創(chuàng)建一個(gè)后退按鈕
• 創(chuàng)建一個(gè)前進(jìn)按鈕
• 從url的歷史清單轉(zhuǎn)到指定的url
  
• 更多的History 對(duì)象對(duì)象的例子，在我們的JavaScript 參考手冊(cè)。

?

Location 對(duì)象

• 返回主機(jī)名和當(dāng)前url的端口號(hào)
• 返回當(dāng)前頁面的整個(gè)URL
• 返回當(dāng)前url的路徑名
• 返回當(dāng)前URL的協(xié)議部分
• 加載個(gè)新文檔
• 重新載入當(dāng)前文檔
• 替代當(dāng)前文檔
• 跳出框架
  
• 更多Location 對(duì)象實(shí)例在我們的JavaScript 參考手冊(cè)。

?

?

HTML DOM 實(shí)例

?

使用內(nèi)置 JavaScript 的對(duì)象實(shí)例。

Document 對(duì)象

• 使用 document.write() 輸出文本
• 使用 document.write() 輸出 HTML
• 返回文檔中錨的數(shù)目
• 返回文檔中第一個(gè)錨的 innerHTML
• 返回文檔中表單的數(shù)目
• 返回文檔中第一個(gè)表單的名字
• 返回文檔中的圖像數(shù)
• 返回文檔中第一個(gè)圖像的ID
• 返回文檔中的鏈接數(shù)
• 返回文檔中的第一個(gè)鏈接的ID
• 返回文檔中的所有cookies的名稱/值對(duì)
• 返回加載的文檔的服務(wù)器域名
• 返回文檔的最后一次修改時(shí)間
• 返回加載的當(dāng)前文檔的URL
• 返回文檔的標(biāo)題
• 返回文檔的完整的URL
• 打開輸出流，向流中輸入文本
• write() 和 writeln()的不同
• 用指定的ID彈出一個(gè)元素的innerHTML
• 用指定的Name彈出元素的數(shù)量
• 用指定的tagname彈出元素的數(shù)量
  
• 更多的 Document 對(duì)象的例子，在我們的JavaScript? 參考手冊(cè)。

Anchor 對(duì)象

• 返回和設(shè)置鏈接的charset屬性
• 返回和設(shè)置鏈接的href屬性
• 返回和設(shè)置鏈接的hreflang屬性
• 返回一個(gè)錨的名字
• 返回當(dāng)前的文件和鏈接的文檔之間的關(guān)系
• 改變鏈接的target屬性
• 返回一個(gè)鏈接的type屬性的值
  
• 更多的 Anchor 對(duì)象的例子，在我們的JavaScript? 參考手冊(cè)。

Area 對(duì)象

• 返回圖像映射某個(gè)區(qū)域的替代文字
• 返回圖像映射某個(gè)區(qū)域的坐標(biāo)
• 返回一個(gè)區(qū)域的href屬性的錨部分
• 返回的主機(jī)名：圖像映射的某個(gè)區(qū)域的端口
• 返回圖像映射的某個(gè)區(qū)域的hostname
• 返回圖像映射的某個(gè)區(qū)域的port
• 返回圖像映射的某個(gè)區(qū)域的href
• 返回圖像映射的某個(gè)區(qū)域的pathname
• 返回圖像映射的某個(gè)區(qū)域的protocol
• 返回一個(gè)區(qū)域的href屬性的querystring部分
• 返回圖像映射的某個(gè)區(qū)域的shape
• 返回圖像映射的某個(gè)區(qū)域的target的值
  
• 更多的 Area 對(duì)象的例子，在我們的JavaScript 參考手冊(cè)。

Base 對(duì)象

• 返回頁面上所有相對(duì)URL的基URL
• 返回頁面上所有相對(duì)鏈接的基鏈接
  
• 更多的 Base 對(duì)象對(duì)象的例子，在我們的JavaScript 參考手冊(cè)。

Button 對(duì)象

• 當(dāng)點(diǎn)擊完button不可用
• 返回一個(gè)button的name
• 返回一個(gè)button的type
• 返回一個(gè)button的value
• 返回一個(gè)button所屬表的ID
  
• 更多 Button 對(duì)象實(shí)例在我們的JavaScript 參考手冊(cè)。

Form 對(duì)象

• 返回一個(gè)表單中所有元素的value
• 返回一個(gè)表單acceptCharset屬性的值
• 返回一個(gè)表單action屬性的值
• 返回表單中的enctype屬性的值
• 返回一個(gè)表單中元素的數(shù)量
• 返回發(fā)送表單數(shù)據(jù)的方法
• 返回一個(gè)表單的name
• 返回一個(gè)表單target屬性的值
• 重置表單
• 提交表單
  
• 更多 Form 對(duì)象實(shí)例在我們的JavaScript 參考手冊(cè)。

Frame/IFrame 對(duì)象

• 對(duì)iframe排版
• 改變一個(gè)包含在iframe中的文檔的背景顏色
• 返回一個(gè)iframe中的frameborder屬性的值
• 刪除iframe的frameborder
• 改變iframe的高度和寬度
• 返回一個(gè)iframe中的longdesc屬性的值
• 返回一個(gè)iframe中的marginheight屬性的值
• 返回一個(gè)iframe中的marginwidth屬性的值
• 返回一個(gè)iframe中的name屬性的值
• 返回和設(shè)置一個(gè)iframe中的scrolling屬性的值
• 改變一個(gè)iframe的src
  
• 更多 Frame/IFrame 對(duì)象實(shí)例在我們的JavaScript 參考手冊(cè)。

Image 對(duì)象

• 對(duì)image排版
• 返回image的替代文本
• 給image加上border
• 改變image的高度和寬度
• 設(shè)置image的hspace和vspace屬性
• 返回image的longdesc屬性的值
• 創(chuàng)建一個(gè)鏈接指向一個(gè)低分辨率的image
• 返回image的name
• 改變image的src
• 返回一個(gè)客戶端圖像映射的usemap的值
  
• 更多 Image 對(duì)象實(shí)例在我們的JavaScript 參考手冊(cè)。

Event 對(duì)象

• 被按下的鍵盤鍵的keycode？
• 鼠標(biāo)的坐標(biāo)？
• 鼠標(biāo)相對(duì)于屏幕的坐標(biāo)？
• shift鍵被按下了嗎？
• 哪個(gè)事件發(fā)生了？

Option 和 Select 對(duì)象

• 禁用和啟用下拉列表
• 獲得有下拉列表的表單的ID
• 獲得下拉列表的選項(xiàng)數(shù)量
• 將下拉列表變成多行列表
• 在下拉列表中選擇多個(gè)選項(xiàng)
• 彈出下拉列表中被選中的選項(xiàng)
• 彈出下拉列表中被選中的選項(xiàng)的索引
• 改變下拉列表中被選中的選項(xiàng)的文本
• 刪除下拉列表中的選項(xiàng)

Table, TableHeader, TableRow, TableData 對(duì)象

• 改變表格邊框的寬度
• 改變表格的cellpadding和cellspacing
• 指定表格的frame
• 為表格指定規(guī)則
• 一個(gè)行的innerHTML
• 一個(gè)單元格的innerHTML
• 為表格創(chuàng)建一個(gè)標(biāo)題
• 刪除表格中的行
• 添加表格中的行
• 添加表格行中的單元格
• 單元格內(nèi)容水平對(duì)齊
• 單元格內(nèi)容垂直對(duì)齊
• 對(duì)單個(gè)單元格的內(nèi)容水平對(duì)齊
• 對(duì)單個(gè)單元格的內(nèi)容垂直對(duì)齊
• 改變單元格的內(nèi)容
• 改變行的內(nèi)容

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的菜鸟教程 之 JavaScript 实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。