javascript 組成部分
????1.ECMAScript
????????javascript的核心解釋器
????2.DOM
????????Document Object Modle????文檔對(duì)象模型
????DOM操作
????????獲取元素
????????改變樣式
????????改變內(nèi)容
????3.BOM
????????瀏覽器對(duì)象模型
????????瀏覽器操作
????????????window.navigator.userAgent
????????????window.open()
????????????window.close()
DOM操作
????獲取元素
????????document.getElementById()
????????????通過id獲取一個(gè)元素
????????document.getElementsByTagName()
????????????通過標(biāo)簽名獲取一組元素
????????document.getElementsByClassName()
????????????通過class獲取一組元素
????????document.querySelector()
????????????獲取第0個(gè)
????????document.querySelectorAll()
????????????獲取一組
節(jié)點(diǎn)===標(biāo)簽===元素
????DOM樹 頁面結(jié)構(gòu)關(guān)系
獲取子節(jié)點(diǎn)
oEle.children
只能獲取一層
獲取父節(jié)點(diǎn)
oEle.parentNode
獲取結(jié)構(gòu)父級(jí)
oEle.offsetParent
獲取定位父級(jí)
獲取兄弟節(jié)點(diǎn)
獲取上一個(gè)兄弟節(jié)點(diǎn)
oEle.previousElementSibling
獲取下一個(gè)兄弟節(jié)點(diǎn)
oEle.nextElementSibling
注意：不兼容低版本IE瀏覽器
獲取首尾子節(jié)點(diǎn)
首子節(jié)點(diǎn)
aEle[0]
oPrent.firstElementChild
尾子節(jié)點(diǎn)
aEle[aEle.length-1]
oPrent.lastElementChild
獲取標(biāo)簽名
oEle.tagName
獲取元素信息
????盒子模型
????????width/height+padding+border
????盒子模型的寬高
????????盒子模型的寬
????????????oEle.offsetWidth
????????盒子模型的高
????????????oEle.offsetHeight
獲取非行間樣式
function getStyle(obj,sName){
return
(obj.currentStyle||getComputedStyle(obj,false))[sName];
}
獲取元素的定位
????oEle.offsetLeft
????oEle.offsetTop
獲取定位父級(jí)
????oEle.offsetParent
????創(chuàng)建
????????document.createElement('標(biāo)簽名');
????插入
????????后面添加
????????父級(jí).appendChild(要添加的子級(jí))
????????某一個(gè)子級(jí)前面插入
????????父級(jí).insertBefore(要插入的元素,插入誰之前);
????刪除
????????父級(jí).removeChild(要?jiǎng)h的元素);
事件
????事件對(duì)象 觸發(fā)事件時(shí)的詳細(xì)信息
需求:
點(diǎn)擊頁面，彈出鼠標(biāo)在頁面中的位置
獲取鼠標(biāo)在可視區(qū)中的位置
ev.clientX 鼠標(biāo)X軸可視區(qū)中的位置
ev.clientY 鼠標(biāo)Y軸可視區(qū)中的位置
獲取鼠標(biāo)在頁面中的位置
ev.pageX 鼠標(biāo)X軸頁面中的位置
ev.pageY 鼠標(biāo)Y軸頁面中的位置
需求:
頁面中有一個(gè)div计盒，當(dāng)鼠標(biāo)移動(dòng)的時(shí)候渴频，div跟著鼠標(biāo)動(dòng)。
新的事件
onmousemove 當(dāng)鼠標(biāo)移動(dòng)的時(shí)候觸發(fā)
拖拽 drag
????事件
onmousedown 鼠標(biāo)按下
獲取鼠標(biāo)在div中的位置
var disX = ev.pageX-oDiv.offsetLeft
var disY = ev.pageY-oDiv.offsetTop
onmousemove 鼠標(biāo)移動(dòng)
改變div的left和top
oDiv.style.left = ev.pageX-disX+'px';
oDiv.style.top = ev.pageY-disY+'px';
onmouseup 鼠標(biāo)抬起
把onmousemove干掉
把onmouseup干掉
問題一：
鼠標(biāo)沒點(diǎn)就懂了
解決：
把onmousemove放在onmousedown里面
問題二:
鼠標(biāo)移動(dòng)過快北启，就移出div了
解決:
1.把div放大 不靠譜卜朗，設(shè)計(jì)和產(chǎn)品會(huì)找你拼命
以下方法靠譜
把onmousemove事件加給document
問題三:
鼠標(biāo)抬起依然能動(dòng)
解決:
正在onmouseup中把onmousemove干掉
問題四:
鼠標(biāo)拖拽的時(shí)候，會(huì)選中頁面內(nèi)容
解決:
在onmousedown中把默認(rèn)事件阻止
return false; 注意一定要放在最后
擴(kuò)展:
限制范圍拖拽
得到l和t
var l = ev.pageX-disX;
var t = ev.pageY-disY;
限制l和t的范圍
if(l<0){
l = 0;
}else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
l = document.documentElement.clientWidth-oDiv.offsetWidth;
}
if(t<0){
t = 0;
}else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
l = document.documentElement.clientHeight-oDiv.offsetHeight;
}
瀏覽器默認(rèn)行為,瀏覽器默認(rèn)事件
????return false;
????鼠標(biāo)右鍵
????????oncontextmenu
????document.documentElement ???? html
????document.body ???? body
獲取可視區(qū)寬高
????可視區(qū)寬度
????????document.documentElement.clientWidth
????可視區(qū)高度
????????document.documentElement.clientHeight
事件冒泡
????取消冒泡
????????ev.cancelBubble = true;
????平時(shí)沒事的情況下不要取消咕村。如果出現(xiàn)問題了才取消
事件綁定(事件監(jiān)聽)
????給同一個(gè)元素加同一個(gè)事件可以加多次场钉。
????解決事件沖突
不兼容低版本瀏覽器
oEle.addEventListener('click', function(){
}, false);
低版本瀏覽器
oEle.attachEvent('onclick',function(){});
切記:
addEventListener中 return false失效了
ev.preventDefault();
不兼容低版本瀏覽器
事件解綁
oEle.removeEventListener('click',function(){},false);
????切記：不能使用匿名函數(shù)
????事件流 事件在程序中的走向
????DOM事件流 高級(jí)瀏覽器的事件流
????????事件冒泡 事件捕獲
????????(冒泡階段) (捕獲階段)
????addEventListener第三個(gè)參數(shù)決定是什么?
????????false 冒泡
????????true 捕獲
????????捕獲階段只有addEventListener第三個(gè)參數(shù)是true才觸發(fā)
????IE事件流 低版本IE的事件流
????????事件冒泡
????????(冒泡階段)
事件流有幾種？
????DOM事件流
????IE事件流
事件流的區(qū)別懈涛？
????DOM事件流有冒泡階段和捕獲階段
????IE事件流有冒泡階段
if的簡(jiǎn)寫
if(條件){
語句
}
簡(jiǎn)寫
條件&&語句;
true&&alert(1);
false&&alert(1);
&&并且逛万，兩邊的條件都是真的才算是真的
true&&alert(1);
true||alert(1); 不能彈
false||alert(1); 能彈
(obj.currentStyle||getComputedStyle(obj,false))[sName]
onmouseover和onmouseout的bug
????onmouseover ????移入
????onmouseout ???? 移出
換事件
????onmouseenter ????移入
????onmouseleave ????移出
事件委托(事件委派、事件派生)
????1.動(dòng)態(tài)創(chuàng)建的元素加事件 ????解決
????2.循環(huán)加事件太麻煩 ????解決
????核心：
????1. 給父級(jí)加事件
????2. 獲取事件源
????????var oSrc = ev.srcElement||ev.target;
window.onload
????當(dāng)所有資源都加載完成之后觸發(fā)
DOMReady ????????????推薦
????當(dāng)html批钠，css宇植，js加載完畢執(zhí)行
????給document添加事件
????????DOMContentLoaded事件????????不兼容低版本瀏覽器
????DOM事件
????????特點(diǎn)以DOM開頭
????????必須用事件綁定
????事件
????????DOM2事件
????????????onclick
????????????onmouseover
????????DOM3事件 ???? 必須用事件綁定
????????????DOMContentLoaded
DOMReady另一種玩法
document.onreadystatechange = function(){
document.readyState
interactive 準(zhǔn)備
complete 完成
需要判斷readyState是否是complete
if(document.readyState=='complete'){
//執(zhí)行我們的代碼
}
};
總結(jié):
javascript的組成部分：
ECMAScript 核心解釋器
DOM 文檔對(duì)象模型
BOM 瀏覽器對(duì)象模型
DOM操作
DOM樹
document
html
head
title
made
style
link
script
body
div
p
a
a
ul
div
div
section
獲取子節(jié)點(diǎn)
父級(jí).children 獲取第一層子節(jié)點(diǎn) √
父級(jí).childNodes 不推薦用 ×
獲取父節(jié)點(diǎn)
獲取結(jié)構(gòu)父級(jí)
子級(jí).parentNode
獲取定位父級(jí)
子級(jí).offsetParent
獲取兄弟節(jié)點(diǎn)
上一個(gè)
obj.previousElementSibling
下一個(gè)
obj.nextElementSibling
獲取首尾子節(jié)點(diǎn)
首
父級(jí).firstElementChild
父級(jí).children[0];
尾
父級(jí).lastElementChild
父級(jí).children[父級(jí).children.length-1]
獲取信息
盒子模型的寬高
obj.offsetWidth 盒子模型寬度
obj.offsetHeight 盒子模型高度
獲取相對(duì)位置
obj.offsetLeft
obj.offsetTop
獲取可視區(qū)寬高
document.documentElement.clientWidth
document.documentElement.clientHeight
--------------------------------------------------------------
事件
事件對(duì)象
包含了事件的詳細(xì)信息
切記：只能獲取鼠標(biāo)和鍵盤的
獲取鼠標(biāo)在可視區(qū)中的位置
ev.clientX/clientY
獲取鼠標(biāo)在頁面中的位置
ev.pageX/ev.pageY
事件綁定(事件監(jiān)聽)
防止事件沖突
obj.addEventListener('sEv',fn,false);
事件解綁
obj.removeEventListener('sEv',fn,false);
阻止默認(rèn)事件
return false;
但是遇到addEventListener不好使.
用: ev.preventDefault&&ev.preventDefault();
事件流:
DOM事件流
冒泡階段 捕獲階段
IE事件流
冒泡階段
onmosueover和onmouseout的bug
解決：
onmouseenter
onmouseleave
事件委托(事件派生，事件委派)
給動(dòng)態(tài)元素加事件
1.給父級(jí)加事件
2.獲取事件源
var oSrc = ev.srcElement||ev.target;
DOMReady
比window.onload快
第一種 推薦
document.addEventListener('DOMContentLoaded',function(){
//你的代碼
},false);
第二種
document.onreadystatechange = function(){
if(document.readyState=='complete'){
//你的代碼
}
};
