?

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

?

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

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

?

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

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

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

Document 對象

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

?

?

基礎(chǔ) JavaScript 實例

?

• 用JavaScript輸出文本
• 用JavaScript改變HTML元素
• 一個外部JavaScript
• 實例解析

?

JavaScript 語句、注釋和代碼塊

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

?

JavaScript 變量

• 聲明一個變量，為它賦值，然后顯示出來
  
• 實例解析

?

JavaScript 條件語句 If ... Else

• If 語句
• If...else 語句
• 隨機鏈接
• Switch 語句
• 實例解析

?

JavaScript 消息框

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

?

JavaScript 函數(shù)

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

?

JavaScript 循環(huán)

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

?

JavaScript 事件

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

?

JavaScript 錯誤處理

• try...catch 語句
• 帶有確認框的 try...catch 語句
• onerror 事件
• 實例解析

?

?

高級 JavaScript 實例

?

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

?

?

JavaScript 應(yīng)用實例

?

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

?

?

JavaScript?對象?實例

?

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

?

String（字符串）對象

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

?

Date（日期）對象

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

?

Array（數(shù)組）對象

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

?

Boolean（布爾）對象

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

?

Math（算數(shù)）對象

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

?

一般

• 通過對象元素使用for...in語句
  
• 更多Math 對象實例在我們的JavaScript Math 對象的參考手冊。

?

?

Browser 對象?實例

?

使用JavaScript來訪問和控制瀏覽器對象實例。

?

Window 對象

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

?

Navigator 對象

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

?

Screen 對象

• 訪問者的屏幕的詳細
  
• 更多的Screen 對象的例子，在我們的JavaScript 參考手冊。

?

History 對象

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

?

Location 對象

• 返回主機名和當前url的端口號
• 返回當前頁面的整個URL
• 返回當前url的路徑名
• 返回當前URL的協(xié)議部分
• 加載個新文檔
• 重新載入當前文檔
• 替代當前文檔
• 跳出框架
  
• 更多Location 對象實例在我們的JavaScript 參考手冊。

?

?

HTML DOM 實例

?

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

Document 對象

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

Anchor 對象

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

Area 對象

• 返回圖像映射某個區(qū)域的替代文字
• 返回圖像映射某個區(qū)域的坐標
• 返回一個區(qū)域的href屬性的錨部分
• 返回的主機名：圖像映射的某個區(qū)域的端口
• 返回圖像映射的某個區(qū)域的hostname
• 返回圖像映射的某個區(qū)域的port
• 返回圖像映射的某個區(qū)域的href
• 返回圖像映射的某個區(qū)域的pathname
• 返回圖像映射的某個區(qū)域的protocol
• 返回一個區(qū)域的href屬性的querystring部分
• 返回圖像映射的某個區(qū)域的shape
• 返回圖像映射的某個區(qū)域的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屬性的值
• 返回一個表單中元素的數(shù)量
• 返回發(fā)送表單數(shù)據(jù)的方法
• 返回一個表單的name
• 返回一個表單target屬性的值
• 重置表單
• 提交表單
  
• 更多 Form 對象實例在我們的JavaScript 參考手冊。

Frame/IFrame 對象

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

Image 對象

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

Event 對象

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

Option 和 Select 對象

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

Table, TableHeader, TableRow, TableData 對象

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

?

?

?

?

總結(jié)

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

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