day 48

時間 2019-11-20

標籤 day 简体版

原文原文鏈接

目錄css

js

BOM(瀏覽器對象模型)

由上圖可知，window對象是BOM的核心對象，全部對象都是經過它延伸出來的，也能夠稱爲window的子對象。
DOM是BOM的一部分

window對象

全部瀏覽器都支持window對象，它表示瀏覽器的接口。html

經常使用window方法node

window.innerHeight:：瀏覽器窗口的內部高度
window.innerWidth ：瀏覽器窗口的內部寬度
window.open：打開新窗口
window.close：關閉當前窗口

window子對象

navigator對象

navigator.appName       // Web瀏覽器全稱
navigator.appVersion    // 文本瀏覽器廠商和版本的詳細字符串
navigator.userAgent     // 客戶端絕大部分信息
navigator.platform      // 瀏覽器運行的操做系統

開頭window可不寫，BOM默認window開頭jquery

screen對象

screen.avallWidth       // 可用的屏幕寬度
screen.avallHeight      // 可用的屏幕高度

history對象

window.history 對象包含瀏覽器的歷史，瀏覽歷史對象編程

history.forward()   // 前進一頁
history.back()      // 後退一頁

location對象

location.href   // 獲取URL
location.href="URL"     // 跳轉到指定頁面
location.reload     // 從新加載頁面

彈出框

能夠在js中建立三種消息框，分別是：警告框確認框和提示框瀏覽器

警告框app

用於確保用戶能夠獲得某些信息dom

當警告框出現時，用戶須要點擊肯定按鈕才能繼續操做異步

例：函數

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="..."

事件

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>