javascript的組成部分？
ECMAScript 核心解釋器
DOM 文檔對象模型
BOM 瀏覽器對象模型
DOM
DOM樹
html頁面的結構關系
獲取子節點
父級.children 獲取第一層子節點
獲取父節點
結構父級
oEle.parentNode
定位父級
oEle.offsetParent
創建節點
document.createElement('標簽名');
插入
父級.appendChild(新節點);
從父級的后面添加
父級.insertBefore(新節點,在誰之前插入);
在某個節點之前插入
刪除
父級.removeChild(子節點);
事件
事件對象
包含了事件觸發的詳細信息
ev 高版本瀏覽器
event 低版本瀏覽器
oBtn.onclick = function(ev){
var oEvent = ev||event;
oEvent.clientX
oEvent.clientY
oEvent.pageX
oEvent.pageY
};
事件綁定(事件監聽)
oEle.addEventListener('sEv', fn, false);
高版本
oEle.attachEvent('onsEv', fn);
低版本
定義函數
function addEvent(obj, sEv, fn){
if(obj.addEventListener){
obj.addEventListener(sEv,fn,false);
}else{
obj.attachEvent('on'+sEv,fn);
}
}
調用
addEvent(oBtn,'click',function(){
alert(1);
});
事件解綁
定義函數
function removeEvent(obj, sEv, fn){
if(obj.removeEventListener){
obj.removeEventListener(sEv,fn,false);
}else{
obj.detachEvent('on'+sEv,fn);
}
}
調用
removeEvent(oBtn,'click',function(){
alert(1);
});
匿名函數不能被解綁
原因：匿名函數雖然長得一樣，但是不是一個
var show = new Function();
function show(){}
事件流
DOM事件流
冒泡階段 捕獲階段
IE事件流
冒泡階段
取消冒泡
ev.cancelBubble = true;
默認事件、默認行為
瀏覽器自己實現的功能
阻止默認事件
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
????區分按鍵：鍵碼
????????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對象之間的轉換
????????原生對象-》jquery對象
????????????$(原生對象)
????????jquery對象-》原生對象
????????????$().get(下標)
????????????$()[下標]
$().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 旋轉 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 多個值
????????有先后執行順序，后面的先執行
????transform 注意
????????不能操作行元素
????文本切片
????????-webkit-background-clip:text;
????????-webkit-background-clip 一定要設置在背景顏色后面
????移動端
????????手機、平板、watch、電視
????????pc端怎么寫，移動端就怎么寫。
????????而且還簡單了。不需要注意兼容。東西少。
????????只不過移動端需要注意尺寸。
????移動端方式：
????????定寬
????????百分比
----------------------------------------------
????????響應式
????????只有一套頁面，在不能尺寸的設備上用不同的樣式
????????彈性
????????rem
總結:
鍵盤事件
onkeydown 鍵盤按下
onkeyup 鍵盤抬起
獲取鍵碼
oEvent.keyCode
JQuery
$(document).ready();
事件
$().on(sEv,['委托'],function(){});
off
循環
$().each(function(index,oEle){
index 索引
oEle 原生對象
this 原生對象
});
原生對象和jquery對象的轉換
原生對象-》jquery對象
$(原生)
jquery對象-》原生對象
$()[下標]
$().get(下標)
寬高
$().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的書寫順序：
后寫的先執行
文本切片
-webkit-background-clip:text;
切記，一定要寫在背景色后面。
