DOM操作
- DOM，Document Object Model，文檔對象模型
- 將HTML中的元素當做JS中的對象進行操作，稱爲DOM操作
- window對象表示瀏覽器中打開的窗口，document對象整個文檔
- DOM操作核心：找到對象、添加事件、修改樣式、……
- 在JS中樣式的名字採用的是小駝峯的命名規則，如：backgroundColor
- console.log可以將數據輸出到控制檯，不會影響頁面內容
查找元素
- getElementById：根據ID，獲取的是一個元素
- getElementsByClassName：根據class屬性查找元素，返回的是數組
- getElementsByTagName：根據標籤名查找元素，返回的是數組
- getElementsByName：根據name屬性查找元素，返回的是數組
JS事件
- onclick：單擊
- ondbclick：雙擊
- onfocus：獲取焦點
- onblur：失去焦點
- onmouseover：鼠標移入
- onmouseout：鼠標移出
定時器
- 說明：所謂定時器就是在指定的時間做指定的事情
- 分類：
- 一次性定時器：設置一個時間，時間一到，做指定的事情，之後就銷燬了。
- 設置：var timer = setTimeout(函數,時間)，時間單位是毫秒
- 清除定時器：clearTimeout(timer)
- 週期性定時器：設置一個時間間隔，時間一到，做指定的事情，然後重新計時
- 設置：var timer = setInterval(函數,時間)，時間單位是毫秒
- 清除：clearInterval(timer)
- 一次性定時器：設置一個時間，時間一到，做指定的事情，之後就銷燬了。
獲取樣式
-
兼容獲取方式
var oDiv=document.getElementsByTagName('div')[0] //這種方式只能獲取行內樣式 //alert(oDiv.style.width) //低級瀏覽器 //alert(oDiv.currentStyle['width']) //高級瀏覽器 //alert(getComputedStyle(oDiv,null)['width']) alert(getStyle(oDiv,'width')) //封裝兼容獲取樣式的方法 function getStyle(obj,attr) { if (typeof(obj.currentStyle)=='undefined'){ return getComputedStyle(obj,null)[attr] }else{ return obj.currentStyle[attr] } }
window對象
-
時間：
-
onload：頁面加載完成（包括資源）
-
onscroll：頁面滾動
-
onresize：窗口尺寸發生改變
-
-
屬性：
-
innerWidth：寬度，innerHeight：高度；包括滾動條
-
document：文檔對象
-
document.documentElement.clientWidth：淨寬度
-
document.documentElement.clientHeight：淨高度
-
document.documentElement.scrollTop：向上滾動的距離
-
document.documentElement.scrollLeft：向左滾動的距離
-
說明：以上是H5標準的獲取方式，非H5標準需將documentElement改爲body
-
-
效果展示
-
飄舞的小球
-
完善：當鼠標放到小球上停止飄，離開後繼續飄
-
查找元素
-
示例：
<script>
var wtms=document.getElementById('wtms')
//上一個同胞元素
var prev=wtms.previousElementSibling||wtms.previousSibling
//下一個同胞元素
var next=wtms.nextElementSibling||wtms.nextSibling
//父級元素
var parent=wtms.parentNode
//獲取第一個子元素
var first=parent.firstElementChild||parent.firstChild
//獲取最後一個子元素
var last=parent.lastElementChild||parent.lastChild
//在文檔中連續查找
var uncle=wtms.parentNode.nextElementSibling
alert(uncle.innerText)
</script>
創建與刪除
-
創建元素：div=document.createElement('div')
-
添加元素：div.appendChild(button)
-
刪除元素：grand.removeChild(parent)
事件冒泡
-
說明：當下層元素和上層元素支持同一事件，當上層事件觸發時，下層事件也會觸發，這種事件稱爲事件冒泡
-
取消事件冒泡：ev.cancelBubble=true
事件綁定
-
說明：一個事件觸發時，想要同時調用多個處理函數，直接設置後面的覆蓋前面的，可以通過事件綁定解決。
-
示例：
var div=document.getElementsByTagName('div')[0]
//傳統的方式不行（後面的設置會覆蓋前面的）
// div.οnclick=giveRed
// dv.οnclick=giveGreen
//添加事件綁定
// div.addEventListener('click',giveRed,false)
// div.addEventListener('click',giveGreen,false)
addBind(div,'click',giveRed)
addBind(div,'click',giveGreen)
//移除事件綁定
// div.removeEventListener('click',giveRed,false)
delBind(div,'click',giveRed)
function giveRed(){
alert('紅色')
}
function giveGreen(){
alert('綠色')
}
//兼容綁定事件
function addBind(obj,ev,func)
{
if(obj.addEventListener){
//高級瀏覽器
obj.addEventListener(ev,func,false)
}else{
//低級瀏覽器
obj.attachEvent('on'+ev,func)
}
}
//兼容取消綁定
function delBind(obj,ev,func)
{
if(obj.removeEventListener){
obj.removeEventListener(ev,func,false)
}else{
obj.DataContainerEvent('on'+ev,func)
}
}
事件源元素
-
說明：就是根據事件獲取事件發生的元素，也就是該事件發生在哪個元素上。
-
示例：
function change(e)
{
var ev =e||event
//根據事件獲取發送的元素
var obj=ev.srcElement
//修改樣式
obj.style.background='green'
}
點擊位置
-
說明：點擊事件觸發時，鼠標距離窗口的偏移位置
-
示例：
function dian(e)
{
var ev=e||event
//點擊位置在窗口的座標
console.log(ev.clientX+'x'+ev.clientY)
}
鍵盤事件
-
onkeydown：鍵盤按下事件
-
按鍵的ASCII：ev.keyCode
-
是否按下了特定的組合按鈕
if(ev.altKey==true){ console.log('您按下了alt鍵') }else if(ev.ctrlKey==true){ console.log('您按下了ctrl鍵') }else if(ev.shiftKey==true){ console.log('您按下了shift鍵') } -
禁用右鍵
-
示例：
document.οncοntextmenu=function(){
//返回false時即可禁用右鍵，菜單不會顯示
return false
}
控制跳轉
-
說明：a標籤的onclick事件的返回值可以決定是否跳轉，返回true可以跳轉，返回false不能跳轉
-
示例：
<a href="http://www.baidu.com" οnclick="return tiao()">百度一下</a>
<script type="text/javascript">
function tiao(){
//邏輯處理
//返回false就無法跳轉
return false
}
</script>
各種彈框
-
alert：警告框
-
confirm：確認框，點擊確定返回true，點擊取消返回false
-
prompt：輸入框，點擊確定返回輸入內容，取消返回null
BOM操作
-
說明：將瀏覽器當做對象（window）一樣進行操作，稱爲BOM操作
-
使用：
-
open：打開新頁面
-
close：關閉使用JS創建的窗口
-
history：歷史記錄跳轉
-
back：向後跳轉一個頁面
-
go：可以指定跳轉，正數向前跳，負數向後跳
-
-
location：
-
href：指定當前窗口的url，修改它可以直接實現頁面跳轉
-
-