Bom
概念
BOM : Browser Object Model 瀏覽器對象模型,描述與瀏覽器進行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用javascript,那么 BOM則無疑才是真正的核心。
BOM提供了很多對象,用於訪問瀏覽器的功能,這些功能與任何網頁內容無關。
window對象
窗口高度
var a = window.innerheight
窗口寬度
var a = window。innerwidth
打開一個新的頁面
open (https://www.baidu.com/)
關閉一個頁面
在當前頁面輸入 close() 即可關閉
location對象
獲取url
location.href (注意不需要加())
轉到其他頁面
location.href = "url" 其中url 是你要打開的頁面
重新加載
location.reload()
彈出框
alret(“文本”) 警告框 只有確定
confirm("文本") 當你點擊確定時返回true 當你點擊取消時返回 false
prompt("提示語1","提示語2") 會彈出一個帶有input的框,當你再input框中輸入文本時,會被拿到
計時器(重點)
計時器分為兩種
第一種時隔多少秒做什么事情(只會執行一次),格式 var a = setTimeout(函數(js語句), 毫秒),其中必須時函數,1000毫秒等於一秒。一般來說都會定義一個變量來接受這個計時器,方便清除。
// setTimeout設置
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout設置 clearTimeout(timer);
第二種是每隔多少秒進行一次(可以執行多次),格式類似setTimeout ,其中clearInterval(timer)返回的數值是計時器在cpu的地址
// 每隔一段時間就執行一次相應函數 var timer = setInterval(function(){console.log(123);}, 3000) // 取消setInterval設置 clearInterval(timer);
Dom
概念:文檔對象模型(Document Object Model,簡稱DOM),是W3C組織推薦的處理可擴展標志語言的標准編程接口。在網頁上,組織頁面(或文檔)的對象被組織在一個樹形結構中,用來表示文檔中對象的標准模型就稱為DOM。
dom樹結構:
查找對象
直接查找有三種,主要是通過id,class,和標簽名字來獲取,其中id獲取到的是一個,其余兩個獲取的是數組。要拿到具體的值可以通過[“索引”]來取值。
document.getElementById("文本文檔中的id") document.getElementsByClassName("文本文檔中的屬性名") document.getElementByTagName("文本文檔中的標簽名字")
間接查找(通過直接查找找到一個具體的標簽,然后再通過間接查找找到想要的標簽)兒子標簽會將所有的兒子標簽拿到,並返回一個數組,父親標簽同理。
var a = document.getElementById("d1") var a1 = a.parentElemen // 父級標簽 var a2 =a.children//兒子標簽 var a3 = a.lastElementChild//最后一個兒子標簽 var a4 = a.firstElementChild//第一個兒子標簽 var a5 = a.nextElementSibling//下一個兄弟標簽 var a6 = a.previousElementSibling//上一個兄弟標簽
創建節點
其中括號里面的填寫是各個標簽的類型,可以通過.class的屬性名進行屬性設置。
var a = document.createElement("a");
添加節點
給父級標簽添加一個兒子標簽 格式 父級標簽 . appendChild(新建的標簽)
var a1 = document.getElementById("d1"); a1.appendChild(a);
插入節點
在a1的兒子標簽中,插入一個a標簽,位置再a2的前面 格式:父級標簽.insertBefore(新建的標簽,在誰的前面,兩個必須都是兒子標簽)
a1.insertBefore(a,a2)
刪除節點
刪除父級標簽下的某一個標簽 格式:父級標簽 . removeChild(要刪除的標簽)
a1.removeChild(a)
替換節點
替換父級標簽下的一個標簽 格式: 父級標簽 . replaceChild (新的標簽,要替換的標簽)
a1.replaceChild(a,a2)
文本操作
主要分innerHTML和innerText。兩個格式都是 標簽 . innerText(innerHTML) = "要設置的文字"
兩者的區別在於前者可以識別自己手寫的標簽內容,而后者只能寫純文本。同時都是將原先的內容替換掉
a.innerText = "<div>你好啊</div>" //<div>你好啊</div>
a.innerHTML ="<div>你好啊</div>" // 你好啊
attribute操作
var divEle = document.getElementById("d1"); divEle.setAttribute("age","18") #比較規范的寫法 divEle.getAttribute("age") divEle.removeAttribute("age") // 自帶的屬性還可以直接.屬性名來獲取和設置,如果是你自定義的屬性,是不能通過.來獲取屬性值的 imgEle.src imgEle.src="..."
value操作
主要是用於拿到標簽的值 適用於1.input 2.select 3.textarea
var a_text = a.value
Class操作
className 獲取所有樣式類名(字符串)
首先獲取標簽對象
標簽對象.classList.remove(cls) 刪除指定類
classList.add(cls) 添加類
classList.contains(cls) 存在返回true,否則返回false
classList.toggle(cls) 存在就刪除,否則添加,toggle的意思是切換,有了就給你刪除,如果沒有就給你加一個
css操作
JS操作CSS屬性的規律:
1.對於沒有中橫線的CSS屬性一般直接使用style.屬性名即可。
2.對含有中橫線的CSS屬性,將中橫線后面的第一個字母換成大寫即可。
事件
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素獲得焦點。 // 練習:輸入框 onblur 元素失去焦點。 應用場景:用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證. onchange 域的內容被改變。 應用場景:通常用於表單元素,當元素內容被改變時觸發.(select聯動) onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最后一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並松開。 onkeyup 某個鍵盤按鍵被松開。 onload 一張頁面或一幅圖像完成加載。 onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。 onselect 在文本框中的文本被選中時發生。 onsubmit 確認按鈕被點擊,使用的對象是form。
綁定方式有兩種:
第一種:不常用 函數中的ths是一個形參,可以隨便寫
<div id = "i1" onclick="f1(this)"> 測試 </div> <script> function f1(ths) { ths.style.backgroundColor = "red"//點擊之后背景色變成紅色 }
第二種:實現了css 與js的分離 比較常用
<div id = "i2"> 測試 </div> <script> var d2 = document.getElementById("i2") d2.onclick =function () { this.style.backgroundColor = "red" } </script>