BOM操作、DOM操作與jQuery類庫

阿新 • • 發佈：2022-12-07

昨日內容回顧

JS基礎介紹

JavaScript是一門前端語言，只是長得像Java，實際與Java無關。
JS基本使用
- 變數與常量
  
  定義變數使用var或let關鍵字，定義常量使用const關鍵字，常量不可修改繫結關係。
- 基本資料型別
  
  數字(Number)、字元(String)、物件之陣列(Array)、物件之自定義物件(Object)
- 運算子
  
  四則運算、邏輯運算子
- 流程控制
  
  if語句、switch語句、while迴圈語句
- 函式
  
  使用function關鍵字定義、自帶arguments關鍵字接收所有引數
- 內建物件
  
  時間物件、JSON物件

今日內容概要

BOM操作
DOM操作
jQuery類庫

今日內容詳細

BOM操作

BOM全稱為Bowser of model，即瀏覽器物件模型，BOM操作就是對瀏覽器視窗的操作。

對瀏覽器視窗的操作使用window關鍵字，表意清晰的情況下window可忽略，直接寫指令。

window.open(?url,?target,?features)  //開啟新視窗，指定網址、引用名及視窗樣式(尺寸、邊距等)
window.close()  //關閉當前視窗
window.navigator.userAgent  //獲取瀏覽器版本
window.history.forward()  //歷史記錄前進一頁
window.history.back()  //歷史記錄後退一頁
window.location.href  //獲取當前頁面所在的網址，也可以再加賦值符號和網址跳轉
window.location.reload()  //重新整理當前頁面
window.alert()  //警告框
window.confirm()  //確認框，有返回值，true或者false
window.prompt()  //提示框，有返回值，為提示框中輸入的結果
window.setTimeout(handler,?timeout,...arguments)
//設定定時任務，指定需要做的操作、倒計時時間(毫秒)，如果操作需要傳引數，最後填入操作需要的引數
window.clearTimeout()  //清除定時任務
window.setInterval(handler,?timeout,...arguments)
//設定迴圈任務，指定需要做的操作、間隔時間(毫秒)，如果操作需要傳引數，最後填入操作需要的引數。迴圈任務在結束之前會一直執行，若生成提示框則會造成提示框的重疊。
window.clearInterval()  //清除迴圈任務

DOM操作

DOM全稱為Document of model，即文件物件模型，通過DOM可以訪問HTML檔案內的所有元素。

查詢標籤

關鍵字為get後加查詢標籤的方式：

document.getElementById()  //通過id
document.getElementsByClassName()  //通過類名
document.getElementsByTagName()  //通過標籤名

對於一個標籤元素，通過點的形式可以檢視相關的標籤元素：

parentElement            父節點標籤元素
children                 所有子標籤
firstElementChild        第一個子標籤元素
lastElementChild         最後一個子標籤元素
nextElementSibling       下一個兄弟標籤元素
previousElementSibling   上一個兄弟標籤元素

生成及編輯標籤

let aEle = document.createElement('a')  //建立新標籤
aEle.setAttribute('name','value')  //設定屬性值
aEle.getAttribute()  //檢視屬性值
aEle.removeAttribute()  //刪除屬性
通過點的形式可以檢視標籤的屬性，也可通過賦值改變標籤對應屬性，通過.appendChild可以為標籤新增子標籤。

操作CSS與class

1.js操作標籤css樣式
	標籤物件.style.屬性名 = ''
2.js操作標籤class屬性
	標籤物件.classList.add()
  	標籤物件.classList.contains()
    標籤物件.classList.remove()
    標籤物件.classList.toggle()  //在有與無之間切換

事件

常見的事件有onclick(點選)、onfocus(聚焦)、onblur(模糊)、onchange(變化)。

事件的本質為標籤的屬性，通過為事件關鍵字繫結(賦值)對應的函式實現對應的操作。可以直接在標籤內新增對應事件，但一般推薦在最下方script標籤內通過點的形式賦值。

this指代的就是當前被操作的標籤物件本身，隨著所在this所在位置變化其指代內容也會變化。

XXX. onload 等待XXX載入完畢之後再執行後面的程式碼。

jQuery類庫

jQuery原則：write less，do more.

特點

載入速度快。
選擇器更多更好用。
一行程式碼走天下。
支援ajax請求(重點)。
相容多瀏覽器。

載入方法

通過script內的src屬性匯入HTML檔案，又分為本地載入及CDN(內容分發網路)載入。

本地載入，直接將對應程式碼下載至本地，離線也可使用。
CDN載入，適用範圍更廣，但速度稍慢。

使用方法

dollar($)符號之後直接書寫jQuery語句。

js程式碼與jQuery程式碼對比
    let pEle = document.getElementsByTagName('p')[0]
    undefined
    pEle.style.color = 'red'
    'red'
    pEle.nextElementSibling.style.color = 'green'

    $('p').first().css('color','yellow').next().css('color','blue')

標籤物件與jQuery物件

1.不同的物件能夠呼叫的方法是不同的，在編寫程式碼的時候一定要看清楚手上是什麼物件。

2.兩者可以互相轉換：
標籤物件轉jQuery物件
$(標籤物件)
jQuery物件轉標籤物件
jQuery物件[0]