常用BOM操作 DOM操作 事件 jQuery類庫
BOM操作
JavaScript分為 ECMAScript，DOM，BOM。
BOM DOM 都屬於javascript
BOM（Browser Object Model）是指瀏覽器物件模型，它使 JavaScript 有能力與瀏覽器進行“對話”
常用BOM操作
所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。
*如果文件包含框架（frame 或 iframe 標籤），瀏覽器會為 HTML 文件建立一個 window 物件，併為每個框架建立一個額外的 window 物件。
*沒有應用於 window 物件的公開標準，不過所有瀏覽器都支援該物件。
Window物件是客戶端JavaScript最高層物件之一，由於window物件是其它大部分物件的共同祖先.
所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員
全域性變數是 window 物件的屬性。
全域性函式是 window 物件的方法。
甚至 HTML DOM 的 document 也是 window 物件的屬性之一
在呼叫window物件的方法和屬性時，可以省略window物件的引用。例如：window.document.write()可以簡寫成：document.write()
window物件的子物件有：
- navigator（瀏覽器物件）
- screen（螢幕物件）
- history（瀏覽歷史物件）
- location（地址物件）
window.open()
開啟一個新視窗
window.open('https://www.sogo.com/','','width=800px,left=200px')
以寬800畫素，距離螢幕左邊200畫素 開啟一個新視窗 訪問sogo網站
window.close()
關閉當前瀏覽器視窗
navigator.userAgent
標識自己是一個瀏覽器
/* 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36'*/
history.forward()
前進一頁 相當於瀏覽器左上角的前進
history.back()
後退一頁 相當於瀏覽器左上角的回退
window.location.href
獲取當前頁面所在的網址(返回一個字串) 也可以再加賦值符號和網址跳轉
window.location.href="URL"
例子：location.href='https://www.baidu.com'
通過賦值的方式 跳轉到指定頁面
window.location.reload()
重新整理當前頁面
三種彈出框 alert confirm prompt
-
alert()警告框:
返回undefined。 -
confirm()確認框:
根據不同的選擇會得到true或者false: -
prompt()提示框:
輸入hello world
可以獲取到輸入：
給彈出框設定預設值：
如下：
ps:BOM實現：父子頁面通訊 django後臺管理
定時任務 setTimeout
通過使用 JavaScript，我們可以在一定時間間隔之後來執行程式碼，而不是在函式被呼叫後立即執行。我們稱之為計時事件。使用settimeout()可以實現此操作。
setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名為 t 的變數中。假如你希望取消這個 setTimeout()，你可以使用這個變數名來指定它。
setTimeout() 的第一個引數是含有 JavaScript 語句的字串。這個語句可能諸如 "alert('5 seconds!')"，或者對函式的呼叫，諸如 alertMsg()"。
第二個引數指示從當前起多少毫秒後執行第一個引數（1000 毫秒等於一秒）。
let t = setTimeout(showMsg, 3000) // 3000毫秒之後執行函式
clearTimeout(t) // 取消定時任務
s = setInterval(func, 3000) // 每隔3000毫秒執行一次
clearInterval(s) // 取消迴圈定時任務
在網頁中設定一個彈出框，在你開啟網頁之後等待3秒之後彈出。setTimeout(functi on(){alert()},3000)
迴圈定時 setInterval
在網頁中設定一個彈出框，每3秒彈出一次。setInterval(function(){alert()},3000)
如果不點會一直累加彈出框
取消定時任務 --> 必須要申明變數
let s;
function func(){
alert()
}
s = setInterval(func,1000) // 迴圈執行func函式
function inner(){
clearInterval(s)
}
setTimeout(inner,3000)
/*
1. clearInterval() 方法可取消由 setInterval() 設定的 timeout。
2. clearInterval() 方法的引數必須是由 setInterval() 返回的 ID 值。*/
遇到的問題：
DOM操作
DOM樹：(順藤摸瓜)
在 HTML DOM (Document Object Model) 中 , 每一個元素都是 節點:
- 文件是一個文件節點。
- 所有的HTML元素都是元素節點。
- 所有 HTML 屬性都是屬性節點。
- 文字插入到 HTML 元素是文字節點。are text nodes。
- 註釋是註釋節點。
Document 物件
當瀏覽器載入 HTML 文件, 它就會成為 Document 物件。
Document 物件是 HTML 文件的根節點。
Document 物件使我們可以從指令碼中對 HTML 頁面中的所有元素進行訪問。
提示：Document 物件是 Window 物件的一部分，可通過 window.document 屬性對其進行訪問。
查詢標籤
"""
1.js中變數名的命名風格推薦是駝峰體
2.js程式碼查詢到的標籤如果需要反覆使用可以用變數接收 規律 xxxEle
"""
直接查詢
document.getElementById('d1')
結果就是標籤物件本身 因為同一頁面標籤的id值是唯一的
document.getElementsByClassName('c1')
結果是數組裡面含有多個標籤物件
document.getElementsByTagName('span')
結果是數組裡面含有多個標籤物件
document.getElementsByName("x");
統計有多少個標籤的name屬性等於x 返回數字
getElementsByName：
間接查詢
類似於順藤摸瓜。
依據你手上的標籤物件，去呼叫下面的方法，查詢別的標籤：
parentElement 父節點標籤元素
children 所有子標籤
firstElementChild 第一個子標籤元素
lastElementChild 最後一個子標籤元素
nextElementSibling 下一個兄弟標籤元素
previousElementSibling 上一個兄弟標籤元素
ps:支援連續獲取，得到的標籤還可以繼續呼叫查詢的方法，結果列表不支援負索引。
firstElementChild:
操作節點
建立標籤 createElement
let aEle = document.createElement('a'); // 建立空的a標籤
aEle.href = 'http://www.baidu.com/' //只能新增預設的屬性
操作標籤屬性 setAttribute
setAttribute() //使用此方法可以 相容預設屬性和自定義屬性
getAttribute("age") //獲取標籤內容
removeAttribute("age")
getAttribute獲取自定義屬性值,setAttribute修改：
操作標籤文字 innerText innerHTML
aEle.innerText = '這個很攢勁!'
.innerText 獲取標籤內部所有的文字內容
.innerText = '文字' 替換/設定標籤內部的文字(不識別標籤語法)
.innerHTML 獲取標籤內部所有的標籤包含文字
.innerHTML = '文字' 替換/設定標籤內部的文字(這個方法能識別標籤語法)
innerHTML可以直接修改掉某個標籤：
在設定標籤的時候 innerText和innerHTML都會將被設定的標籤覆蓋 只不過innerText是以文字替代 innerHTML可以識別HTML程式碼，會以HTML程式碼替代原標籤。
新增標籤 appendChild
新增標籤是間接查詢，他要以某個標籤為基準新增：
// js程式碼查詢div標籤並將a追加到div內部
let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(aEle)
// 新增一個p標籤新增到div標籤內部
a = document.createElement('p')
<p></p>
a.innerText='hello world'
'hello world'
div_tag = document.getElementById('url')
<a id="url" age="100">點我</a>
div_tag.appendChild(a)
<p>hello world</p>
a.innerHTML = '<a href="https://www.baidu.com">點我快點我<\a>'
'<a href="https://www.baidu.com">點我快點我<a>'
注意：這個標籤是通過js程式碼臨時建立的,並沒有修改HTML檔案。如果是a標籤點連結跳轉之後，再回到原頁面，你通過程式碼生成的a標籤就會消失。
獲取值操作 value
主要用於獲取表單的輸入。
1.針對使用者輸入的和使用者選擇的標籤
標籤物件.value
當前頁面中是什麼值 這個value就會獲取到什麼值：
對於select標籤，查詢select 別找option
2.針對使用者上傳的檔案資料
標籤物件.files fileList [檔案物件、檔案物件、檔案物件]
標籤物件.files[0] 檔案物件
對於檔案不能使用value方法，而是使用files方法。
嘗試使用value會獲取一個假路徑：
檔案物件：
class與css操作
1.js操作標籤css樣式
標籤物件.style.屬性名(下劃線沒有 變成駝峰體)
obj.style.backgroundColor="red"
2.js操作標籤class屬性
標籤物件.classList //獲取所有樣式類名(字串)
標籤物件.classList.add() //新增樣式類
標籤物件.classList.contains() //存在某個類則返回true，否則返回false
標籤物件.classList.remove() //刪除指定類
標籤物件.classList.toggle() //指定類存在於標籤中就刪除，否則新增
事件
事件可以簡單的理解為通過js程式碼給html標籤繫結一些自定義的功能
常見事件
onclick 當用戶點選某個物件時呼叫的事件控制代碼
onfocus 元素獲得焦點
onblur 元素失去焦點
onchange 域的內容被改變
......
繫結事件的多種方式
<!--繫結事件的方式1--> 在html標籤中繫結事件
<button onclick="showMsg()">快按我</button>
<!--繫結事件的方式2--> 通過js程式碼查詢到標籤後繫結事件（解耦合）
<input type="button" value="快快快" id="d1">
<script>
function showMsg() {
let msg = prompt('你確定要這樣嗎?');
console.log(msg)
}
let inputEle = document.getElementById('d1');
inputEle.onclick = function () {
alert('誰在那裡點我!!!')
}
</script>
//ps：1.選擇節點 2.給節點新增事件 inputEle.onclick
事件函式中的this關鍵字
this指代的就是當前被操作的標籤物件本身
this的作用：this指代當前被觸發事件的標籤物件 有點像self 誰觸發了這個事件函式，this就是誰（標籤）。
如果事件函式內有多層巢狀那麼最好在一開始用變數儲存一下防止後續變化
onload方法
js程式碼放在head報錯：window.onload 讓文件載入完畢之後再執行js
XXX.onload 等待XXX載入完畢之後再執行後面的程式碼
事件實戰案例
// 1.簡易搜尋框
<input type="text" value="遊戲機" id="d1">
<script>
let inputEle = document.getElementById('d1')
inputEle.onfocus = function () {
this.value = ''
}
inputEle.onblur = function () {
this.value = '下次再來喲!'
}
</script>
// 2.登入校驗使用者名稱
<p>username:
<input type="text" id="d1">
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id="d2">
<span style="color: red"></span>
</p>
<button id="suBtn">提交</button>
<script>
// 1.查詢提交按鈕的標籤
subEle = document.getElementById('suBtn')
// 2.給按鈕標籤繫結點選事件
subEle.onclick = function (){
// 3.查詢獲取使用者輸入的標籤並獲取資料
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>
// 3. 省市聯動
省:
<select name="" id="d1">
</select>
市:
<select name="" id="d2">
</select>
<script>
let data = {
"河北": ["廊坊市", "邯鄲市"],
"北京": ["朝陽區", "海淀區"],
"山東": ["威海市", "煙臺市"],
"安徽": ["蕪湖市", "合肥市"],
"上海": ["浦東新區", "靜安區"]
}
// 提前查詢好省和市的select標籤
let proSeEle = document.getElementById('d1');
let citySeEle = document.getElementById('d2');
// 1.獲取所有的省資訊
for (let pro in data) {
// 2.建立option標籤
let proOpEle = document.createElement('option');
// 3.新增文字及屬性
proOpEle.innerText = pro;
proOpEle.setAttribute('value', pro);
// 4.將建立好的option標籤新增到省下拉框中
proSeEle.appendChild(proOpEle)
}
// 5.給省標籤繫結文字域變化事件 onchange
proSeEle.onchange = function () {
citySeEle.innerHTML = ''; // 每次操作市之前清空市資料
// 6.獲取使用者選擇的省資訊 根據省獲取市資訊
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]);
citySeEle.appendChild(cityOpEle)
}
}
</script>
/*
每次新增的標籤沒有清空 只有重新整理頁面才會清空
每次給市新增標籤 都要給市裡面的資訊進行清空
*/
jQuery類庫
"""
IE瀏覽器:前端針對IE有時候需要單獨再編寫一份程式碼
"""
jQuery宗旨：Write less, do more 寫的更少做的更多
jQuery特點：
1.載入速度快
2.選擇器更多更好用
3.一行程式碼走天下
4.支援ajax請求(重點)
5.相容多瀏覽器
推薦使用3.x的jquery：
jQuery下載與配置
jQuery類似python中的模組 由於瀏覽器預設只認識html css js
不認識jquery 需要要使用需要先匯入
官網下載：
或者可以去bootcdn下：https://www.bootcdn.cn/jquery/
準備工作
1.下載核心檔案到本地引入(沒有網路也可以使用)
<script src="jQuery3.6.js"></script>
2.CDN網路資源載入(必須有網路才可以使用)
https://www.bootcdn.cn/
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
# ps:這個min版本是對正常版本進行了壓縮處理 將易讀的變數名變成很短的變數名
# 降低了可讀性 也降低了資料大小
本地配置
直接將jQuery程式碼複製到本地的js檔案中即可：
在head或者body匯入：
CDN網路配置
在head或body引用CDN提供的網址即可：
使用F12檢視jQuery是否載入成功：
pycharm新增模板
每次都要匯入jQuery很麻煩我們可以將其新增到模板：
開啟模板設定：
新增模板：
CDN內容分發網路介紹
'''
兩個地方的距離特別遠，比如國外想訪問國內的網址，需要經過海底光纜，
一個請求經過長途跋涉才能達到伺服器，訪問速度非常慢。
而且還有一個問題，網站的圖片視訊很難訪問。
所以就有一個大型組織CDN，在全國各地建立伺服器
可以將這些視訊圖片交給CDN CDN用伺服器儲存
然後就近原則分發給使用者 而網站要向CDN支付費用。
總的來說就是，CDN幫你儲存資源 使用者訪問時 CDN調最近的伺服器幫你提供一部分資源。
'''
# 大型的CDN也會提供一些免費服務。
jQuece基本使用
jQuery匯入之後需要使用關鍵字才可以使用 (用關鍵字包起來)
jQuery('p') // 會產生jQuery物件
預設的關鍵字就是jQuery但是不好輸入所以會使用符號 >>>: $
jQuery封裝了JS程式碼 讓編寫更簡單 但是有時候JS程式碼更快
js程式碼與jQuery程式碼對比:
// 原生js
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
'red'
pEle.nextElementSibling.style.color = 'green'
//jQuery
$('p').first().css('color','yellow').next().css('color','blue')
標籤物件與jQuery物件
通過$產生jQuery物件：
-
不同的物件能夠呼叫的方法是不同的
在編寫程式碼的時候一定要看清楚手上是什麼物件 -
兩者可以互相轉換
標籤物件轉jQuery物件
$(標籤物件)ps:標籤物件轉jquery物件 $(標籤) 再用jquery物件的方法！
jQuery物件轉標籤物件
jQuery物件[0]ps:把jQuery看成特殊的列表 裡面裝著一個個標籤 用索引就可以將列表中的標籤取出來