JS與前端的互動

BOM操作

BOM是指瀏覽器物件模型，它使js能夠與瀏覽器互動
window.open('網址','','開啟的視窗尺寸')  開啟新視窗
window.close()  關閉當前視窗
navigator物件
	navigator.userAgent  用來向瀏覽器表明身份的，通常用在爬蟲領域
history物件
    history.forward()   前進一頁
    history.back()  後退一頁
    
window.location.href  獲取當前頁面所在網址，也可以再加賦值符號和網址跳轉
window.location.reload  重新整理當前頁面
alert()  警告框
confirm()  確認框
prompt()  提示框
 

計時相關操作

setTimeout(函式名，時長，引數)  設定一個定時任務(時長用的毫秒)
clearTimeout()  取消任務(需要用一個變數接受上面的，然後將變數作為引數傳進來)
    
setInterval(函式名，時長)  每隔多長時間執行一次(迴圈定時任務)
clearInterval()  取消(需要用一個變數接受上面的，然後將變數作為引數傳進來)

DOM操作

是文件操作模型，通過它可以訪問HTML文件的所有元素

標籤操作

直接查詢標籤

'''
1.js中變數名的命名風格推薦使用駝峰式
2.js程式碼查詢到的標籤如果需要反覆使用是以使用變數接收
'''
1.id查詢
    document.getElementById('id值')  # 結果是標籤本身
2.通過類名查詢
    document.getElementsByClassName('類名')  # 結果是陣列，裡面含有標籤本身
3.通過標籤名查詢
    document.getElementsByTagName('標籤名')  # 結果是陣列，裡面含有多個標籤
 

間接查詢標籤

間接查詢標籤需要有一個父標籤參照物，基於該參照物可以直接用點的方式操作下面的方法
parentElement            父節點標籤元素
children                 所有子標籤
firstElementChild        第一個子標籤元素
lastElementChild         最後一個子標籤元素
nextElementSibling       下一個兄弟標籤元素
previousElementSibling   上一個兄弟標籤元素

節點操作

1.js程式碼建立標籤
	let aEle = document.createElement('a')
2.js程式碼操作標籤屬性
    aEle.href = 'https://www.jpmn5.cc/'  // 只能新增預設的屬性
    setAttribute()  //相容預設屬性和自定義屬性
    getAtt9ribute()  // 獲取屬性
    removeAttribute()  // 刪除屬性
3.js程式碼操作標籤文字
    aEle.innerText = '許木學長'  // 設定\替換標籤內部的文字，不識別標籤語法
    aEle.innerText  // 獲取標籤內部所有的文字內容

    aEle.innerHEML  // 獲取標籤內部所有的標籤包括文字
    aEle.innerHTML = '文字'  // 替換\設定標籤內的文字，識別標籤語法
 

獲取值的操作

1.針對使用者輸入和使用者選擇的標籤
    標籤物件.value
2.針對使用者上傳的檔案資料
    標籤物件.files   // fileList [檔案物件、檔案物件]
    標籤物件.files[0]  // 檔案物件

class與css操作

1. js操作標籤css樣式
    標籤物件.style.屬性名
2. js操作標籤class屬性
    標籤物件.classList.add()  // 新增類
    標籤物件.classList.contains()  // 類存在返回true,否則返回false
    標籤物件.classList.remove()  // 刪除類
    標籤物件.classList.toggle()  // 類存在則刪除否則新增

事件

我們可以簡單地將事件理解為通過js程式碼給html標籤繫結一些自定義的功能
常見事件
    onclick    當用戶點選某個物件時呼叫的事件控制代碼
    onfocus    元素獲得焦點
    onblur     元素失去焦點
    onchange   域的內容被改變
    
繫結事件的方式一
    <button onclick="showMsg()">方式一</button>
    <script>
            function showMsg() {
                let msg = prompt('這是方式一?');
                console.log(msg)
            }
	</script>

繫結事件的方式二 
    <input type="button" value="方式二" id="d1">
        <script>
            let inputEle = document.getElementById('d1');
            inputEle,onclick = function () {
                alert('這是方式二')
            }

jQuery類庫

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

準備工作
	1.下載核心檔案到本地引入(沒有網路也可以使用)
    	<script src="jQuery3.6.js"></script>
 	2.CDN網路資源載入(必須有網路才可以使用)
    	https://www.bootcdn.cn/
      # CDN就是內容分發網路 
jQuery匯入之後需要使用關鍵字才可以使用
	預設的關鍵字就是jQuery，為了使用方便其被簡化為 $
    
jQuery封裝了JS程式碼 讓編寫更簡單 但是有時候JS程式碼更快

標籤物件與jQuery物件

1.不同的物件能夠呼叫的方法是不同的
	在編寫程式碼的時候一定要看清楚手上是什麼物件
2.兩者可以互相轉換
	標籤物件轉jQuery物件		
    	$(標籤物件)
 	jQuery物件轉標籤物件
    	jQuery物件[0]