javascript的組成部分燃逻？
ECMAScript 核心解釋器
DOM 文檔對象模型
BOM 瀏覽器對象模型
DOM
DOM樹
html頁面的結(jié)構(gòu)關(guān)系
獲取子節(jié)點
父級.children 獲取第一層子節(jié)點
獲取父節(jié)點
結(jié)構(gòu)父級
oEle.parentNode
定位父級
oEle.offsetParent
創(chuàng)建節(jié)點
document.createElement('標(biāo)簽名');
插入
父級.appendChild(新節(jié)點);
從父級的后面添加
父級.insertBefore(新節(jié)點,在誰之前插入);
在某個節(jié)點之前插入
刪除
父級.removeChild(子節(jié)點);
事件
事件對象
包含了事件觸發(fā)的詳細信息
ev 高版本瀏覽器
event 低版本瀏覽器
oBtn.onclick = function(ev){
var oEvent = ev||event;
oEvent.clientX
oEvent.clientY
oEvent.pageX
oEvent.pageY
};
事件綁定(事件監(jiān)聽)
oEle.addEventListener('sEv', fn, false);
高版本
oEle.attachEvent('onsEv', fn);
低版本
定義函數(shù)
function addEvent(obj, sEv, fn){
if(obj.addEventListener){
obj.addEventListener(sEv,fn,false);
}else{
obj.attachEvent('on'+sEv,fn);
}
}
調(diào)用
addEvent(oBtn,'click',function(){
alert(1);
});
事件解綁
定義函數(shù)
function removeEvent(obj, sEv, fn){
if(obj.removeEventListener){
obj.removeEventListener(sEv,fn,false);
}else{
obj.detachEvent('on'+sEv,fn);
}
}
調(diào)用
removeEvent(oBtn,'click',function(){
alert(1);
});
匿名函數(shù)不能被解綁
原因：匿名函數(shù)雖然長得一樣嘿辟，但是不是一個
var show = new Function();
function show(){}
事件流
DOM事件流
冒泡階段 捕獲階段
IE事件流
冒泡階段
取消冒泡
ev.cancelBubble = true;
默認事件淀衣、默認行為
瀏覽器自己實現(xiàn)的功能
阻止默認事件
return false;
遇到addEventListener不兼容
ev.preventDefault&&ev.preventDefault();
事件委托、事件委派、事件派生
給父級添加事件
獲取事件源
var oSrc = ev.srcElement||ev.target;
onmouseover和onmouseout的bug
換事件
onmouseenter
onmouseleave
DOMReady
方法一 推薦
document.addEventListener('DOMContentLoaded',function(){
},false);
方法二
document.onreadystatechange = function(){
if(document.readyState=='complete'){
}
};
鍵盤事件
????鍵盤按下事件
????????onkeydown
????鍵盤抬起事件
????????onkeyup
????區(qū)分按鍵：鍵碼
????????oEvent.keyCode
????backspce????8
????回車????13
????空格????32
????拖拽回放
jquery
$(function(){
})();
推薦以下做法
$(document).ready(function(){
});
????DOM操作
????????appendTo
????????prependTo
????????remove
JQuery中的事件
????都是綁定上去的
????????$().on ????綁定事件
????????$().off????解綁事件
????事件委托
$('ul').on('click','li',function(){
});
原生對象和jquery對象
????原生對象
????????document.getElementById();
????????document.getElementsByTagName();
????jquery對象
????????$();
原生對象和jquery對象不互通盛杰。
????原生對象和jquery對象之間的轉(zhuǎn)換
????????原生對象-》jquery對象
????????????$(原生對象)
????????jquery對象-》原生對象
????????????$().get(下標(biāo))
????????????$()[下標(biāo)]
$().each() //操作jquery元素的
$('ul li').each(function(index,oEle){
index 索引
oEle 遍歷出來的原生對象
this 遍歷出來的原生對象
oEle==this
});
????獲取相對位置
????????obj.offsetLeft
????????obj.offsetTop
????????$().position()
????獲取絕對位置
????????getPos().left/top
????????$().offset()
寬
$().width()
高
$().height()
寬+padding*2
$().innerWidth()
高+padding*2
$().innerHeight()
寬+padding2+border2
$().outerWidth()
高+padding2+border2
$().outerHeight()
????插件機制
定義一個插件
$.fn.toRed = function(){
this.css('background','red');
};
批量定義插件 √
$.fn.extend({
名字:function(){}
});
????jquery中
????????return false
????????阻止默認事件
????????取消冒泡
CSS3
選擇器
transition
transform
text-shadow
linear-gradient
radial-tradient
border-radius
animation
-webkit-mask
瀏覽器前綴
box-shadow: x y blur color;
瀏覽器前綴
????-webkit- ????Chrome办素、Safari、Opera
????-moz- ???? Firefox
????-ms- ???? IE
????-o- ???? Opera
????不加前綴
-webkit-transition:1s all ease;
-moz-transition:1s all ease;
-ms-transition:1s all ease;
-o-transition:1s all ease;
transition:1s all ease;
???? 用js操作瀏覽器前綴
css js
-webkit-transition WebkitTransition
-moz-transition MozTransition
-ms-transition msTransition
-o-transition OTransition
transition transition
setC3Style(obj,sName,sValue);
transform
transform 變形
rotate 旋轉(zhuǎn) deg
translate 平移
scale 縮放
原點
中心點
transform-origin
例子：
CSS3簡易時鐘
1圈 360°
12h 1h == 30°
60m 1m == 6°
60s 1s == 6°
5 1
10 2
15 3
20 4
????transform 多個值
????????有先后執(zhí)行順序呆万，后面的先執(zhí)行
????transform 注意
????????不能操作行元素
????文本切片
????????-webkit-background-clip:text;
????????-webkit-background-clip 一定要設(shè)置在背景顏色后面
????移動端
????????手機扫沼、平板、watch梢为、電視
????????pc端怎么寫粟害，移動端就怎么寫樊零。
????????而且還簡單了沉衣。不需要注意兼容豌习。東西少存谎。
????????只不過移動端需要注意尺寸。
????移動端方式：
????????定寬
????????百分比
----------------------------------------------
????????響應(yīng)式
????????只有一套頁面肥隆，在不能尺寸的設(shè)備上用不同的樣式
????????彈性
????????rem
總結(jié):
鍵盤事件
onkeydown 鍵盤按下
onkeyup 鍵盤抬起
獲取鍵碼
oEvent.keyCode
JQuery
$(document).ready();
事件
$().on(sEv,['委托'],function(){});
off
循環(huán)
$().each(function(index,oEle){
index 索引
oEle 原生對象
this 原生對象
});
原生對象和jquery對象的轉(zhuǎn)換
原生對象-》jquery對象
$(原生)
jquery對象-》原生對象
$()[下標(biāo)]
$().get(下標(biāo))
寬高
$().width()
$().height()
寬高+padding
$().innerWidth()
$().innerHeight()
寬高+padding+border
$().outerWidth()
$().outerHeight()
獲取定位
相對定位
$().position().left/top;
絕對定位
$().offset().left/top;
插件擴展
//jquery中所有的this都是原生對象既荚，只有一個例外
插件中的this是jquery對象
$.fn.xxx = function(){
};
$.fn.extend({
xxx:function(){}
});
取消冒泡，阻止默認事件
return false;
單獨阻止默認事件
ev.preventDefault()
單獨取消冒泡
ev.stopPropagation();
-------------------------------------------------------
CSS3
瀏覽器前綴
-webkit- Chrome,Safari,Opera
-moz- Firefox
-ms- IE
-o- old Opera
不加前綴
transform
原點
-webkit-transform-origin
transform的書寫順序：
后寫的先執(zhí)行
文本切片
-webkit-background-clip:text;
切記栋艳，一定要寫在背景色后面恰聘。
