文章目錄

• 1. 面向?qū)ο缶幊?/li>
• 2. 操作BOM對象（重點）
• 3. 操作DOM對象（重點）
• 4. 操作表單（驗證）
• 5. jQuery

1. 面向?qū)ο缶幊?/h1>

（1） 原型對象
javascript、Java、c#。。。。面向?qū)ο?#xff1b;javascript有些區(qū)別，在JavaScript需要大家換一下思維方式！

• 類: 模板 原型對象
• 對象: 具體的實例
  
  

（2）class 繼承
class關鍵字，是在ES6引入的

• 定義一個類，屬性，方法
  
• 繼承
  本質(zhì)：查看對象原型
  
  
• 原型鏈__ proto __:
  

2. 操作BOM對象（重點）

JavaScript 誕生就是為了能夠讓他在瀏覽器中運行

BOM : 瀏覽器對象模型 使JavaScript有能力與瀏覽器“對話”

• IE 6~11
• Chrome
• Safari
• FireFox

三方

• QQ瀏覽器
• 360瀏覽器

（1）window
window 代表 瀏覽器窗口

（2）navigator （不建議使用）
navigator 封裝了瀏覽器的信息

大多數(shù)時候，我們不會使用navigator 對象，因為會被人修改
（3）screen
代表屏幕的尺寸

（4）location
代表當前頁面的URL信息
window.location.href 返回當前頁面的 href (URL)
window.location.hostname 返回 web 主機的域名
window.location.pathname 返回當前頁面的路徑或文件名
window.location.protocol 返回使用的 web 協(xié)議（http: 或 https:）
window.location.assign 加載新文檔

（5）document （內(nèi)容； DOM）
document 代表當前的頁面， HTML DOM文檔樹

• 獲取具體的文檔樹節(jié)點
  
  
  - 獲取 cookie
  document.cookie
  Cookie 是在您的計算機上存儲在小的文本文件中的數(shù)據(jù)。
  當 web 服務器向瀏覽器發(fā)送網(wǎng)頁后，連接被關閉，服務器會忘記用戶的一切。Cookie 是為了解決“如何記住用戶信息”而發(fā)明的：①當用戶訪問網(wǎng)頁時，他的名字可以存儲在 cookie 中。②下次用戶訪問該頁面時，cookie 會“記住”他的名字。
  （6）history （不建議使用）
  history 代表瀏覽器的歷史記錄
  history.back() //后退
  history.forward() //前進

3. 操作DOM對象（重點）

• HTML DOM（文檔對象模型）
  當網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（Document Object Model）
  HTML DOM 模型被結(jié)構(gòu)化為對象樹：
  對象的 HTML DOM 樹
  
  ①更新：更新Dom節(jié)點
  ②遍歷dom節(jié)點：得到Dom節(jié)點
  ③刪除：刪除一個Dom節(jié)點
  ④添加：添加一個新的節(jié)點
  要操作一個Dom節(jié)點，就必須要先獲取這個Dom節(jié)點
  （1）獲取dom節(jié)點
  
  
  這是原生代碼，之后我們盡量都是用jQuery()

（2）更新節(jié)點

• 操作文本
  id1.innerText=‘456’ 修改文本的值id1.innerHTML=‘123’ 可以解析HTML文本標簽
• 操作css
  id1.style.color = ‘yellow’; // 屬性使用 字符串 包裹
  id1.style.fontSize=‘20px’; // - 轉(zhuǎn) 駝峰命名問題
  id1.style.padding = ‘2em’
  （3）刪除節(jié)點
  刪除節(jié)點的步驟： 先獲取父節(jié)點，再通過父節(jié)點刪除自己
  
  
  注意： 刪除多個節(jié)點的時候，children 是在時刻變化的，刪除節(jié)點的時候一定要注意!
  （4）插入節(jié)點
  獲得了某個Dom節(jié)點，假設這個dom節(jié)點是空的，我們通過 innerHTML 就可以增加一個元素了，但是這個DOM 節(jié)點已經(jīng)存在元素了，就不能這么干了，會產(chǎn)生覆蓋，這時可使用 追加的方式
  
  

（5）創(chuàng)建一個新的標簽，實現(xiàn)插入

執(zhí)行JavaScript之前

執(zhí)行JavaScript之后

• insertBefore
  要包含的節(jié)點.insertBefore(newNode,targetNode)
  
  

4. 操作表單（驗證）

JavaScript 可用來在數(shù)據(jù)被送往服務器前對 HTML 表單中的這些輸入數(shù)據(jù)進行驗證，表單的目的：提交信息
表單數(shù)據(jù)經(jīng)常需要使用 JavaScript 來驗證其正確性：

• 驗證表單數(shù)據(jù)是否為空
• 驗證輸入是否是一個正確的email地址
• 驗證日期是否輸入正確
• 驗證表單輸入內(nèi)容是否為數(shù)字型

具體的控件有：

• 文本框 text
• 下拉框 < select >
• 單選框 radio
• 多選框 checkbox
• 隱藏域 hidden
• 密碼框 password
  …….
  （1）獲取要提交的信息
  
  
  （2）提交表單 md5 加密密碼，表單優(yōu)化
  
  

5. jQuery

jQuery也就是JavaScript和Query(查詢),即是輔助JavaScript開發(fā)的庫。是一個JavaScript的框架，將很多JavaScript的功能進行了封裝，可以將一些本來很復雜的JavaScript變得簡單。降低了開發(fā)成本和開發(fā)人員的工作量。

jQuery優(yōu)勢：
1).輕量級
2).強大的選擇器
3).出色的DOM操作封裝
4).可靠的事件處理機制
5).出色的瀏覽器兼容性
6).完善的Ajax支持
7).出色的瀏覽器兼容性等
8).jQuery理念：寫的少，做的多

jQuery庫，里面存在大量的Javascript函數(shù)
（1）獲取jQuery
公式 ：$(選擇器).事件(事件函數(shù))


（2）選擇器

（3）事件
頁面對不同訪問者的響應叫做事件

• DOM中常見事件:
  
  舉例
  
  
  （4）操作DOM
• 節(jié)點文本操作
  
• css的操作
  
• 元素的顯示和隱藏： 本質(zhì) display ： none；
  
• 娛樂測試
  

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結(jié)

以上是生活随笔為你收集整理的JavaScript(四)——面向对象编程、BOM、DOM、表单验证、jQuery的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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