javascript
JavaScript(四)——面向对象编程、BOM、DOM、表单验证、jQuery
文章目錄
- 1. 面向對象編程
- 2. 操作BOM對象（重點）
- 3. 操作DOM對象（重點）
- 4. 操作表單（驗證）
- 5. jQuery
1. 面向對象編程
（1） 原型對象
javascript、Java、c#。。。。面向對象；javascript有些區別，在JavaScript需要大家換一下思維方式！
- 類: 模板 原型對象
- 對象: 具體的實例
（2）class 繼承
class關鍵字，是在ES6引入的
- 定義一個類，屬性，方法
- 繼承
本質：查看對象原型
- 原型鏈__ proto __:
2. 操作BOM對象（重點）
JavaScript 誕生就是為了能夠讓他在瀏覽器中運行
BOM : 瀏覽器對象模型 使JavaScript有能力與瀏覽器“對話”
- IE 6~11
- Chrome
- Safari
- FireFox
三方
- QQ瀏覽器
- 360瀏覽器
（1）window
window 代表 瀏覽器窗口
（2）navigator （不建議使用）
navigator 封裝了瀏覽器的信息
大多數時候，我們不會使用navigator 對象，因為會被人修改
（3）screen
代表屏幕的尺寸
（4）location
代表當前頁面的URL信息
window.location.href 返回當前頁面的 href (URL)
window.location.hostname 返回 web 主機的域名
window.location.pathname 返回當前頁面的路徑或文件名
window.location.protocol 返回使用的 web 協議（http: 或 https:）
window.location.assign 加載新文檔
（5）document （內容； DOM）
document 代表當前的頁面， HTML DOM文檔樹
- 獲取具體的文檔樹節點
- 獲取 cookie
document.cookie
Cookie 是在您的計算機上存儲在小的文本文件中的數據。
當 web 服務器向瀏覽器發送網頁后，連接被關閉，服務器會忘記用戶的一切。Cookie 是為了解決“如何記住用戶信息”而發明的：①當用戶訪問網頁時，他的名字可以存儲在 cookie 中。②下次用戶訪問該頁面時，cookie 會“記住”他的名字。
（6）history （不建議使用）
history 代表瀏覽器的歷史記錄
history.back() //后退
history.forward() //前進
3. 操作DOM對象（重點）
- HTML DOM（文檔對象模型）
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）
HTML DOM 模型被結構化為對象樹：
對象的 HTML DOM 樹
①更新：更新Dom節點
②遍歷dom節點：得到Dom節點
③刪除：刪除一個Dom節點
④添加：添加一個新的節點
要操作一個Dom節點，就必須要先獲取這個Dom節點
（1）獲取dom節點
這是原生代碼，之后我們盡量都是用jQuery()
（2）更新節點
- 操作文本
id1.innerText=‘456’ 修改文本的值id1.innerHTML=‘123’ 可以解析HTML文本標簽 - 操作css
id1.style.color = ‘yellow’; // 屬性使用 字符串 包裹
id1.style.fontSize=‘20px’; // - 轉 駝峰命名問題
id1.style.padding = ‘2em’
（3）刪除節點
刪除節點的步驟： 先獲取父節點，再通過父節點刪除自己
注意： 刪除多個節點的時候，children 是在時刻變化的，刪除節點的時候一定要注意!
（4）插入節點
獲得了某個Dom節點，假設這個dom節點是空的，我們通過 innerHTML 就可以增加一個元素了，但是這個DOM 節點已經存在元素了，就不能這么干了，會產生覆蓋，這時可使用 追加的方式
（5）創建一個新的標簽，實現插入
執行JavaScript之前
執行JavaScript之后
- insertBefore
要包含的節點.insertBefore(newNode,targetNode)
4. 操作表單（驗證）
JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證，表單的目的：提交信息
表單數據經常需要使用 JavaScript 來驗證其正確性：
- 驗證表單數據是否為空
- 驗證輸入是否是一個正確的email地址
- 驗證日期是否輸入正確
- 驗證表單輸入內容是否為數字型
具體的控件有：
- 文本框 text
- 下拉框 < select >
- 單選框 radio
- 多選框 checkbox
- 隱藏域 hidden
- 密碼框 password
…….
（1）獲取要提交的信息
（2）提交表單 md5 加密密碼，表單優化
5. jQuery
jQuery也就是JavaScript和Query(查詢),即是輔助JavaScript開發的庫。是一個JavaScript的框架，將很多JavaScript的功能進行了封裝，可以將一些本來很復雜的JavaScript變得簡單。降低了開發成本和開發人員的工作量。
jQuery優勢：
1).輕量級
2).強大的選擇器
3).出色的DOM操作封裝
4).可靠的事件處理機制
5).出色的瀏覽器兼容性
6).完善的Ajax支持
7).出色的瀏覽器兼容性等
8).jQuery理念：寫的少，做的多
jQuery庫，里面存在大量的Javascript函數
（1）獲取jQuery
公式 ：$(選擇器).事件(事件函數)
（2）選擇器
（3）事件
頁面對不同訪問者的響應叫做事件
- DOM中常見事件:
舉例
（4）操作DOM - 節點文本操作
- css的操作
- 元素的顯示和隱藏： 本質 display ： none；
- 娛樂測試
總結
以上是生活随笔為你收集整理的JavaScript(四)——面向对象编程、BOM、DOM、表单验证、jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript(三)——函数、变量
- 下一篇： JavaWeb(八)——JSP（Java