BOM操作、DOM操作、jQuery類庫

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

BOM操作、DOM操作、jQuery類庫

一、BOM操作

BOM（Browser Object Model）是指瀏覽器物件模型，它使JavaScript有能力與瀏覽器進行對話

1.window物件

瀏覽器相關配置
1.window.open('https://www.sogo.com/','','width=1000px,left=200px')
  開啟新視窗，window.open('url地址','開啟方式(可以為空)','視窗的大小')
2.window.innerWidth        # 瀏覽器視窗的內部寬度
3.window.innerWidth        # 瀏覽器視窗的內部高度
4.window.close()           # 關閉當前視窗

2.navigator物件

判定使用者使用的瀏覽器，包含了瀏覽器相關資訊
1.navigator.appName           # web瀏覽器的全稱
'Netscape'
2.navigator.appVersion        # web瀏覽器廠商和版本的詳細字串
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
3.navigator.userAgent         # 客戶端絕大部分資訊
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
4.navigator.platform          # 瀏覽器所在的作業系統
'Win32'

3.history物件

瀏覽歷史物件
1.history.forward             # 向前一頁
ƒ forward() { [native code] }
2.history.back                # 向後一頁
ƒ back() { [native code] }

4.location物件

window.location用於獲得當前頁面的地址(url),並把瀏覽器重定向到新的頁面
1.window.location.href         # 獲取url
'https://www.sogou.com/'
2.window.location.href='https://www.sogo.com/'    # 跳轉到指定的頁面
3.window.location.reload()      # 重新載入頁面

5.彈出框

1.警告框，確保使用者可以得到一些資訊
window.alert('有沒有好好學習')
undefined
2.確認框，當確認框出現後，使用者需要點選確定或者取消按鈕才能繼續進行操作。
window.confirm('(*❦ω❦)確定嗎？')
true
3.提示框，使用者需要輸入某個值，然後點選確認或者取消按鈕才能繼續操作
 window.prompt('請輸入你今天想要做的事情')
'學習，學習，學習，學習，學習，學習，沒有了'

6.計時相關操作

通過js我們可以在一定時間間隔之後來執行程式碼，而不是在函式被呼叫後立即執行，我們稱之為計時事件
1.setTimeout()       # 只執行一次 
function showMsg() {
        alert('好好學習哦')
    }
let t = setTimeout(showMsg,3000)    # 多少毫秒起執行第一個引數
2.clearTimeout()      #  清除定時器
clearTimeout(t)
3.setInterval()         #  無限次執行
4.clearInterval()       #  清除定時器
clearInterval() 方法可取消由 setInterval() 設定的 timeout。
clearInterval() 方法的引數必須是由 setInterval() 返回的 ID 值。

let s;
function func() {
    alert('好好學習')
}
s = setInterval(func,3000)


function inner() {
    clearInterval(s)

}
setInterval(inner,2000)

二、DOM操作

1.DOM操作簡介

DOM(Document Object Model) 是指文件物件模型，通過它可以訪問HTML文件的所有元素
DOM操作是通過js程式碼來操作標籤 我們需要先學習如何查詢標籤之後才能給標籤繫結一些JS程式碼(DOM操作)

2.查詢標籤

html程式碼：
<body>
    <span>span</span>
    <span>span</span>
    <div id="d1">div
        <span>div>span</span>
        <p class="c1">div>p
            <span>div>p>span</span>
        </p>
        <span>div>span</span>
    </div>
    <span>span</span>
    <span>span</span>
</body>

直接查詢：
1.document.getElementById('d1')   # 獲取標籤物件本身
<div id="d1">…</div>
2.document.getElementsByClassName('c1')    # 結果是數組裡面含有多個標籤物件
HTMLCollection [p.c1]
3.document.getElementsByTagName('span')   # 結果是數組裡面含有多個標籤物件
HTMLCollection(7) [span, span, span, span, span, span, span]

間接查詢:
1.parentElement        父節點標籤元素
2.children             所有子標籤
3.firstElementChild     第一個子標籤元素
4.lastElementChild      最後一個子標籤元素
5.nextElementSibling     下一個兄弟標籤元素
6.previousElementSibling     上一個兄弟標籤元素

3.操作節點

js程式碼查詢到的標籤如果需要反覆使用可以用變數接收 規律 xxxEle

1.建立節點
let aEle = document.createElement('div')
2.新增節點
var imgEle = document.createElement('img')
undefined
imgEle.setAttribute("src","1.png")
var d1Ele = document.getElementById('d1')
d1Ele.appendChild(imgEle)     # 新增節點
3.js程式碼操作標籤屬性
let a1Ele = document.createElement('a')
a1Ele.href = 'https://www.sogo.com/'
a1Ele.setAttribute("age",18)
undefined
a1Ele.getAttribute("age")
'18'
4.刪除節點
a1Ele.removeAttribute("age")
undefined
5.js程式碼操作標籤文字
a1Ele.innerText="好好學習"
'好好學習'
6.js程式碼查詢div標籤並將a追加到div內部
let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(a1Ele)

文字節點的操作方法：
.innerText            # 獲取標籤內部所有文字內容
.innerText = '文字'    #  替換標籤內部的文字
.innerHTML             # 獲取標籤內部所有的標籤包含文字
.innerHTML = '內容'    # 獲取標籤內部所有的標籤包含內容

4.獲取值操作

1.針對使用者輸入的和使用者選擇的標籤
語法：標籤物件.value
適用於input,select,textarea
2.針對使用者上傳的檔案資料
標籤物件.files     fileList  [檔案物件，檔案物件，檔案物件]
標籤物件.files[0]  檔案物件

html程式碼：
 <form action="">
      <p>
        username:
        <input type="text" id="d1">
      </p>
      <p>
        choice:
        <select name="" id="pro">
          <option value="乾飯">63336</option>
          <option value="學習">64444</option>
          <option value="好好學習">66655</option>
        </select>
      </p>
      <p>
        file:
        <input type="file" id="file">
      </p>

    </form>

5.類屬性操作

1.獲取當前標籤所有類的值
標籤物件.classList
2.判斷當前標籤是否有這個屬性
標籤物件.classList.contains()    # 存在返回true，否則返回false
3.給當前標籤新增一個類值
標籤物件.classList.add()
4.刪除當前標籤指定類的屬性
標籤物件.classList.remove()
5.存在就刪除，否則新增
標籤物件.classList.toggle()

6.樣式操作

標籤物件.style.backgroundColor = 'red'  # 將標籤的背景色設定為紅色
js操作css屬性的規律
1.對於沒有橫線的css屬性一般使用style.屬性名就好了
obj.style.margin
obj.style.width
obj.style.left
obj.style.postion
2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫即可
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

三、事件

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作（action），比如當用戶點選某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，這些屬性可插入 HTML 標籤來定義事件動作。
事件簡單來說就是給html綁定了一些額外的功能，能夠觸發js程式碼的執行

1.常用事件

onclick       # 當用戶點選某個物件時呼叫事件
ondblclick    # 當用戶雙擊某個物件時呼叫的事件

onfocus       # 元素獲取焦點
onblur        # 元素失去焦點    應用場景：用於表單驗證,使用者離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange       # 域的內容被改變  應用場景：通常用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      # 某個鍵盤的鍵被按下
onkeypress     # 某個鍵盤按鍵被按下並鬆開。
onkeyup        # 某個鍵盤按鍵被鬆開。
onload         # 頁面載入完成
onmousedown    # 滑鼠按鈕被按下
onmousemove    # 滑鼠按鈕被移動
onmouseout     # 滑鼠從某元素移開
onmouseover    # 滑鼠移到某元素之上

onselect       # 在文字框被選中時發生
onsubmit       # 確認按鈕被點選，使用的物件是form。

2.繫結事件的兩種方式

<input type="button" value="點我" onclick="func()">
     <button id="d1">點一哈</button>
<script>
  //繫結事件的方法1：提前寫好函式，標籤內部指定函式呼叫，設定點選屬性
  function func(){
    alert('點到了')
  }

  //繫結事件的方法2：先查詢標籤，然後批量繫結
  let btnEle = document.getElementById('d1')
  btnEle.onclick = function () {
    alert('又點到了')
  }
</script>

3.事件中的關鍵字this

<input type="button" value="點我" onclick="func()">
 <button id="d1">點一哈</button>
<script>
  //繫結事件的方法1：提前寫好函式，標籤內部指定函式呼叫，設定點選屬性
  function func(){
    alert('點到了')
    console.log(this)
  }
  //this 是當前操作的document文件

  //繫結事件的方法2：先查詢標籤，然後批量繫結
  let btnEle = document.getElementById('d1')
  btnEle.onclick = function () {
    alert('又點到了')
    console.log(this)
  }

搜尋框例項：
 <input type="text" value="要點嗎" id="d1">
<script>
        let inputEle = document.getElementById('d1')
        inputEle.onfocus = function () {
            this.value = ''
        }
        inputEle.onblur = function () {
            this.value = '歡迎下次再來'
        }
    </script>

4.window.onload

當我們給頁面上的元素繫結事件的時候，必須等到文件載入完畢。因為我們無法給一個不存在的元素繫結事件。

window.onload事件在檔案載入過程結束的時候觸發。此時，文件中的所有物件都位於DOM中，並且所有影象，指令碼，連結和子框架都已完成載入。

注意：.onload()函式存在覆蓋現象。
<script>
   window.onload = function(){
       頁面js程式碼
   }
</script>

5.js之校驗使用者資料

<p>username:
    <input type="text" id="d1">
    <span style="color: lightblue"></span>
</p>
<p>password:
    <input type="text" id="d2">
    <span style="color: lightblue"></span>
</p>
<button id="suBtn">提交</button>
<script>
    //查詢按鈕標籤
    let btnEle = document.getElementById('suBtn')
    //繫結單擊事件
    btnEle.onclick = function () {
        let userNameEle = document.getElementById('d1')
        let passWordEle = document.getElementById('d2')
        if(userNameEle.value === 'jason'){
            userNameEle.nextElementSibling.innerText = '使用者名稱不能為jason'
        }
        if(passWordEle.value === '123'){
            passWordEle.nextElementSibling.innerText = '密碼不能為123'
        }
    }
</script>

6.JS事件之省市聯動

<body>
省：
<select name="" id="d1">
</select>
市：
<select name="" id="d2">
</select>
<script>
    let data = {
        '浙江': ['金華', '杭州'],
        '上海': ['浦東', '青浦'],
        '海南': ['三亞', '海口'],
        '四川': ['成都', '德陽'],
        '安徽': ['池州', '合肥']
    }
    let proEle  = document.getElementById('d1');
    let cityEle  = document.getElementById('d2');
    //獲取所有省的資訊
    for (let pro in data){
        //建立option
        let proOpEle = document.createElement('option');
        //新增文字及屬性
        proOpEle.innerText = pro;
        proOpEle.setAttribute('value',pro);
        // 4.將建立好的option標籤新增到省下拉框中
        proEle.appendChild(proOpEle)
    }
    // 5.給省標籤繫結文字域變化事件 onchange
    proEle.onchange = function () {
        //每次操作之前先清空之前的
        cityEle.innerHTML = '';
        let targetProData = this.value;
        let cityDataList = data[targetProData]
        // 7.迴圈獲取每一個市資訊 建立option標籤 新增到市下拉框中
        for(let i=0;i<cityDataList.length;i++){
            let cityOpEle = document.createElement('option')
            cityOpEle.innerText = cityDataList[i]
            cityOpEle.setAttribute('value',cityDataList[i])
            cityEle.appendChild(cityOpEle)
        }
    }
</script>
</body>

四、jQuery

1.jQuery

jQuery是一個輕量級的、相容多瀏覽器的java庫
jQuery使使用者能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax互動，能夠極大簡化JavaScript程式設計。

2.jQuery的優勢

1.一款輕量級的JS框架。jQuery核心js檔案才幾十kb，不會影響頁面載入速度。
2.豐富的DOM選擇器,jQuery的選擇器用起來很方便，比如要找到某個DOM物件的相鄰元素，JS可能要寫好幾行程式碼，而jQuery一行程式碼就搞定了，再比如要將一個表格的隔行變色，jQuery也是一行程式碼搞定。
3.鏈式表示式。jQuery的鏈式操作可以把多個操作寫在一行程式碼裡，更加簡潔。
4.事件、樣式、動畫支援。jQuery還簡化了js操作css的程式碼，並且程式碼的可讀性也比js要強。
5.Ajax操作支援。jQuery簡化了AJAX操作，後端只需返回一個JSON格式的字串就能完成與前端的通訊。
6.跨瀏覽器相容。jQuery基本相容了現在主流的瀏覽器，不用再為瀏覽器的相容問題而傷透腦筋。
7.外掛擴充套件開發。jQuery有著豐富的第三方的外掛，例如：樹形選單、日期控制元件、圖片切換外掛、彈出視窗等等基本前端頁面上的元件都有對應外掛，並且用jQuery外掛做出來的效果很炫，並且可以根據自己需要去改寫和封裝外掛，簡單實用。

3.類庫的匯入

1.CDN加速服務(在head內的script中加入)
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

2.jQuery官網下載後本地匯入
<script src="jquery.js"></script>

注意：使用jQuery必須要先匯入，本質就是js檔案

"""
jQuery()  >>>  $()
"""