javascript的組成部分？
ECMAScript 核心解釋器
DOM 文檔對(duì)象模型
BOM 瀏覽器對(duì)象模型
DOM
DOM樹(shù)
html頁(yè)面的結(jié)構(gòu)關(guān)系
獲取子節(jié)點(diǎn)
父級(jí).children 獲取第一層子節(jié)點(diǎn)
獲取父節(jié)點(diǎn)
結(jié)構(gòu)父級(jí)
oEle.parentNode
定位父級(jí)
oEle.offsetParent
創(chuàng)建節(jié)點(diǎn)
document.createElement('標(biāo)簽名');
插入
父級(jí).appendChild(新節(jié)點(diǎn));
從父級(jí)的后面添加
父級(jí).insertBefore(新節(jié)點(diǎn),在誰(shuí)之前插入);
在某個(gè)節(jié)點(diǎn)之前插入
刪除
父級(jí).removeChild(子節(jié)點(diǎn));
事件
事件對(duì)象
包含了事件觸發(fā)的詳細(xì)信息
ev 高版本瀏覽器
event 低版本瀏覽器
oBtn.onclick = function(ev){
var oEvent = ev||event;
oEvent.clientX
oEvent.clientY
oEvent.pageX
oEvent.pageY
};
事件綁定(事件監(jiān)聽(tīng))
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ù)雖然長(zhǎng)得一樣，但是不是一個(gè)
var show = new Function();
function show(){}
事件流
DOM事件流
冒泡階段 捕獲階段
IE事件流
冒泡階段
取消冒泡
ev.cancelBubble = true;
默認(rèn)事件、默認(rèn)行為
瀏覽器自己實(shí)現(xiàn)的功能
阻止默認(rèn)事件
return false;
遇到addEventListener不兼容
ev.preventDefault&&ev.preventDefault();
事件委托、事件委派、事件派生
給父級(jí)添加事件
獲取事件源
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(){
});
原生對(duì)象和jquery對(duì)象
????原生對(duì)象
????????document.getElementById();
????????document.getElementsByTagName();
????jquery對(duì)象
????????$();
原生對(duì)象和jquery對(duì)象不互通。
????原生對(duì)象和jquery對(duì)象之間的轉(zhuǎn)換
????????原生對(duì)象-》jquery對(duì)象
????????????$(原生對(duì)象)
????????jquery對(duì)象-》原生對(duì)象
????????????$().get(下標(biāo))
????????????$()[下標(biāo)]
$().each() //操作jquery元素的
$('ul li').each(function(index,oEle){
index 索引
oEle 遍歷出來(lái)的原生對(duì)象
this 遍歷出來(lái)的原生對(duì)象
oEle==this
});
????獲取相對(duì)位置
????????obj.offsetLeft
????????obj.offsetTop
????????$().position()
????獲取絕對(duì)位置
????????getPos().left/top
????????$().offset()
寬
$().width()
高
$().height()
寬+padding*2
$().innerWidth()
高+padding*2
$().innerHeight()
寬+padding2+border2
$().outerWidth()
高+padding2+border2
$().outerHeight()
????插件機(jī)制
定義一個(gè)插件
$.fn.toRed = function(){
this.css('background','red');
};
批量定義插件 √
$.fn.extend({
名字:function(){}
});
????jquery中
????????return false
????????阻止默認(rèn)事件
????????取消冒泡
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 縮放
原點(diǎn)
中心點(diǎn)
transform-origin
例子：
CSS3簡(jiǎn)易時(shí)鐘
1圈 360°
12h 1h == 30°
60m 1m == 6°
60s 1s == 6°
5 1
10 2
15 3
20 4
????transform 多個(gè)值
????????有先后執(zhí)行順序，后面的先執(zhí)行
????transform 注意
????????不能操作行元素
????文本切片
????????-webkit-background-clip:text;
????????-webkit-background-clip 一定要設(shè)置在背景顏色后面
????移動(dòng)端
????????手機(jī)、平板、watch、電視
????????pc端怎么寫(xiě)，移動(dòng)端就怎么寫(xiě)。
????????而且還簡(jiǎn)單了。不需要注意兼容。東西少。
????????只不過(guò)移動(dòng)端需要注意尺寸。
????移動(dòng)端方式：
????????定寬
????????百分比
----------------------------------------------
????????響應(yīng)式
????????只有一套頁(yè)面，在不能尺寸的設(shè)備上用不同的樣式
????????彈性
????????rem
總結(jié):
鍵盤事件
onkeydown 鍵盤按下
onkeyup 鍵盤抬起
獲取鍵碼
oEvent.keyCode
JQuery
$(document).ready();
事件
$().on(sEv,['委托'],function(){});
off
循環(huán)
$().each(function(index,oEle){
index 索引
oEle 原生對(duì)象
this 原生對(duì)象
});
原生對(duì)象和jquery對(duì)象的轉(zhuǎn)換
原生對(duì)象-》jquery對(duì)象
$(原生)
jquery對(duì)象-》原生對(duì)象
$()[下標(biāo)]
$().get(下標(biāo))
寬高
$().width()
$().height()
寬高+padding
$().innerWidth()
$().innerHeight()
寬高+padding+border
$().outerWidth()
$().outerHeight()
獲取定位
相對(duì)定位
$().position().left/top;
絕對(duì)定位
$().offset().left/top;
插件擴(kuò)展
//jquery中所有的this都是原生對(duì)象，只有一個(gè)例外
插件中的this是jquery對(duì)象
$.fn.xxx = function(){
};
$.fn.extend({
xxx:function(){}
});
取消冒泡，阻止默認(rèn)事件
return false;
單獨(dú)阻止默認(rèn)事件
ev.preventDefault()
單獨(dú)取消冒泡
ev.stopPropagation();
-------------------------------------------------------
CSS3
瀏覽器前綴
-webkit- Chrome,Safari,Opera
-moz- Firefox
-ms- IE
-o- old Opera
不加前綴
transform
原點(diǎn)
-webkit-transform-origin
transform的書(shū)寫(xiě)順序：
后寫(xiě)的先執(zhí)行
文本切片
-webkit-background-clip:text;
切記，一定要寫(xiě)在背景色后面。
