1、介紹html
BOM(Browser Object Model)是指瀏覽器對象模型,它使 JavaScript 有能力與瀏覽器進行「對話」。node
DOM (Document Object Model)是指文檔對象模型,經過它,能夠訪問HTML文檔的全部元素。瀏覽器
2、window對象app
一、一些經常使用的window方法函數
window.innerHeight; 742 window.innerWidth; 344
window.open();
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
window.close();post
二、window的子對象this
navigator對象spa
navigator.appName // Web瀏覽器全稱 navigator.appVersion // Web瀏覽器廠商和版本的詳細字符串 navigator.userAgent // 客戶端絕大部分信息 navigator.platform // 瀏覽器運行所在的操做系統
navigator.appName; "Netscape" navigator.appVersion; "5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3355.4 Safari/537.36" navigator.userAgent; "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3355.4 Safari/537.36" navigator.platform; "Win32"
三、screen對象操作系統
幕對象,不經常使用。code
一些屬性:
screen.availWidth; 1440 screen.availHeight; 860
四、history對象
window.history 對象包含瀏覽器的歷史。 瀏覽歷史對象,包含了用戶對當前頁面的瀏覽歷史,但咱們沒法查看具體的地址,能夠簡單的用來前進或後退一個頁面。 history.forward() // 前進一頁 history.back() // 後退一頁
五、location對象
window.location 對象用於得到當前頁面的地址 (URL),並把瀏覽器重定向到新的頁面。 經常使用屬性和方法: location.href 獲取URL location.href="URL" // 跳轉到指定頁面 location.reload() 從新加載頁面
location.href; "http://www.cnblogs.com/liwenzhou/p/8011504.html"
六、彈出框
一、警告框:
警告框常常用於確保用戶能夠獲得某些信息。 當警告框出現後,用戶須要點擊肯定按鈕才能繼續進行操做。 alert("ddd");
二、確認框:
確認框用於使用戶能夠驗證或者接受某些信息。
當確認框出現後,用戶須要點擊肯定或者取消按鈕才能繼續進行操做。
若是用戶點擊確認,那麼返回值爲 true。若是用戶點擊取消,那麼返回值爲 false。
三、提示框:
提示框常常用於提示用戶在進入頁面前輸入某個值。
當提示框出現後,用戶須要輸入某個值,而後點擊確認或取消按鈕才能繼續操縱。
若是用戶點擊確認,那麼返回值爲輸入的值。若是用戶點擊取消,那麼返回值爲 null。
代碼演示:
<script> alert("ff") confirm("hhhh") prompt("kkk") </script>
七、計時
setTimeout() 方法會返回某個值。在上面的語句中,值被儲存在名爲 t 的變量中。假如你但願取消這個 setTimeout(),你可使用這個變量名來指定它。
setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。或者對函數的調用,
第二個參數指示從當前起多少毫秒後執行第一個參數(1000 毫秒等於一秒)。
<script> var t=setTimeout(function () {alert("er");},3000); </script>
clearTimeout();q清除
clearTimeout(t)
setInterval()
setInterval() 方法可按照指定的週期(以毫秒計)來調用函數或計算表達式。
setInterval() 方法會不停地調用函數,直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用做 clearInterval() 方法的參數。
返回值
一個能夠傳遞給 Window.clearInterval() 從而取消對 code 的週期性執行的值。
clearInterval()
clearInterval() 方法可取消由 setInterval() 設置的 timeout。
clearInterval() 方法的參數必須是由 setInterval() 返回的 ID 值。
3、DOM
DOM(Document Object Model)是一套對文檔的內容進行抽象和概念化的方法。
當網頁被加載時,瀏覽器會建立頁面的文檔對象模型(Document Object Model)。
HTML DOM 模型被構造爲對象的樹。
DOM標準規定HTML文檔中的每一個成分都是一個節點(node):
JavaScript 能夠經過DOM建立動態的 HTML:
一、查找標籤
直接查找
document.getElementById("l1"); <input id="l1" type="text"> ocument.getElementById 根據ID獲取一個標籤 document.getElementsByClassName 根據class屬性獲取 document.getElementsByTagName 根據標籤名獲取標籤合集
間接查找
var bb=document.getElementById("d3"); undefined bb <div id="d3">d2裏面的d3</div> bb.parentElement; <div id="d2">…</div>
parentElement 父節點標籤元素
children 全部子標籤
firstElementChild 第一個子標籤元素
lastElementChild 最後一個子標籤元素
nextElementSibling 下一個兄弟標籤元素
previousElementSibling 上一個兄弟標籤元素
二、節點操做
1,建立節點
var div1=document.createElement("div");
var div2=document.getElementById("d3"); div1.insertBefore(img1,div2);
最後添加appendChild("標籤名")
在什麼以前添加的時候,必定要注意,div1是包含div2的
注意:快速添加簡單的標籤
div1.innerHTML="<p>hnh<p\>";
二、刪除節點
var div1=document.getElementById("d2"); undefined var aa=div1.fi undefined var aa=div1.firstElementChild; undefined div1.firstElementChild; <div id="d3">d2裏面的d3</div> div1.removeChild(aa); <div id="d3">d2裏面的d3</div>
三、替換節點
父標籤.replaceChild(替換,被替換);
四、屬性節點
獲取文本節點的值: var divEle = document.getElementById("d1") divEle.innerText divEle.innerHTML
設置文本節點的值: var divEle = document.getElementById("d1") divEle.innerText="1" divEle.innerHTML="<p>2</p>
attribute操做
var divEle = document.getElementById("d1"); undefined divEle.setAttribute("age","18") undefined divEle.getAttribute("age") "18" divEle.removeAttribute("age"); undefined divEle.getAttribute("age") "18" "18"
五、獲取值操做
var iEle = document.getElementById("d3"); undefined console.log(iEle.value);
前提是,適用於,
className 獲取全部樣式類名(字符串)
classList.remove(cls) 刪除指定類 classList.add(cls) 添加類
classList.contains(cls) 存在返回true,不然返回false
classList.toggle(cls) 存在就刪除,不然添加
var ss=document.getElementsByTagName; undefined ss ƒ getElementsByTagName() { [native code] } var ss=document.getElementsByTagName("div"); undefined ss HTMLCollection [div.c1.c2.c3] ss[0]; <div class="c1 c2 c3">div</div> ss[0].className; "c1 c2 c3" ss[0].classList; DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"] ss[0].classList.remove("c3"); undefined ss[0].classLis; undefined ss[0].classList; DOMTokenList(2) ["c1", "c2", value: "c1 c2"] ss[0].classList.add("d3"); undefined ss[0].classList; DOMTokenList(3) ["c1", "c2", "d3", value: "c1 c2 d3"] ss[0].classList.contains("c1"); true ss[0].classList.toggle("c1"); false ss[0].classList; DOMTokenList(2) ["c2", "d3", value: "c2 d3"]
指定CSS操做 obj.style.backgroundColor="red" JS操做CSS屬性的規律: 1.對於沒有中橫線的CSS屬性通常直接使用style.屬性名便可。如: obj.style.margin obj.style.width obj.style.left obj.style.position 2.對含有中橫線的CSS屬性,將中橫線後面的第一個字母換成大寫便可。如: obj.style.marginTop obj.style.borderLeftWidth obj.style.zIndex obj.style.fontFamily obi=類名【0】..style.marginTop
四,事件
經常使用事件:
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素得到焦點。 // 練習:輸入框 onblur 元素失去焦點。 應用場景:用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證. onchange 域的內容被改變。 應用場景:一般用於表單元素,當元素內容被改變時觸發.(select聯動) onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並鬆開。 onkeyup 某個鍵盤按鍵被鬆開。 onload 一張頁面或一幅圖像完成加載。 onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。 onselect 在文本框中的文本被選中時發生。 onsubmit 確認按鈕被點擊,使用的對象是form。
定時器:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="l1" type="text"> <input id="start" type="button" value="開始"> <input id="end" type="button" value="暫停"> <script> var t; function foo() { var timestr=new Date(); var timenow=timestr.toLocaleString(); var l11=document.getElementById("l1"); l11.value=timenow; } var button1=document.getElementById("start"); button1.onclick=function () { foo(); if (t===undefined){ t=setInterval(foo,1000); } }; var button2=document.getElementById("end"); button2.onclick=function () { clearInterval(t); t=undefined; } </script> </body> </html>
綁定方式一:
<div id="d1" onclick="changeColor(this);">點我</div> <script> function changeColor(ths) { ths.style.backgroundColor="green"; } </script>
注意:
this是實參,表示觸發事件的當前元素。
函數定義過程當中的ths爲形參。
二:
<div id="d2">點我</div> <script> var divEle2 = document.getElementById("d2"); divEle2.onclick=function () { this.innerText="呵呵"; } </script>