1.語言基礎(chǔ)
2.嚴(yán)格模式
3.js組成（ECMAScript DOM BOM）
4.各種(DOM BOM)例子
5.組件
6.事件
7.事件各種例子
8.運(yùn)動(dòng)
9.各種運(yùn)動(dòng)例子
10.jquery
11.cookie
12.seajs
語言特性：
預(yù)解析：程序執(zhí)行之前，會(huì)把所有變量的聲明，提到頂部。（僅僅是聲明）
預(yù)解析，不會(huì)突破你的作用域。
不會(huì)突破script標(biāo)簽。
讀取一個(gè)script->預(yù)解析->執(zhí)行里面的代碼->讀取下一個(gè)script->預(yù)解析->執(zhí)行里面的代碼->...
作用：為了性能。不管你喜不喜歡，用不用。它都存在。
函數(shù)也有預(yù)解析。
注意：變量形式的函數(shù)，預(yù)解析是按照變量走。
預(yù)解析--------火狐下沒問題。。。待解釋。
引用：在對(duì)象身上會(huì)出現(xiàn)。
函數(shù)的真正寫法：
new Function('js語句')
獲取字符串編碼：
str.charCodeAt(下標(biāo))； 獲取某一位置的編碼
通過編碼得到字符：
string.fromCharCode(編碼)；
計(jì)算機(jī)中所有的漢字：
19968
40869
2萬多個(gè)漢字。
16進(jìn)制
4e00-9fa5
16進(jìn)制js中寫法：
0x4e00-0x9fa5
加密解密
關(guān)于變量：
變量在第一次聲明賦值時(shí)，如果不加var會(huì)變成全局變量；
全局變量并不好，能不用就不用。
window的就是全局的。
賦值表達(dá)式
賦值本身是有值的
逗號(hào)表達(dá)式：聽后面的東西
判斷：聽后面的
alert：因?yàn)閍lert是函數(shù)調(diào)用，用逗號(hào)相隔，被當(dāng)成了傳參。如果想讓逗號(hào)表達(dá)式好使，加括號(hào)提高優(yōu)先級(jí)
賦值：因?yàn)槎紩?huì)表達(dá)式，優(yōu)先級(jí)特別低，所以先算賦值，后算逗號(hào)。加括號(hào)就好了
逗號(hào)表達(dá)式，在聲明變量時(shí)不能加var.
js中的bug。js中的bug多的跟山一樣。
JS的作者是誰？ 布蘭登.艾克 （Brendan Eich）
bug是作者弄出來的。
*************************
嚴(yán)格模式
'use strict';
嚴(yán)格模式，用所有的js文件都加上嚴(yán)格模式。
-------------------------
嚴(yán)格模式是不是好東西？必須是好東西。
解決問題：
1.解決了this問題；
2.避免了不加var聲明全局變量；
3.不允許在if,switch,for,while,for in里面聲明函數(shù)；
4.不允許使用with
注意：
1.嚴(yán)格模式有作用范圍；函數(shù)、script標(biāo)簽、js文件
2.嚴(yán)格模式的'use strict'必須放在第一位置；
高級(jí)瀏覽器兼容，IE9除外；
------------------------------------
異常 bug
程序員不可控制的東西。
try...catch...
try(){
可能會(huì)出錯(cuò)的代碼；
}catch(){
e代表了，錯(cuò)誤信息
補(bǔ)救措施
}
不要用。救急的時(shí)候用。線上bug用
性能差
-------------------------------------
js由什么組成？
ECMAScript 核心解釋器
定義了一些基本的語法和功能。
兼容性：完全兼容。因?yàn)椋峁┑亩际亲罨荆詈唵蔚墓δ堋?---------------------------
DOM 文檔對(duì)象模型 Document Object Model
document 所有文檔的操作。
獲取元素，改變顏色。刪除元素，改個(gè)寬度，創(chuàng)建個(gè)元素，修改個(gè)內(nèi)容。
兼容性：基本兼容，有不兼容的，可以解決。
---------------------------
BOM 瀏覽器對(duì)象模型 Borswer Object Model
windou 所有關(guān)于瀏覽器的操作。
關(guān)閉個(gè)頁面，打開個(gè)新窗口，訪問一下歷史記錄。檢測瀏覽器信息
兼容性：基本不兼容，不兼容沒辦法解決。
--------------------------
前端實(shí)現(xiàn)不了的功能:
1.復(fù)制剪貼的內(nèi)容
2.全選
3.判斷app安裝
4.自動(dòng)播放背景音樂
5.判斷是不是4G
6.獲取mac
-------------------------------------
js組成部分：
ECMAScript 核心解析器
-------------------------------------
DOM 文本對(duì)象模型
標(biāo)簽=元素=節(jié)點(diǎn)
DOM樹
獲取標(biāo)簽名
obj.tagName 每個(gè)字母都是大寫的
獲取父級(jí)的子節(jié)點(diǎn)
obj.children 獲取子節(jié)點(diǎn)（只包括第一層）
obj.childNodes 獲取子節(jié)點(diǎn)（會(huì)把文本節(jié)點(diǎn)一起獲取到）
檢測節(jié)點(diǎn)類型
obj.nodeType
標(biāo)簽節(jié)點(diǎn) 1
文本節(jié)點(diǎn) 3
document 9
獲取父節(jié)點(diǎn)
obj.parentNode 獲取父節(jié)點(diǎn)
最大的祖宗就是document,在往上沒了所以是null
獲取兄弟節(jié)點(diǎn)：
獲取下一個(gè)兄弟節(jié)點(diǎn)
obj.nextElementSibling 只兼容高級(jí)瀏覽器
obj.nextSibling 只兼容低版瀏覽器
兼容寫法：
var oNext=obj.nextElementSibling||obj.nextSibling;
關(guān)于并且
&&兩邊都是真的，才算真的。如果第一個(gè)是真的，那就有必要去看看第二個(gè)。
如果第一個(gè)是假的，那就沒有必要去看第二個(gè)，也就不執(zhí)行。
關(guān)于或
||有一個(gè)是真的，整個(gè)例子就是真的。如果第一個(gè)是假的，那就有必要去看看
第二個(gè)。如果第一個(gè)是真的，那就沒有必要去看第二個(gè)，也就是不執(zhí)行。如果
多個(gè)都是假的，那就聽最后一個(gè)。
獲取上一個(gè)兄弟節(jié)點(diǎn)
obj.previousElementSibling 只兼容高級(jí)瀏覽器
obj.previousSibling 只兼容低版瀏覽器
兼容寫法：
var oPre=obj.previousElementSibling||obj.previousSibling;
---------------------------------------------------------
獲取首尾子節(jié)點(diǎn)：
獲取首子節(jié)點(diǎn)
父級(jí).firstElementChild 只兼容高級(jí)瀏覽器
父級(jí).firstChild 只兼容低版瀏覽器
兼容寫法：
var oFirst=父級(jí).firstElementChild||父級(jí).firstChild
獲取尾子節(jié)點(diǎn)
父級(jí).lastElementChild 只兼容高級(jí)瀏覽器
父級(jí).lastChild 只兼容低版瀏覽器
兼容寫法：
var oFirst=父級(jí).lastElementChild||父級(jí).lastChild
--------------------------------------------------------
物體信息：
obj.offsetWidth; 獲取盒子模型的寬度
obj.offsetHeight; 獲取盒子模型的高度
obj.offsetLeft; 距離定位父級(jí)的左邊距
obj.offsetTop; 距離定位父級(jí)的上邊距
getStyle offsetWidth
類型 string number
width 純width 盒子模型的寬度
none 能獲取 不能獲取
obj.offsetParent 獲取到定位父級(jí)
關(guān)于父級(jí)
obj.parentNode 結(jié)構(gòu)上的父級(jí) 最大document
obj.offsetParent 定位上的父級(jí) 最大body
-----------------------------------------------------
字節(jié)
英文字母 1字節(jié)
數(shù)字 1字節(jié)
漢字 GB2312 2字節(jié)
UTF-8 3字節(jié)
-----------------------------------------------------
創(chuàng)建元素
document.createElement('標(biāo)簽名') 創(chuàng)建出來的元素跟html中寫的一模一樣
插入
父級(jí).appendChild(新元素) 在元素的最后面插入一個(gè)東西
父級(jí).insertBefore(要插入，插入誰) 插入到誰誰之前
刪除元素
父級(jí).removeChild(要?jiǎng)h除的元素) 從父級(jí)中刪除某個(gè)元素
克隆元素
obj.cloneNode();
obj.cloneNode(true); 深度克隆
會(huì)把內(nèi)容一起克隆
會(huì)把ID一起克隆，所有要注意：
克隆之后要把ID刪掉
但是有問題，會(huì)留一個(gè)空的ID，不好看。后面待解決。。。
-------------------------------------
BOM 瀏覽器對(duì)象模型
BOM 操作瀏覽器
window.open(要打開的地址) 打開一個(gè)頁面
chrome 攔截
Firefox 阻止
IE 直接打開
注意：用戶的操作才能直接打開新的頁面。
window.close() 關(guān)閉當(dāng)前頁面
chrome 直接關(guān)閉
IE 問問你是否確定要關(guān)閉
Firefox 腳本不得關(guān)閉非腳本打開的窗口
注意：腳本打開的窗口，它才可以完美的關(guān)閉。
window.navigator.userAgent 獲取瀏覽器版本信息
about:blank; 空白頁
在線運(yùn)行代碼：
window.open(); 打開一個(gè)新的空白頁，打開之后它會(huì)返回新頁面的window
可以用新的window去document.write();
在線運(yùn)行代碼，只能看不能用。
window.location 當(dāng)前地址
window.location.protocol 獲取協(xié)議
window.location.pathname 路徑
window.location.host 網(wǎng)址
window.location.hash 錨
window.location.search 提交的數(shù)據(jù)
window.location.href 頁面跳轉(zhuǎn)
http 超文本傳輸協(xié)議
https 超安全超文本傳輸協(xié)議
用戶體驗(yàn)：
document document
body document.body
title document.title
html document.doucmentElement
----------------------------------------
右下角富媒體（右下角懸浮框）
方法：
1.position:absolute right:0 bottom:0
2.position:fixed right:0 bottom:0
3.js計(jì)算
滾動(dòng)條滾動(dòng)事件
onscroll
滾動(dòng)距離
document.documentElement.scrollTop 上下滾動(dòng)距離
兼容Firefox和IE
document.body.scrollTop
兼容chrome
兼容寫法：
var scrollT=document.documentElement.scollTop||document.body.scrollTop
document.documentElement.scrollLeft 橫向滾動(dòng)距離
兼容Firefox和IE
document.body.scrollLeft
兼容chrome
兼容寫法：
var scrollT=document.documentElement.scollLeft||document.body.scrollLeft
可視區(qū)大小(可視區(qū)寬高)：
document.documengElement.clientWidth 可視區(qū)寬度
document.documengElement.clientHeight 可視區(qū)高度
改變窗口大小事件
onresize
---------------------------------------
獲取絕對(duì)位置
function getPos(obj){
var l=0;
var t=0;
while(obj){
l+=obj.offsetLeft;
t+=obj.offsetTop;
obj=obj.offsetParent;
}
return {left:l,top:t};
}
getBoundingClientRect().left 元素左邊距離頁面左邊的距離
getBoundingClientRect().top 元素上邊距離頁面上邊的距離
getBoundingClientRect().right 元素右邊距離頁面左邊的距離
getBoundingClientRect().bottom 元素下邊距離頁面上邊的距離
圖片延遲加載（懶加載）
好處：省流量，省資源
關(guān)于屬性
obj.getAttribute('屬性名'); 獲取自定義屬性
get 獲取得到
Attribute 屬性
obj.setAttribute('屬性名字','屬性值') 設(shè)置自定義屬性
要成對(duì)出現(xiàn)
obj.removeAttribute('屬性名') 刪除屬性
解決cloneNode()問題：
切記，使用cloneNode:cloneNode之后一定要removeArrtibute
-----------------------------------
瀑布流：
系統(tǒng)提供的，獲取一組元素的方法，獲取出來的不是一個(gè)真正的數(shù)組。
所以用不了常用的數(shù)組方法。
================================
getElementById
===============================
obj.offsetHight 獲取盒子模型的高度
obj.scrollHight 內(nèi)容高度
-------------------------------------
吸頂條
-------------------------------------
文本提示框
obj.onfocus 獲取焦點(diǎn)事件
obj.onblur 失去焦點(diǎn)事件
obj.focus() 讓一個(gè)元素獲取焦點(diǎn)
obj.blur() 讓一個(gè)元素失去焦點(diǎn)
------------------------------------
innerHTML的問題：
永遠(yuǎn)都是先把原來的刪除，然后再添加
注意：會(huì)把之前的元素的事件給殺掉。
-------------------------------------
圖片預(yù)加載
========================================
oImg.onload 當(dāng)圖片加載成功之后觸發(fā)
oImg.onerror 當(dāng)圖片加載失敗之后觸發(fā)
圖片對(duì)象
new Image(); 創(chuàng)建一個(gè)圖片對(duì)象
這種寫法跟html中寫img標(biāo)簽沒有任何區(qū)別。
網(wǎng)絡(luò)進(jìn)度條
http://www.zhinengshe.com/works/3525/img/0.jpg
求比例：拿已有的/總共
不適合處理小數(shù)
0.04000000000000001
保留小數(shù) .toFixed(保留的位數(shù));
=================================
appendChild
insertBefore
剪切功能
==========================================
table
oTable.tBodies[0] 能獲取到表格中的tbody
oTBody.rows tbody中的所有tr
oRow.cells 列
DOM結(jié)束了。
==============================================
關(guān)于form表單:
form是干什么的？ 向服務(wù)器提交數(shù)據(jù)的。
必不可少的部分
action 提交地址
submit 提交按鈕
name
提交地址的區(qū)別
有http:// 是在網(wǎng)上找
沒有http:// 是在本地找
地址寫?相當(dāng)于提交到當(dāng)前頁面
method 提交方式
get 系統(tǒng)默認(rèn)的提交方式
明文提交，不安全,容量小（32KB左右），有緩存
post
密文提交，相對(duì)安全,容量大（1GB），沒有緩存
http:// 超文本傳輸協(xié)議
https:// 超安全超文本傳輸協(xié)議
一般人用不了，因?yàn)槭召M(fèi)，還很貴。
資源，分享
get便于分享。
name可以重復(fù)。
獲取元素
document.getElementById 通過id獲取一個(gè)
obj.getElementsByTagName 通過標(biāo)簽名獲取一組
obj.getElementsByClassName 通過class獲取一組
document.getElementsByName 通過name獲取一組
===========================================
事件
onload 加載成功事件
onerror 加載失敗事件
onclick 點(diǎn)擊事件
onmouseover 鼠標(biāo)移入事件
onmouseout 鼠標(biāo)移出事件
onresize 改變可視區(qū)大小事件
onscroll 滾動(dòng)滾動(dòng)條事件
onmouseup 鼠標(biāo)抬起事件
onmousedown 鼠標(biāo)按下事件
onchange 狀態(tài)改變事件
onfocus 獲取焦點(diǎn)事件
onblur 失去焦點(diǎn)事件
ondblclick 雙擊事件
onmousemove 鼠標(biāo)移動(dòng)事件
===================================
事件對(duì)象 包含了事件的詳細(xì)信息。
參數(shù)ev 兼容：高版本瀏覽器
event 兼容：IE，chrome
兼容寫法: var oEvent = ev||event;
獲取鼠標(biāo)在可視區(qū)中的坐標(biāo)
橫軸坐標(biāo)X 事件對(duì)象.clientX
縱軸坐標(biāo)Y 事件對(duì)象.clientY
鼠標(biāo)在頁面中的坐標(biāo)： 只兼容高版本瀏覽器
oEvent.pageX
oEvent.pageY
以后只要是使用到了可視區(qū)中的坐標(biāo)，就一定要加上滾動(dòng)距離
事件冒泡
子級(jí)觸發(fā)了事件，會(huì)找父級(jí)相同的事件，一直找到頂。
哪怕子級(jí)沒有這個(gè)事件，也會(huì)往上冒。
找父級(jí)，是按照結(jié)構(gòu)找的，跟定位沒有任何關(guān)系。
取消冒泡。
oEvent.cancelBubble=true;
***如果事件冒泡沒有出問題，就不要去取消冒泡。
***如果隨便取消冒泡，會(huì)出現(xiàn)一些意想不到的結(jié)果。
放大鏡
l/(oS.offsetWidth-oM.offsetWidth)=?/(oImg.offsetWidth-oB.offsetWidth)
l2=l/(oS.offsetWidth-oM.offsetWidth)*(oImg.offsetWidth-oB.offsetWidth)
-------------------------------------
放大鏡：
事件對(duì)象：只能獲取鼠標(biāo)和鍵盤的事件。
鍵盤事件：
onkeydow 鍵盤按下
onkeyup 鍵盤抬起
每個(gè)按鍵都有一個(gè)編碼
oEvent.keyCode 獲取鍵盤編碼
a 65
b 66
c 67
d 68
← 37
↑ 38
→ 39
↓ 40
鍵盤控制div移動(dòng)，不卡。作業(yè)
--------------------------------------
默認(rèn)事件 瀏覽器自帶的一些行為。
阻止默認(rèn)事件
return false;
右鍵菜單 上下文菜單
oncontextmenu
刷新頁面：(頁面重新加載)
window.location.reload();
表達(dá)提交事件：
oForm.onsubmit
Js當(dāng)中不允許使用組合按鍵的編碼
oEvent.ctrlKey 如果按下crtl就是ture，否側(cè)就是flase
oEvent.shiftKey 如果按下shift就是ture，否側(cè)就是flase
oEvent.altKey 如果按下alt就是ture，否側(cè)就是flase
-------------------------------------
拖拽
鼠標(biāo)按下 保存鼠標(biāo)在DIV中的位置
鼠標(biāo)移動(dòng) 鼠標(biāo)新的位置-鼠標(biāo)在div中的位置
鼠標(biāo)抬起 干掉所有不用了的事件
設(shè)置捕獲和釋放捕獲是IE的東西
設(shè)置捕獲 把所有瀏覽器自帶的事件都干掉，只聽當(dāng)前這個(gè)元素的。
obj.setCapture();
釋放捕獲
obj.releaseCapture();
輸入文字的事件
obj.onpropertychange IE系列
obj.oninput 兼容高級(jí)瀏覽器
事件不用處理兼容
obj.onpropertychange=obj.oninput=function(){}
IE9兼容了嗎？刪除不好用
-------------------------------------
**在工作當(dāng)中所有的事件必須綁定上去
**因?yàn)檫@個(gè)事件不一定只有你一個(gè)人使用
同一個(gè)元素加同一個(gè)事件，不能加多次，后加的會(huì)把先加的覆蓋。
事件綁定(事件監(jiān)聽) 給同一個(gè)元素加同一個(gè)事件加多次。
obj.addEventListener(sEv,fn,flase); 兼容高級(jí)瀏覽器，事件名不能加'on'
obj.addEventListener(事件名,函數(shù),flase);
obj.attachEvent('on'+sEv,fn); 兼容IE系列,IE10-
兼容寫法：
function addEvent(obj,sEv,fn){
if (obj.addEventListener) {
obj.addEventListener(sEv,fn,false);
} else{
obj.attachEvent('on'+sEv,fn);
}
}
false 事件冒泡
true 事件捕獲
事件流：
DOM事件流 冒泡和捕獲
IE事件流 冒泡
事件冒泡（冒泡階段）;false 子級(jí)往父級(jí)找 所有瀏覽器（冒泡）
事件捕獲（捕獲階段）;true 父級(jí)往子級(jí)找 高級(jí)瀏覽器(冒泡和捕獲)
只有高級(jí)瀏覽器有，因?yàn)橹挥惺褂胊ddEventListener(,,ture)的時(shí)候才會(huì)觸發(fā)
兼容寫法：
function removeEvent(obj,sEv,fn){
if (obj.removeEventListener) {
obj.removeEventListener(sEv,fn,false);
} else{
obj.detachEvent('on'+sEv,fn);
}
}
匿名函數(shù)不能解除綁定。
this不好的用法：
1.定時(shí)器
2.事件中套了一層函數(shù)
3.行間事件中套了一層函數(shù)
4.attachEvent中使用this
九宮格拖拽
var oldX = oEvent.clientX;
var oldY = oEvent.clientY;
var oldW = oBox.offsetWidth;
var oldH= oBox.offsetHeight;
var oldL = oBox.offsetLeft;
var oldT = oBox.offsetTop;
-------------------------------------
碰撞檢測
判斷是否碰到了，不靠譜，因?yàn)闂l件太多
判斷是否沒碰到
r1<l2||b1<t2||l1>r2||t1>b2
--------------------------------------
問題：
1.循環(huán)加事件，性能不好
2.給未來元素加事件（之間加的事件，未來的元素沒有）
事件委托(事件委派):
oEvent.srcElement 觸發(fā)這個(gè)事件的源頭是誰
兼容Chrome,IE系列
oEvent.target 觸發(fā)這個(gè)事件的源頭是誰
兼容火狐
兼容寫法：
var oSrc=oEvent.srcElement||oEvent.target;
obj.tagName 獲取標(biāo)簽名（標(biāo)簽名大寫）
作用:
1.提高性能；
2.給未來元素加事件；
---------------------------------------
自定義的滾動(dòng)條
---------------------------------------
鼠標(biāo)滾輪事件
onmousewheel 兼容chrome,ie
oEvent.wheelDelta 獲取鼠標(biāo)滾輪滾動(dòng)的方向
下 -120
上 120
DOMMouseScroll 兼容firefox
oEvent.detail 獲取鼠標(biāo)滾輪滾動(dòng)的方向
下 3
上 -3
DOM事件
1.以DOM開頭的事件
2.DOM事件不能直接加，必須要使用事件綁定去加。
return false阻止默認(rèn)事件遇到了事件綁定addEventListener就不好使了
oEvent.preventDefault(); 阻止默認(rèn)事件 兼容高級(jí)瀏覽器
回調(diào)函數(shù)
-------------------------------------
移入移出bug:
onmouseover
oEvent.fromElement（不兼容火狐）
oEvent.relatedTarget(兼容高級(jí)瀏覽器)
兼容寫法：
oEvent.fromElemen||oEvent.relatedTarget
移入div里面
正常
外部直接移入到div body
外部直接移入到h2 html
異常
從div移動(dòng)到h2 div
從h2移動(dòng)到div h2
檢測obj是否包含obj2
obj.contains(obj2)
包含 ture
不包含 false
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
onmouseout
oEvent.toElement（不兼容火狐）
oEvent.relatedTarget(兼容高級(jí)瀏覽器)
兼容寫法：
oEvent.toElemen||oEvent.relatedTarget
obj是否包含obj2
obj.contains(obj2)
包含 ture
不包含 false
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
這兩個(gè)事件本身沒有over和out的bug
onmouseenter 代替移入
onmouseleave 代替移出
-------------------------------
window.onload html,css,js，圖片，flash...
把所有資源都加載完成之后執(zhí)行
domready document,比window.onload快一些
DOMContentLoaded 兼容IE9+,chrome,firefox
onreadystatechange 兼容低版本IE
document.readyState
interactive 開始加載
complete 加載完成
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded',function(){
fn();
},false)
}else{
document.attachEvent('onreadystatechange',function(){
if (document.readyState=='complete') {
fn();
}
})
}
------------------------------
運(yùn)動(dòng)： 讓一個(gè)東西動(dòng)起來
定時(shí)器有問題：
1，定時(shí)器不穩(wěn)定
2.切換標(biāo)簽會(huì)變慢
start 起點(diǎn) 0
target 目標(biāo)點(diǎn) 500
dis=target-start 總距離
time 總時(shí)間 3000
count總次數(shù) time/30 100
一次走多少 總距離/總次數(shù)
運(yùn)動(dòng)核心：
dis 總距離
count 總次數(shù)
start+n*dis/count;
start+dis*n/count;
運(yùn)動(dòng)框架：
starMove(obj,iTarget,time);
starMove(obj,sName,iTarget,time);
starMove(obj,sName,iTarget,time);
多個(gè)物體運(yùn)動(dòng)：
starMove(obj,sName,iTarget,time); 能改變opacity
寫運(yùn)動(dòng)例子的秘訣：
1.先把基本的功能做出來
2.把基本的功能轉(zhuǎn)化成運(yùn)動(dòng)
-------------------------------------
運(yùn)動(dòng)核心：
dis 總距離
count 總次數(shù)
start+dis*n/count;
-----------------------------
勻速運(yùn)動(dòng)（線性運(yùn)動(dòng)）
start+dis*n/count;
加速運(yùn)動(dòng)
var a=n/count;
start+dis*Math.pow(a,3);
減速運(yùn)動(dòng)
var a=1-n/count;
start+dis*(1-Math.pow(a,3));
勻速運(yùn)動(dòng) linear
加速運(yùn)動(dòng) ease-in
減速運(yùn)動(dòng) ease-out
鏈?zhǔn)竭\(yùn)動(dòng)
startMove(obj,json,type,time,fnEnd);
合并參數(shù)
startMove(obj,json,options);
給默認(rèn)值
startMove(obj,json,options)
----------------------------
運(yùn)動(dòng)框架:
dis
count
start+dis*n/count
function getStyle(obj,sName){
return (obj.currentStyle||getComputedStyle(obj,false))[sName];
}
function startMove(obj,json,options){
options = options||{};
options.duration = options.duration||700;
options.easing = options.easing||'ease-out';
var start = {};
var dis = {};
for(var name in json){
start[name] = parseFloat(getStyle(obj,name));
if(isNaN(start[name])){
switch(name){
case 'left':
start[name]=obj.offsetLeft;
break;
case 'top':
start[name]=obj.offsetTop;
break;
case 'height':
start[name]=obj.offsetHeight;
break;
case 'width':
start[name]=obj.offsetWidth;
break;
case 'opacity':
start[name]=1;
break;
case 'borderWidth':
start[name]=0;
break;
}
}
dis[name]=json[name]-start[name];
}
var count = Math.floor(options.duration/30);
var n = 0;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
n++;
for(var name in json){
switch(options.easing){
case 'linear':
var cur = start[name]+ dis[name]*n/count;
break;
case 'ease-in':
var a = n/count;
var cur = start[name]+ dis[name]*Math.pow(a,3);
break;
case 'ease-out':
var a = 1-n/count;
var cur = start[name]+dis[name]*(1-Math.pow(a,3));
break;
}
if(name=='opacity'){
obj.style.opacity=cur;
obj.style.filter='alpha(opacity:'+cur*100+')';
}else{
obj.style[name]=cur+'px';
}
}
if(n==count){
clearInterval(obj.timer);
options.complete&&options.comlete();
}
},30);
}
-------------------------------------
回到頂部
人改的和JS該的都嫩該出發(fā)onscroll事件
區(qū)分是人滾動(dòng)的還是JS滾動(dòng)的。
無縫滾動(dòng);
1.marquee 標(biāo)簽
2.判斷offsetLeft
3.數(shù)學(xué)去算。
left<0 left%w;
left>0 (left%w-w)%w;
**減少dom操作
定時(shí)器是一個(gè)特殊的循環(huán)。
分步運(yùn)動(dòng);
無限運(yùn)動(dòng);
-------------------------------------
圓：
a 假設(shè)是角度；
需求：角度轉(zhuǎn)弧度;
360=2π；
180=π
π=3.14
角度--》弧度
n*PI/180
funciton d2a(d){
return d*Math.PI/180;
}
弧度--》角度
n*180/PI
function a2d(a){
return a*180/Math.PI;
}
Math.sin(); sinα
Math.cos(); cosα
Math.PI(); π
sinα=對(duì)邊比斜邊 sinα=a/R;
a=sinα*R
x軸 X=R+sinα*R；
cosα=b/R
b=cosα*R
y軸 Y=R-cosα*R
---------------------------
穿墻：
1.判斷 32個(gè)判斷
2.算
判斷鼠標(biāo)從哪個(gè)方向移入的DIV
判斷鼠標(biāo)從哪個(gè)方向移出的DIV
方向-》角度
Math.atan2(y,x);
---------------------------
蘋果菜單：
Math.sqrt(a*a+b*b)
---------------------------
官網(wǎng)分頁
------------
布局 浮動(dòng)
JS效果 定位
布局轉(zhuǎn)換 布局依然用浮動(dòng)，用JS把布局變成定位
寫布局轉(zhuǎn)換，必須寫2個(gè)循環(huán)，不能寫一個(gè)。
-------------------------------------
服務(wù)器：是計(jì)算機(jī)。基本功能：存儲(chǔ)。
WEB服務(wù)器：響應(yīng)客戶端的請(qǐng)求
把自己的計(jì)算機(jī)變成服務(wù)器。
集成環(huán)境
wamp 在window環(huán)境下 手動(dòng)啟動(dòng)
appserv 自動(dòng)啟動(dòng)
mamp mac環(huán)境下
localhost
127.0.0.1
---------------------------------
目前的問題：
1.引入js文件太多。
2.引入js文件有先后順序，因?yàn)橛幸蕾囮P(guān)系。
3.變量名各種沖突，覆蓋
變量名沖突：
封閉空間
命名空間
模塊化：
seajs 國產(chǎn) CMD
公共模型模塊
comon module define
requirejs 進(jìn)口 AMD
異步模型模塊
Asynchronous module define
作用：
1.不用手動(dòng)引入JS文件
2.解決依賴關(guān)系的問題
3.解決變量名沖突、覆蓋的問題
()
seajs
http://seajs.org
requrejs
http://www.seajs.org
**最好放在服務(wù)器環(huán)境下。
一個(gè)JS文件就是一個(gè)模塊,一個(gè)模塊就是一個(gè)功能
define(function(require,exports,module){
require 導(dǎo)入一個(gè)模塊
exports 導(dǎo)出一個(gè)模塊
module 批量導(dǎo)出模塊
});
seajs.use(模塊名，function(){
});
可以不寫后綴名
定義模塊
define(function(require,exports,module){
require 導(dǎo)入一個(gè)模塊
exports 導(dǎo)出一個(gè)模塊
eg: exports.a=12;
module.exports={} 批量導(dǎo)出模塊
});
使用模塊
seajs.use(模塊名，function(mod){
mod 模塊
});
使用多個(gè)模塊
seajs.use([模塊名,模塊名2]，function(mod,mod2){
mod 模塊
});
<script src='' data-main=''></script>
給路徑起別名
seajs.config({
alias:{
別名：路徑
}
})
--------------------------------------
事件
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove
onkeydown
onkeyup
onload
onerror
onchange
onclick
ondblclick
onscroll
onresize
onsubmit
oncontextmenu
onmouseenter
onmouseleave
onfocus
onblur
oninput
onpropertychange
onreadystatechange
DOMContentLoaded
onmousewheel
DOMMouseScroll
事件對(duì)象
var oEvent = ev||event;
oEvent.clientX
oEvent.clientY
oEvent.cancelBubble=true;
oEvent.detail
oEvent.wheelDelta
oEvent.keyCode
oEvent.ctrlKey/shiftKey/altKey
oEvent.srcElement
oEvent.target
oEvent.fromElement
oEvent.toElement
oEvent.relatedTarget
oEvent.preventDefault()
oEvent.pageX
oEvent.pageY
-------------------------------------
圖片預(yù)加載用數(shù)組包起來
var images = new Array();
function preloadImages(){
for (i=0; i < preloadImages.arguments.length; i++){
images[i] = new Image();
images[i].src = preloadImages.arguments[i];
}
}
preloadImages("logo.jpg", "main_bg.jpg", "body_bg.jpg", "header_bg.jpg", "jser.jpg");
=================================================
滾輪事件：
function addEvent(obj,sEv,fn){
if (obj.addEventListener) {
obj.addEventListener(sEv,fn,false);
} else{
obj.attachEvent('on'+sEv,fn);
}
}
function addwheel(obj,fn){
function fnwheel(ev){
var bOk=true;
var oEvent=ev||event;
if (oEvent.wheelDelta) {
if (oEvent.wheelDelta<0) {
bOk=true;
} else{
bOk=false;
}
} else{
if (oEvent.detail>0) {
bOk=true;
} else{
bOk=false;
}
}
fn&&fn(bOk);
oEvent.preventDefault&&oEvent.preventDefault();
return false;
}
if (window.navigator.userAgent.indexOf('Firefox')!=-1) {
addEvent(obj,'DOMMouseScroll',fnwheel)
} else{
addEvent(obj,'mousewheel',fnwheel)
}
}
-------------------------------------
JQuery 庫 完全由一推JS代碼組成
輔助我們開發(fā)，幫助我們快速開發(fā)。
jquery能做的事，js一定能做。
JS能做的事，jquery不一定能做。
JS不能做的事，jquery必須能做到。
www.jquery.com
JQuery版本：
1.X 適用于亞非拉地區(qū)
2.X 適用于歐美
不兼容低版本IE的
不是版本號(hào)越高就越好。
1.7.2
JQuery免費(fèi)
---------------------------------
JQuery主要是給不會(huì)用原生JS人用的；
JS JQuery
window.onload $(function(){});
獲取元素 $('#btn');
加事件 .click();
JQeury:
頁面加載 $(function(){});
添加事件 .click(function(){});
--------------------------------
show(); 顯示
hide(); 隱藏
hover(fn1,fn2); 移入移出切換
toggle(fn1,fn2); 點(diǎn)擊切換
里面可以放好多函數(shù)。切換著執(zhí)行。
效果： 有問題，不用
fadeIn(); 淡入
fadeOut(); 淡出
slideDown(); 滑入
slideUp(); 滑出
效果停止：
.stop();
動(dòng)畫：
animate({}); 動(dòng)畫
*以后只要使用animate前面一定要加.stop();
--------------------------------
JQuery選擇器：
$('#id') 通過ID獲取
$('.class') 通過class獲取
$('標(biāo)簽名') 通過標(biāo)簽名獲取
$().find() 在XXX中獲取XXX元素
層級(jí)選擇器
$('#box ul li input')
屬性選擇器
$('元素名[屬性名=屬性值]');
偽類選擇器
:first; 獲取第一個(gè)
:last; 獲取最后一個(gè)
:eq(2); 獲取到下標(biāo)是幾的元素
:lt(2); 獲取到下標(biāo)小于幾的元素
:gt(2); 獲取到下標(biāo)大于幾的元素
:odd 獲取到奇數(shù)行的元素
:even 獲取到偶數(shù)行的元素
:contains(text); 獲取到包含某一段文本的元素
:has(); 獲取到包含某一個(gè)標(biāo)簽的元素
修改樣式
.css(樣式名，樣式值);
---------------------------------
jquery操作：
jquery中的所有的獲取都是獲取的第一個(gè)
操作樣式
.css('樣式名'); 獲取樣式
.css('樣式名'，'樣式值'); 設(shè)置一個(gè)樣式
.css({樣式名：樣式值，樣式名：樣式值}); 批量設(shè)置樣式
操作屬性
.attr('屬性名'); 獲取樣式
.attr('屬性名'，'屬性值'); 設(shè)置一個(gè)樣式
.attr({屬性名：屬性值，屬性名：屬性值}); 批量設(shè)置樣式
操作內(nèi)容
表單元素
.val(''); 設(shè)置
.val(); 獲取
非表單元素
.html('') 設(shè)置
.html(); 獲取
操作class
添加class
addClass('class') 添加
刪除class
removeClass('class') 刪除
----------------------------------
.eq 下標(biāo)的意思
jquery中的this
$(this)
得到當(dāng)前元素的索引
$(this).index();
----------------------------------
jquery的DOM
$('div').append('<strong>jquery</strong>') 在div內(nèi)部的最后面追加一個(gè)strong
$('strong').appendTo('div') 把strong追加到div元素內(nèi)部中后面
$('<em></em>').appendTo('div') 創(chuàng)建一個(gè)em追加到div內(nèi)部中后面
$('div').prepend('<strong>jquery</strong>') 在div內(nèi)部的最前面追加一個(gè)strong
$('strong').prependTo('div') 把strong追加到div元素內(nèi)部中前面
$('<em></em>').prependTo('div') 創(chuàng)建一個(gè)em追加到div內(nèi)部中前面
$('div').after('<strong></strong>') 把strong添加到div后面
$('div').bofore('<strong></strong>') 把strong添加到div面前
$('p').inserAfter('div') 把p放到div外部后面
$('div').inserBofore('p') 把div放到p內(nèi)部前面
----------------------------------
創(chuàng)建一個(gè)元素
$('標(biāo)簽');
刪除元素
$('div').remove();
---------------------------------
jquery事件
jquery中所有的事件都是綁定上去的
jquery事件中的綁定
$(選擇器).bind('事件',fn);
$(選擇器).on('事件',fn);
jquery事件中的解除綁定
$(選擇器).unbind('事件',fn);
$(選擇器).off('事件',fn);
使用時(shí)一定要注意：
$(選擇器).unbind(); 把所有元素都解除綁定
事件委托
$().live('事件',fn);
解除事件委托
$().die('事件',fn);
ev事件對(duì)象直接是兼容的。
return false; 阻止默認(rèn)事件，取消冒泡
阻止默認(rèn)事件
ev.preventDefault();
取消冒泡
ev.stopPropagation();
$().position().left
$().position().top
-------------------------------------
jquery 物體信息
獲取相對(duì)于父級(jí)的位置 不包括margin
$('選擇器').position().left offsetLeft
$('選擇器').position().top offsetTop
獲取元素的絕對(duì)位置
$('選擇器').offset().left getPos().left
$('選擇器').offset().top getPos().top
$('選擇器').width() 純寬度
$('選擇器').height() 純高度
$('選擇器').innerWidth() 寬度+padding
$('選擇器').innerHeight() 高度+padding
$('選擇器').outerWidth() 高度+padding+border 盒子模型offsetWidth
$('選擇器').outerHeight() 高度+padding+border 盒子模型offsetHeight
==================================
原生JS對(duì)象:document.getElementById
原生JS對(duì)象不能使用jquery中的方法和屬性
jquery對(duì)象:$()
jquery對(duì)象不能使用原生JS中的方法和屬性
原生JS對(duì)象和jquery對(duì)象轉(zhuǎn)換
原生JS對(duì)象-》jquery對(duì)象
用$()包起來
jquery對(duì)象-》原生JS對(duì)象
1.$('選擇器')[下標(biāo)]
2.$('選擇器').get(下標(biāo))
index() 當(dāng)前這個(gè)元素在同級(jí)元素中的第幾個(gè)
工具：
$.trim(obj) 去掉字符串兩端的空格
$.isarray(obj) 判斷是否是數(shù)組，是就返回ture,否側(cè)返回false
$.type(obj) 檢測是什么數(shù)據(jù)類型
==================================
jquery的鏈?zhǔn)讲僮?
siblings(); 同級(jí)
==================================
jquery插件 非常火
關(guān)于插件有兩種人：
用插件的人 舒服 簡單，快速，提高工作效率
寫插件的人 更舒服 $$$
==================================
****jquery中所有的this都是JS原生對(duì)象，但有一個(gè)例外，在插件
里面this就是jquery對(duì)象。
寫插件
$.fn.xxx=function(){
}
$.fn.插件名=function(){
}
$.fn.extend({
插件名:function(){
},
插件名:function(){
}
})
=================================
jquery中的循環(huán)
$('選擇器').each(function(index,element){
//index 索引
//elemnt 每一個(gè)原生對(duì)象
//this 每一個(gè)原生對(duì)象
})
-------------------------------------
cookie 存東西
===============================
1.要知道如何使用
2.要知道什么時(shí)候使用
===============================
cookie的特性：
1.必須配合服務(wù)器環(huán)境使用
2.cookie是成對(duì)出現(xiàn)的。一個(gè)名字對(duì)應(yīng)著一個(gè)值
3.cookie不安全，所以不會(huì)去保存一些重要的數(shù)據(jù)
4.cookie的容量是有限的，比較小，差不多有4KB左右
5.cookie有生命周期。生命周期：活多久。
expires 生命周期
默認(rèn)是 Session
session 當(dāng)會(huì)話結(jié)束時(shí)，就死掉。
當(dāng)瀏覽器關(guān)閉時(shí)，會(huì)話算是結(jié)束了。
6.cookie不能跨域名
7.cookie不能跨瀏覽器
8.cookie作用域：
/2015-10-21/a/b 一個(gè)cookie只有在這個(gè)路徑下使用
name value path expires
名字 存的東西 存到哪 生存周期
==============================
1.如何來創(chuàng)建一個(gè)cookie?
document.cookie=''; 錯(cuò)誤的
document.cookie='名字=值'; 正確的
document.cookie='age=18';
創(chuàng)建cookie的時(shí)候設(shè)置一下生命周期
EXPIRES
var oDate=new Date();
oDate.setFullYear(2016);
oDate.setHoure(0,0,0,0);
document.cookie='name=value; EXPIES='+oDate;
真正創(chuàng)建一個(gè)cookie
document.cookie='name=value; PATH=/; EXPIRES='+oDate;
function addCookie(name,value,iDay){
if (iDay) {
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie=name+'='+value+'; PATH=/; EXPIRES='+oDate.toGMTString();
} else{
document.cookie=name+'='+value+'; PATH=/;
}
}
2.獲取cookie
如何獲取cookie?
function getCookie(name){
var arr=document.cookie.split('; ');
for (var i=0;i<arr.length;i++) {
var arr2=arr[i].split('=');
if (arr2[0]==name) {
return arr2[1];
}
}
}
3.如何刪除一個(gè)cookie
function removeCookie(name){
addCookie(name,1,-1);
}
在不同瀏覽器下日期格式是不同的：2種
1.GMT
2.UTC
把日期轉(zhuǎn)成GMT格式：
oDate.toGMTString();
===============================
1.要知道如何使用 √
2.要知道什么時(shí)候使用
===============================
前端
切圖+JS 偏南 8K-15K
交互 非常簡單 8K以上
--------------------------------------
交互：玩的就是數(shù)據(jù)
1.form表單 交互 提交數(shù)據(jù)
form想要提交數(shù)據(jù)必須有的東西
action 地址
name value
submit 提交
method 提交方式
GET
明文提交，不安全，容量小（32KB），緩存
POST
密文提交，相對(duì)安全，容量大（1GB），沒緩存
GET優(yōu)勢：便于分享
緩存：cache,同一個(gè)網(wǎng)頁，同一個(gè)地址，只會(huì)訪問一次。
form表單交互，已經(jīng)漸漸的退出了舞臺(tái)
原因：
1.刷新頁面（覆蓋頁面），用戶體驗(yàn)差，浪費(fèi)帶寬（浪費(fèi)錢）
2.從服務(wù)器取數(shù)據(jù)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
ajax:
無刷新從服務(wù)器取數(shù)據(jù)
服務(wù)器：電腦，存東西
web服務(wù)器：響應(yīng)瀏覽器（客戶端請(qǐng)求）請(qǐng)求
wamp window 手動(dòng)啟動(dòng)
appserv 自動(dòng)啟動(dòng)
mamp mac
==================================
**********ajax配合服務(wù)器環(huán)境
**********確保服務(wù)器安裝路徑?jīng)]有中文，以后創(chuàng)建項(xiàng)目(文件夾和文件)都不要用中文
==================================
-------------------------------------
ajax比較難
用著難
==================================
ajax到底怎么用？
ajax(地址，成功的回調(diào)函數(shù)，失敗的回調(diào)函數(shù));
ajax(url,fnSuss,fnFail);
回調(diào)函數(shù):你只需要去定義函數(shù)，具體什么時(shí)候執(zhí)行，到底執(zhí)不執(zhí)行，
你都關(guān)心不著，你也關(guān)心不了。
例：
ajax('a.txt',function(a){
alert(a);
},function(){
alert('!ok');
})
---------------------------------
****ajax注意：
1.緩存 cache
同一個(gè)網(wǎng)址，同一個(gè)資源，只會(huì)訪問一次。
處理緩存問題：
=Math.random(); 推薦使用
=new Date().getTime();
例：
ajax('a.txt?t='+Math.random(),function(a){
alert(a);
},function(){
alert('!ok');
})
2.ajax返回的結(jié)果，都是string
需要eval
eval('('+str+')');
eval不安全，不讓用。
eval的替代品：
new Function('return'+str)();
用eval,因?yàn)樯线呥@個(gè)更不安全。
注：用eval解析的時(shí)候兩邊要加上();
3.亂碼
編碼不統(tǒng)一
UTF-8 國際編碼
GB2312 國產(chǎn)
都會(huì)用UTF-8編碼
4.不關(guān)心后綴名
后綴名是給人看的。
================================
微博。換一換(局部刷新)
===========================
**造假數(shù)據(jù)
先ajax，然后再創(chuàng)建元素
**先交互，后做你的功能。
-------------------------------------
寫ajax:
1.創(chuàng)建一個(gè)ajax
var oAjax=new XMLHttpRequset();
requset 請(qǐng)求非 IE6瀏覽器
IE6本身并沒有ajax，如果想實(shí)現(xiàn)要用插件
var oAjax=new ActiveXObject('Microsoft.XMLHTTP'); IE6瀏覽器
假的東西可以去判斷，但是報(bào)錯(cuò)的東西沒法判斷;
訪問一個(gè)不存在的變量或者函數(shù)的時(shí)候，會(huì)報(bào)錯(cuò)。但是如果，訪問一個(gè)不存在的
屬性就會(huì)是undefined;
2.打開一個(gè)連接
oAjax.open(提交方式,url,true(是否異步));
oAjax.open('GET',url,true(是否異步));
異步 一次只能做一件事 ajax就是做多件
同步 一次能做多件事 ajax就是一件
3.發(fā)送
oAjax.send();
4.接收
oAjax.onreadystatechange=function(){
//判斷一下狀態(tài)
if(oAjax.readyState==4){
//判斷http狀態(tài)碼
if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
//成功
alert(oAjax.responseText);
成功之后獲取到的結(jié)果
}else{
//失敗
alert(oAjax.status);
}
}
}
ajax請(qǐng)求的狀態(tài)
0.準(zhǔn)備成功，未發(fā)送
1.發(fā)送成功
2.接收原始數(shù)據(jù)完成
3.解析原始數(shù)據(jù)
4.真正完成
HTTP狀態(tài)碼
-----------------------------------
IE不適合處理中文
編碼
encodeURIComponent(); 把中文轉(zhuǎn)成編碼
decondeURIComponent(); 把編碼轉(zhuǎn)成中文 前端99%用不到
GET
打開連接
oAjax.open('GET',url+'?'+data,true);
發(fā)送
oAjax.send();
------------------------------------
function json2url(){
json.t=Math.random();
var arr=[];
for (var name in json) {
arr.push(name+'='+encodeURIComponent(json[name]));
}
return arr.join('&');
}
function ajax(url,data,fnSucc,fnFaild){
if (window.XMLHttpRequest) {
var oAjax=new XMLHttpRequest();
} else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
}
oAjax.open('GET',url,+'?'+,json2url(data),true);
oAjax.send();
oAjax.onreadystatechange=function(){
if (oAjax.readyState==4) {
if (oAjax.status>=200&&oAjax.status<300||oAjax.status==304) {
fnSucc&&fnSucc(oAjax.responseText);
} else{
fnFaild&&fnFaild(oAjax.status);
}
}
}
------------------------------------
POST
打開連接
oAjax.open('POST',url,true);
設(shè)置請(qǐng)求頭
oAjax.setRequesHeader('Content-type','application/x-www-form-urlencoded');
發(fā)送
oAjax.send(data);
-------------------------------------
"use strict"
function json2url(){
json.t=Math.random();
var arr=[];
for (var name in json) {
arr.push(name+'='+encodeURIComponent(json[name]));
}
return arr.join('&');
}
function ajax(url,data,type,fnSucc,fnFaild){
if (window.XMLHttpRequest) {
var oAjax=new XMLHttpRequest();
} else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
}
switch (type.toLowerCase()){
case 'GET':
oAjax.open('GET',url,+'?'+,json2url(data),true);
oAjax.send();
break;
case 'POST':
oAjax.open('POST',url,true);
oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
oAjax.send(json2url(data));
break;
}
oAjax.onreadystatechange=function(){
if (oAjax.readyState==4) {
if (oAjax.status>=200&&oAjax.status<300||oAjax.status==304) {
fnSucc&&fnSucc(oAjax.responseText);
} else{
fnFaild&&fnFaild(oAjax.status);
}
}
}
-------------------------------------
"use strict"
function json2url(){
json.t=Math.random();
var arr=[];
for (var name in json) {
arr.push(name+'='+encodeURIComponent(json[name]));
}
return arr.join('&');
}
function ajax(json){
json=json||{};
if(!json.url)return;
json.type=json.type||'get';
json.data=json.data||{};
if (window.XMLHttpRequest) {
var oAjax=new XMLHttpRequest();
} else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
}
switch (json.type.toLowerCase()){
case 'GET':
oAjax.open('GET',json.url,+'?'+,json2url(json.data),true);
oAjax.send();
break;
case 'POST':
oAjax.open('POST',json.url,true);
oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
oAjax.send(json2url(json.data));
break;
}
oAjax.onreadystatechange=function(){
if (oAjax.readyState==4) {
if (oAjax.status>=200&&oAjax.status<300||oAjax.status==304) {
json.success&&json.success(oAjax.responseText);
} else{
json.error&&json.error(oAjax.status);
}
}
}
-------------------------------------
"use strict"
function json2url(){
json.t=Math.random();
var arr=[];
for (var name in json) {
arr.push(name+'='+encodeURIComponent(json[name]));
}
return arr.join('&');
}
function ajax(json){
json=json||{};
if(!json.url)return;
json.type=json.type||'get';
json.data=json.data||{};
json.timeout=json.timeout||3000;
var timer=null;
if (window.XMLHttpRequest) {
var oAjax=new XMLHttpRequest();
} else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
}
switch (json.type.toLowerCase()){
case 'GET':
oAjax.open('GET',json.url,+'?'+,json2url(json.data),true);
oAjax.send();
break;
case 'POST':
oAjax.open('POST',json.url,true);
oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
oAjax.send(json2url(json.data));
break;
}
oAjax.onreadystatechange=function(){
if (oAjax.readyState==4) {
if (oAjax.status>=200&&oAjax.status<300||oAjax.status==304) {
clearTimeout(timer);
json.success&&json.success(oAjax.responseText);
} else{
json.error&&json.error(oAjax.status);
}
}
}
timer=setTimeout(function(){
oAjax.onreadystatechange=null;
json.error&&json.error('網(wǎng)絡(luò)超時(shí)');
},json.timeout);
-------------------------------------
確認(rèn)框：
confirm('提示內(nèi)容')
字符串替換
str.replace('被替換的內(nèi)容','替換成誰')
-------------------------------------
ajax不能跨域，跨域的話，用jsonp
跨域很重要！
跨域的作用：
1.第三方驗(yàn)證
2.
需要進(jìn)行跨域：
jsonp json with padding
1.拿到接口
瀏覽器F12->Network->找到su?->右鍵倒數(shù)第二個(gè)選項(xiàng)->wd=&cb= （留著有用，其他的刪除）
例:(百度下拉)
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&json=1&p=3&sid=18439_18634_1466_18240_18534_12824_18545_17000_17073_15616_11755_10633&csor=1&cb=jQuery110209267756657209247_1451359362469&_=1451359362475
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
wd word 想要搜索的關(guān)鍵詞
cd callback 回調(diào)函數(shù)
script標(biāo)簽是一次性的。
解除方法：
每次的時(shí)候，新建立一個(gè)script標(biāo)簽
當(dāng)新建的script用完了在刪除掉
-------------------------------------
例子：
大搜索（搜索引擎）
獲取接口：
百度：
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
搜狗：
https://www.sogou.com/suggnew/ajajjson?key=y&type=web
好搜：
http://sug.so.360.cn/suggest?callback=show&word=a
好360：
http://sug.so.360.cn/suggest?word=b&callback=show
jsonp的步驟：
1.找到接口
2.放到地址欄里看一下能不能用
3.寫功能
-------------------------------------
jsonp的回調(diào)函數(shù)，必須是全局的
'use strict'
function jsonp(json){
//驗(yàn)證參數(shù)
json = json ||{};
if(!json.url)return;
json.cbName = json.cbName||'cb';
json.data = json.data||{};
json.timeout = json.timeout||5000;
var timer = null;
//回調(diào)函數(shù)的名字隨機(jī)。為了防止緩存
json.data[json.cbName] = 'show'+Math.random();
//因?yàn)樽兞棵秃瘮?shù)名不能有.所以把.替換成空
json.data[json.cbName] = json.data[json.cbName].replace('.','');
var arr = [];
for(var name in json.data){
arr.push(name+'='+encodeURIComponent(json.data[name]));
}
var str = arr.join('&');
//回調(diào)函數(shù)
window[json.data[json.cbName]] = function(result){
//取消網(wǎng)絡(luò)超時(shí)提示
clearTimeout(timer);
//執(zhí)行回調(diào)
json.success&&json.success(result);
//當(dāng)回調(diào)執(zhí)行時(shí)，js已經(jīng)不需要了，刪掉
oH.removeChild(oS);
};
//網(wǎng)絡(luò)超時(shí)定時(shí)器
timer = setTimeout(function(){
window[json.data[json.cbName]]=null;
json.error&&json.error('網(wǎng)絡(luò)超時(shí)');
},json.timeout);
//jsonp核心
var oH = document.getElementsByTagName('head')[0];
var oS = document.createElement('script');
oS.src=json.url+'?'+str;
oH.appendChild(oS);
}
-------------------------------------
電話查詢歸屬地
接口：
http://virtual.paipai.com/extinfo/GetMobileProductInfo?mobile=15888888888&amount=10000&callname=show
-------------------------------------
語言特性：
1.垃圾回收
js是一門高級(jí)語言，本身有垃圾回收機(jī)制
一些傳統(tǒng)語言并沒有垃圾回收機(jī)制
比如：C
內(nèi)存溢出：
內(nèi)存泄露：
c語言:硬件廠商使用
垃圾回收機(jī)制如何工作？
生存周期
1.局部 很短 只有函數(shù)調(diào)用完成，局部變量就消失
2.全部 很長 只有瀏覽器關(guān)閉之后才會(huì)消失。
3.閉包 不確定 a).只要里面的函數(shù)還有用，父級(jí)的局部變量就不會(huì)消失
b).只有里面的函數(shù)還有用，父級(jí)所有的局部變量就不會(huì)消失
c).只要里面的函數(shù)還有用，整條作用域鏈上的變量都不會(huì)消失
1.局部
function show(){
var a=12;
}
//調(diào)用前 沒有a
show(); //調(diào)用中 a出現(xiàn)
//調(diào)用后 a干掉了
2.全局
function show(){
var a=12;
}
//調(diào)用前 有a
show(); //調(diào)用中 有a
//調(diào)用后 有a
3.閉包
function show(){
var a=12;
document.onclick=function(){
alert(a);
}
}
document.onclick=null;
function show(){
var a=12;
var b=5;
document.onclick=function(){
alert(a);
}
}
b應(yīng)該消失，但是沒有消失
1.為了性能
2.為了萬無一失
var a=12;
function aaa(){
var b=5;
function bbb(){
var c=3;
document.onclick=function(){
alert(a);
}
}
bbb();
}
aaa();
作用域鏈：先在本層找，如果沒有，找父級(jí)，如果父級(jí)沒有，找父級(jí)的父級(jí)...直到找到全局
2.遞歸
遞歸：大事化小，分而治之。
養(yǎng)兔子：
1.兔子不會(huì)死。
2.兔子可以近親結(jié)婚
3.兔子3個(gè)月長大，長大后每個(gè)月就生一對(duì)小兔子
1 2 3 4 5 6 7 8 9 10
1 1 2 3 5 8 13 21 34 55
var arr=[];
function fn(n){
if(n==1){
return 1;
}else if(n==2){
return 1;
}else {
if(arr[n]){
return arr[n];
}else{
arr[n]=fn(n-1)+fn(n-2);
return arr[n];
}
}
}
fn(n)=fn(n-1)+fn(n-2);
遞歸性能特別好
兔子數(shù)列，兔子算法
斐波那契數(shù)列，斐波那契算法
（屬于算法）
-------------------------------------
性能優(yōu)化
對(duì)于一個(gè)好的程序來說：
1.穩(wěn)定性
2.擴(kuò)展性
3.優(yōu)化
優(yōu)化：
1.網(wǎng)絡(luò)性能（對(duì)于前端來說，網(wǎng)絡(luò)性能重要）
2.執(zhí)行性能
***********************************
網(wǎng)絡(luò)性能
如何查看：
1.瀏覽器 F12 Network 分析用了多長時(shí)間
2.YSlow(yahoo) 能看出問題在哪，并且告訴你如何解決，學(xué)習(xí)工具。
yslow.org/mobile 用火狐打開
怎么用？
兩種用法：
1.插件版 必須安裝firebug，只有老版本的火狐才能使用
2.書簽版 不能檢測HTTPS協(xié)議的
網(wǎng)絡(luò)優(yōu)化：
1.減少HTTP請(qǐng)求：
100個(gè)文件 100鏈接 100請(qǐng)求 100等待 100接收
1個(gè)文件 1鏈接 1請(qǐng)求 1等待 1接收
合并JS文件，CSS文件，圖片
為了減少HTTP請(qǐng)求，減輕服務(wù)器壓力。提高性能
2.代碼壓縮
3.合并
4.gizp.服務(wù)器來做的壓縮。
5.圖片延遲加載，懶加載
6.JS阻塞加載
加載JS的時(shí)候，其他東西都不加載
工作怎么做：
把script放到最下面
css放上面
7.CDN 使內(nèi)容傳輸?shù)母臁⒏€(wěn)定、更安全
-------------------------------------
執(zhí)行性能：
有用的
1.不使用全局變量
2.不用的東西就干掉
3.盡量使用正則
4.盡量使用變量，不要使用屬性
5.
for(var i=0;i<arr.length;i++){
}
var len=arr.length;
for(var i=0;i<leng;i++){
}
6.減少dom操作
不看的運(yùn)動(dòng)，就停下來。
7.盡量不改變css，而是用css3
沒用的
var str='';
str+='abc';
str+='dcd';
set+='def';
var arr=[];
arr.push('abc');
arr.push('bcd');
arr.push('edf');
-------------------------------------
正則：
操作字符串和驗(yàn)證的
不是必須使用。用它只是為了更方便，性能更好
正則 1956
C語言 1972
JAVA 1995
javascript 1995
正則表達(dá)式 Reqular Expression
臺(tái)灣的翻譯：規(guī)則表達(dá)式
報(bào)答的就是一個(gè)規(guī)則
按照某種規(guī)則操作字符串
-------------------------------------
正則玩的就是規(guī)則：
var re=new RegExp('規(guī)則');
var re=new RegExp('規(guī)則','選項(xiàng)');
注：選項(xiàng)可以連著寫
選項(xiàng):
i Ignore 忽略
忽略大小寫
g global 全局
全局匹配
m muti-line 多行模式
單行模式 不加m
^ 整個(gè)只有一個(gè)行首
$ 整個(gè)只有一個(gè)行尾
多行模式 加m
str.search(); 搜索
str.match(); 匹配
replace(); 替換
test(); 校驗(yàn)
-------------------------------------
正則也有簡寫：
var re=new RegExp('規(guī)則','選項(xiàng)');
/規(guī)則/選項(xiàng) （規(guī)則不加任何引號(hào)）
在正則中‘或’用 |表示
例：
/a|b/
轉(zhuǎn)義：
\
\ \\
\n 換行
\t tab 縮進(jìn)
\d 代表了所有的數(shù)字
\w 所有數(shù)字，英文，下劃線
\s 所有空白符號(hào)，空格、tab、換行
\D 除了數(shù)字
\W 除了數(shù)字，英文，下劃線
\S 除了空白符號(hào)
. 點(diǎn)代表，所有的東西
^ 行首
$ 行尾
\b boundary 邊界
\\b 單詞邊界
正則的特性：
1.懶
2.笨
量詞 代表數(shù)量
例：
13個(gè)蘋果
蘋果{13}
若干 模糊
+表示
例：
蘋果+ 最少有一個(gè)最多不限
模糊，若干
3.貪婪
-------------------------------------
替換的寫法：
replace（str,str）;
replace(str||re,str);
replace(str||re,str||fn);
-------------------------------------
[]
1.任選一個(gè)
/a[abc]c/
aac √
abc √
acc √
aabcc ×
/a[d+]c/
adddddddddddddc √
adc √
ac ×
/a[(df)+]c/
adfdfdfdfc √
2.范圍
[a-z] a到z的所有小寫英文字母
[A-Z] A到Z的所有大寫英文字母
[0-9] 0到9的所有數(shù)字
[13-69] 1 3 4 5 6 9
[a-zA-Z0-9] 所有的英文字母和數(shù)字
3.排除
[^0-9] 除了數(shù)字
[^a-z] 除了小寫字母
[^A-Z] 除了大寫字母
[^0-9a-zA-Z] 除了英文字母和數(shù)字
-------------------------------------
量詞
{n} 有n個(gè)
{n,m} 最少有n個(gè),最多有m個(gè)
{n,} 最少有n個(gè),最多無限
{0,1} 有一個(gè)，或者沒有
{0,} 有沒有都行
{1,} 最少一個(gè)，最多不限
? {0,1} 有一個(gè)，或者沒有
+ {1,} 最少一個(gè)，最多不限 推薦
* {0,} 有沒有都行 不推薦
-------------------------------------
str.search(re);
set.mathch(re);
表單校驗(yàn)
test 校驗(yàn)
re.test(str);
校驗(yàn)成功返回true;
校驗(yàn)失敗返回false;
校驗(yàn)座機(jī)號(hào)碼：
010-1234567
010-12345678
0100-1234567
0100-12345678
正則分段去寫:
區(qū)號(hào) - 號(hào)碼
0[1-9]\d{1,2} - [1-9]\d{6,7}
拼起來寫：
/0[1-9]\d{1,2}\-[1-9]\d{6,7}/
test不嚴(yán)謹(jǐn)
解決：
/^0[1-9]\d{1,2}\-[1-9]\d{6,7}$/
校驗(yàn)手機(jī)號(hào)碼：
13810885613
1[^012469]\d{9}
/^1[^012469]\d{9}$/
校驗(yàn)郵箱
xxx@xxx.xxx.xx
用戶名 @ 域名 域名后綴
字母數(shù)字下劃線- 英文數(shù)字- 字母{2,8}
-------------------------------------
addClass
removeClass
getByClass
可以用正則去做
-------------------------------------
MVC model view controller
（后臺(tái)）
model 模型
view 表現(xiàn)
controller 控制
----------------------------------
后臺(tái)MVC
1.后臺(tái)
2.前端
3.編輯
代碼混編，不好
MVC：起到分離的作用
M____model 數(shù)據(jù)層(模型) 后臺(tái)
V____view 視圖層 前端
C____comtroller 控制層
把后臺(tái)的代碼和前端的代碼，分開。
1.代碼分工
2.降低耦合性
耦合性：
耦合性越低越好
---------------------------------
前端MVC
M____model 數(shù)據(jù)層（交互）
V____view 視圖層（dom）
C____controller 控制層--中介
注：先寫M\V層，最后寫C層
--------------------------------
就是一種寫代碼的模式、方法。
例子：百度下拉
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
1.看起來清晰，易于維護(hù)
2.降低耦合性
--------------------------------
模板
例子：簡易輸入欄
--------------------------------
MVC不會(huì)自己寫
1.不是每個(gè)人都會(huì)
2.每個(gè)人有每個(gè)人自己的寫法
使用框架
AngularJS
庫 jquery
輔助你開發(fā)的
你是主導(dǎo)位置
框架 angular
限制你開發(fā)的
框架是主導(dǎo)位置
-------------------------------------
面向?qū)ο?
你不知道原理，但是不影響你使用
-------------------------------
面向?qū)ο螽a(chǎn)生的原因？
最開始太難了。把東西封裝起來。
對(duì)象有兩種人：
用對(duì)象
寫對(duì)象
------------------------------
對(duì)象由什么東西組成的？
對(duì)象只有2個(gè)東西：屬性和方法
關(guān)于屬性和變量
屬性和變量就是一個(gè)東西，只是叫法不同。
屬性是屬于某個(gè)對(duì)象的。
變量是自由的。
關(guān)于函數(shù)和方法
函數(shù)和方法就是一個(gè)東西，只是叫法不同。
方法是屬于某個(gè)對(duì)象的。
函數(shù)是自由的。
this：方法等于誰，this就是誰
//構(gòu)造函數(shù)--創(chuàng)建對(duì)象的
注：首字母必須大寫
-------------------------------
//面向?qū)ο蠛帽纫粋€(gè)加工工廠，首先要有原料（建立對(duì)象），加工原料（對(duì)象都有什么功能），出廠（使用時(shí)得到的是什么）
function Person(name,age){
//原料
var obj=new Object();
//加工
obj.name=name;
obj.value=value;
obj.showName=function(){
alert(this.name);
}
obj.showAge=function(){
alert(this.age);
}
//出廠
return obj;
}
--------------------------------
目前以Array為基礎(chǔ)創(chuàng)建對(duì)象：
有問題。
1.容易沖突
2.效率低
空白的東西比較適合我們。
new Object();
幾乎是空的。
問題：
1.為啥沒有new?
2.每次創(chuàng)建一個(gè)對(duì)象都有一個(gè)新的方法
-------------------------------------
關(guān)于new的問題
new的作用：
1.只有加了new，系統(tǒng)會(huì)自動(dòng)在構(gòu)造函數(shù)頂部幫你 new Object
2.只要加了new,系統(tǒng)會(huì)自動(dòng)在構(gòu)造函數(shù)尾部幫你 return
function Preson(name,age){
//只有加了new,系統(tǒng)會(huì)自動(dòng)幫你
// this=new Object;
this.name=name;
this.age=age;
this.showName=function(){
alert(this.name);
}
this.showAge=function(){
alert(this.age);
}
//只有加了new,系統(tǒng)會(huì)自動(dòng)幫你
// return this;
}
var oP=new Preson('張三','16');
oP.showName();
--------------------------------------
原型
obj.prototype
以后寫面向?qū)ο螅瑢傩允墙o對(duì)象加的
eg:this.name=name;
方法給原型加
eg:Person.prototype.show=function(){
}
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.showName=function(){
alert(this.name);
}
Person.prototype.showAge=function(){
alert(this.age);
}
var oP=new Person('張三',16);
oP.showName();
oP.showAge();
-------------------------------------
類:
Person
Array
Date
Object
對(duì)象:
oDate=new Date();
arr=new Array();
oP=new Person();
****
所有的變量都要變成屬性
所有的函數(shù)都要變成方法
-------------------------------------
this是js里面最惡心的東西。
css有優(yōu)先級(jí)
this也有優(yōu)先級(jí)
this具體是什么，你不知道，只能看調(diào)用
高
new object
定時(shí)器 window
事件 觸發(fā)事件的元素
方法 屬于的那個(gè)對(duì)象
正常調(diào)用 window||undefined
低
1.this要看優(yōu)先級(jí)
2.永遠(yuǎn)要聽最后的調(diào)用
3.定時(shí)器只管一層
-------------------------------------
原型
作用：
1.加方法
2.擴(kuò)展系統(tǒng)方法
arr.indexOf
str.trim
oDate.getCnDay()
-------------------------------------
typeof 檢測數(shù)據(jù)類型
問題：不能檢測對(duì)象。沒有某一個(gè)的具體類型
instanceof 檢測屬于什么東西
constructor 構(gòu)造器
檢測這個(gè)對(duì)象的構(gòu)造函數(shù)是什么
json 就是object
-------------------------------------
js中詭異的事
function instanceof object true
object instanceof function true
function instanceof function true
object instanceof object true
原型鏈：
找一個(gè)東西，先在自身找，如果自身沒有，找父級(jí)，如果父級(jí)的父級(jí)沒有，找父級(jí)的父級(jí)的父級(jí)，直到找到object
面向?qū)ο蟮奶匦裕?
1.封裝：抽，把程序的核心封裝起來，以后重復(fù)調(diào)用
2.**繼承：父級(jí)有的子級(jí)也有，父級(jí)改變子級(jí)也改變
3.多態(tài)：多重繼承
繼承：
父級(jí)有的子級(jí)也有，父級(jí)改變子級(jí)也改變
大項(xiàng)目能體現(xiàn)出父級(jí)的好處
比如：游戲
改變this指向
show.call(想把this變成誰，item,item2,item3...);
apply(想把this變成誰，[item.item2,item3...]);
繼承分兩個(gè)：
1.屬性:
function 父類(name,age){
this.name=name;
this.age=age;
}
function 子類(name,age,job){
(1).父類.call(this,name,age...);
(2).父類.apply(this,arugment);
}
2.方法:
子類.prototype=new 父類();
子類.prototype.constructor=子類
子類.prototype.show=fn;
~~~~~~~~~~~~~~~~~~~~~~~~~
例：
function Preson(name,age){
this.name=name;
this.age=age;
}
Preson.prototype.showName=function(){
return this.name;
}
Preson.prototype.showAge=function(){
return this.age;
}
function Worder(name,age,job){
Preson.apply(this,arguments);
}
Worder.prototype=new Preson();
Worker.prototype.constructor=Worder;
Worder.prototype.showjob=function(){
return this.job;
}
-------------------------------------
面向?qū)ο螅?
混合模式：構(gòu)造+原型
單利模式(命名空間)：json
-------------------------------------
變量名沖突：
1.封閉空間
2.面向?qū)ο?3.命名空間
YUI yahoo
4.模塊化
-------------------------------------
右下角懸浮窗判讀是不是ie6
window.onload = window.onresize = window.onscroll = function(){
//判斷是不是IE6
if(window.navigator.userAgent.indexOf('MSIE 6.0')!=-1){
var oDiv = document.getElementById('div1');
//滾動(dòng)距離
var sH =document.documentElement.scrollTop||document.body.scrollTop;
//可視區(qū)的距離
var cH = document.documentElement.clientHeight;
//物體盒模型的高
var oH = oDiv.offsetHeight;
oDiv.style.top = sH+cH - oH +'px';
}
};
----------------------------------------------------------
吸頂條的效果
function getPos(obj){
var left = 0;
var top = 0;
while(obj){
left+=obj.offsetLeft;
top+=obj.offsetTop;
obj = obj.offsetParent;
}
return {
"left":left,
"top":top
};
}
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oT = getPos(oDiv1).top;//div所在的位置到top的高度
window.onscroll = function(){
var sT = document.documentElement.scrollTop||document.body.scrollTop;//獲取滾動(dòng)的距離的兼容性寫法
if(sT>=oT){
oDiv1.style.position = 'fixed';
oDiv2.style.display = 'block';
}else{
oDiv1.style.position ='';
oDiv2.style.display = 'none';
}
};
};
-----------------------------------------------------------
瀑布流下拉無限加載
function createLi(){
var oLi = document.createElement('li');
//oli的高度是50px-300px之間
oLi.style.height = parseInt(50+Math.random()*300)+'px';
//oli的背景顏色隨機(jī)變化
oLi.style.background = 'rgb('+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')';
return oLi;
}
window.onload = function(){
var oBox = document.getElementById('box');
//獲取obox下面的子集
var aUl = oBox.children;
//createLis創(chuàng)造的一群li
function createLis(){
var arr = [];
for(var i = 0;i<20;i++){
var oLi = createLi();//創(chuàng)建 oLi的函數(shù)
for(var j = 0;j<aUl.length;j++){
arr.push(aUl[j]);
//push增加
}
//循環(huán)判斷 3個(gè)ul中最矮的 那個(gè) offsetHeigth
arr.sort(function(ul1,ul2){
//sort是排序
return ul1.offsetHeight - ul2.offsetHeight;
});
arr[0].appendChild(oLi);
//往最后一個(gè)節(jié)點(diǎn)添加
}
}
//加載了20個(gè)Li
createLis();
window.onscroll = function(){
var sH = document.body.scrollHeight;//文檔的內(nèi)容高
var cH = document.documentElement.clientHeight; // 可視區(qū)的高
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;// 滾動(dòng)距離
if(scrollTop == sH -cH){//文檔的內(nèi)容高 - 可視區(qū)的高 == 滾動(dòng)距離
createLis();
}
};
};
-----------------------------------------------------------
js所有的例子
1.鼠標(biāo)滾輪
2.瀑布流
3.圖片懶加載
4.吸頂條
5.星星評(píng)分
6.選項(xiàng)卡
7.自動(dòng)播放選項(xiàng)卡
8.無縫滾動(dòng)完整版
9.圖片時(shí)鐘
10.簡易日歷
11.雙色球
12.聯(lián)動(dòng)全選
13.球
14.許愿墻
15.wabqq
16.高級(jí)留言板
17.簡易秒表
18.右下角懸浮框
19.拖拽
20.帶框拖拽
21.磁性拖拽
22.限制范圍拖拽
23.無縫滾動(dòng)（無縫連接）
24.設(shè)置時(shí)間
25.ajxa
26.json
27.jsonp
28.move
29.cooker
30.圖片放大
31.放大鏡
32.鼠標(biāo)加滾輪
33.圖片加載進(jìn)度條
34.正則
35.鼠標(biāo)離誰進(jìn)誰放大
36.碰撞檢測
37.圓
38.極丑視差滾動(dòng)
39.360度旋轉(zhuǎn)
40.回到頂部
41.九宮格拖拽
42.拖拽回放
43.MVC
44.jquery
45.面向?qū)ο?
46.倒計(jì)時(shí)
47.手風(fēng)琴
48.無規(guī)則切換圖片
49.手機(jī)圖片切換拖拽
50.3D圖片切換
51.下拉菜單
52.各種運(yùn)動(dòng)
53.焦點(diǎn)圖
54.分頁
55.鼠標(biāo)控制DIV移動(dòng)
56.上移下移
57.右鍵菜單
58.qq頭像
59.延遲廣告
60.全選不選反選
61.百度貼吧時(shí)鐘
62.分布運(yùn)動(dòng)
63.穿墻
64.蘋果菜單
65.doMove
66.qq視頻
67.滾動(dòng)控制百分比
68.輪播圖
69.百度下拉
