目錄
- js
- BOM(瀏覽器物件模型)
- window物件
- window子物件
- navigator物件
- screen物件
- history物件
- location物件
- 彈出框
- 確認框
- 提示框
- 計時事件
- setTimeout(定時器，異步運行)
- setInterval(實時重繪)
- DOM(檔案物件模型)
- 查找標簽
- 直接查找
- 間接查找
- 節點操作
- 創建節點
- 插入節點
- 洗掉節點
- 替換節點
- 屬性節點
- attribute操作
- 查找標簽
- 事件
- 常用事件
- 系結方式
- BOM(瀏覽器物件模型)
- jQuery
- jQuery介紹
- jQuery的優勢
- jQuery初識
js
BOM(瀏覽器物件模型)
- 由上圖可知，window物件是BOM的核心物件，所有物件都是通過它延伸出來的，也可以稱為window的子物件，
- DOM是BOM的一部分
window物件
所有瀏覽器都支持window物件，它表示瀏覽器的介面，
常用window方法
window.innerHeight:：瀏覽器視窗的內部高度window.innerWidth：瀏覽器視窗的內部寬度window.open：打開新視窗window.close：關閉當前視窗
window子物件
navigator物件
navigator.appName // Web瀏覽器全稱
navigator.appVersion // 文本瀏覽器廠商和版本的詳細字串
navigator.userAgent // 客戶端絕大部分資訊
navigator.platform // 瀏覽器運行的作業系統
開頭window可不寫，BOM默認window開頭
screen物件
screen.avallWidth // 可用的螢屏寬度
screen.avallHeight // 可用的螢屏高度
history物件
window.history 物件包含瀏覽器的歷史，瀏覽歷史物件
history.forward() // 前進一頁
history.back() // 后退一頁
location物件
location.href // 獲取URL
location.href="https://www.cnblogs.com/colacheng0930/p/URL" // 跳轉到指定頁面
location.reload // 重新加載頁面
彈出框
可以在js中創建三種訊息框，分別是：警告框確認框和提示框
警告框
用于確保用戶可以得到某些資訊
當警告框出現時，用戶需要點擊確定按鈕才能繼續操作
例：
alert("hello world");
確認框
用于使用戶可以驗證或者接受某些資訊
當確認框出現時，用戶需要點擊確定或者取消按鈕才能繼續操作
confirm("Are you sure")
提示框
用于提示用戶進入頁面前輸入某個值
當提示框出現時，用戶需要輸入某個值，用戶需要點擊確定或者取消按鈕才能繼續操作
如果用戶點擊確認，那么回傳值為輸入的值，如果用戶點擊取消，那么回傳的值為null
prompt("請輸入"，"答案")
計時事件
setTimeout(定時器，異步運行)
var t = setTimeout('js陳述句','毫秒')
setInterval(實時重繪)
// 在指定時間之后執行一次相應函式
var t = setInterval('js陳述句',毫秒)
注意：如果要求在每隔一個固定的時間間隔后就精確地執行某動作，最好使用setInterval；如果不想連續呼叫產生互相干擾的問題，而且需要進行復雜計算的時候，推薦使用setTimeout
DOM(檔案物件模型)
DOM是一套對檔案內容進行結構化展示，并讓js操作html元素而制定的一個規范
由上圖可知，DOM規定html檔案的每個成分都是一個節點
- 檔案節點(
document物件)：代表整個檔案 - 元素節點(
element物件)：代表一個元素(標簽) - 屬性節點(
attribute物件)：代表一個屬性
查找標簽
直接查找
document.getElementById 根據ID獲取一個標簽
document.getElementsByClassName 根據class屬性獲取
document.getElementsByName 根據標簽名獲取標簽合集
間接查找
parentElement 父節點標簽元素
節點操作
創建節點
createElement(標簽名)
var divEle = document.createElement("div")
插入節點
//追加一個子節點(作為最后的子節點)
somenode.appendChild(newnode)
//把增加的節點放到某個節點的前邊
somenode.insertBefore(newnode,某個節點)
例：
var imgEle = document.createElement("img");
imgEle.setAttribute("src", https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1906254523,3408854892&fm=26&gp=0.jpg);
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);
洗掉節點
獲得要洗掉的元素，通過父元素呼叫該方法洗掉
somenode.removeChild(要洗掉的節點)
替換節點
somenode.replaceChild(newnode,某個節點)
屬性節點
獲取文本節點的值
var divEle = document.getElementById('d1')
diveEle.innerText
divEle.innerHTML
設定文本節點的值
var divEle = document.getElementById('d1')
diveEle.innerText='<p>1<p>'
divEle.innerHTML='<p>2<p>'
注意：
diveEle.innerText設定文本節點值只會把代碼寫出來，無法識別js代碼，而divEle.innerHTML可以做到
attribute操作
var divEle = document.getElementById('d1');
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自帶的屬性還可以直接.屬性名來獲取和設定
imgEle.src
imgEle.src="https://www.cnblogs.com/colacheng0930/p/..."
事件
JS是以事件驅動為核心的一門語言
常用事件
onclick 當用戶點擊某個物件時呼叫的事件句柄，
ondblclick 當用戶雙擊某個物件時呼叫的事件句柄，
onfocus 元素獲得焦點， // 練習：輸入框
onblur 元素失去焦點， 應用場景：用于表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange 域的內容被改變， 應用場景：通常用于表單元素,當元素內容被改變時觸發.（select聯動）
onkeydown 某個鍵盤按鍵被按下， 應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交.
onkeypress 某個鍵盤按鍵被按下并松開，
onkeyup 某個鍵盤按鍵被松開，
onload 一張頁面或一幅影像完成加載，
onmousedown 滑鼠按鈕被按下，
onmousemove 滑鼠被移動，
onmouseout 滑鼠從某元素移開，
onmouseover 滑鼠移到某元素之上，
onselect 在文本框中的文本被選中時發生，
onsubmit 確認按鈕被點擊，使用的物件是form，
系結方式
方式一
<div id='d1' onclick='changecolor(this);'>Click Me
<script>
function changecolor(ths) {
ths.style.background-color='green'
}
</script>
</div>
注意：
this是實參，表示觸發事件的當前元素
函式定義程序中的ths為形參
方式二：
<div id='d2'>Click Me
<script>
var divEle2 = document.getElementById('d2')
divEle2.onclick=function() {
this.innerText='啊~'
}
</script>
</div>
jQuery
jQuery介紹
1.jQuery是一個輕量級的，可兼容多瀏覽器的JavaScript庫
2.jQuery是用戶能更方便地處理HTML Document、Events、實作影片效果、方便與Ajax互動，能夠極大的簡化JavaScript編程，
jQuery的優勢
1.jQuery核心的js檔案才幾十kb，不會影響頁面的加載
2.有豐富的jQuery選擇器，用起來非常方便
3.可進行鏈式操作，jQuery可以把多個操作寫在一個代碼里，更加簡潔
4.事件、樣式、影片支持，jQuery簡化了js操作css的代碼
5.Ajax操作支持
6.跨瀏覽器兼容
7.插件擴展開發
jQuery初識
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/170828.html
標籤：JavaScript