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ù)解析--------火狐下沒問題苹享。双絮。浴麻。待解釋。
引用：在對象身上會(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á)式
賦值本身是有值的
逗號表達(dá)式：聽后面的東西
判斷：聽后面的
alert：因?yàn)閍lert是函數(shù)調(diào)用噩斟，用逗號相隔曹锨，被當(dāng)成了傳參。如果想讓逗號表達(dá)式好使剃允，加括號提高優(yōu)先級
賦值：因?yàn)槎紩?huì)表達(dá)式沛简，優(yōu)先級特別低，所以先算賦值硅急，后算逗號覆享。加括號就好了
逗號表達(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'必須放在第一位置；
高級瀏覽器兼容辽故，IE9除外徒仓；
------------------------------------
異常 bug
程序員不可控制的東西。
try...catch...
try(){
可能會(huì)出錯(cuò)的代碼誊垢；
}catch(){
e代表了掉弛，錯(cuò)誤信息
補(bǔ)救措施
}
不要用症见。救急的時(shí)候用。線上bug用
性能差
-------------------------------------
js由什么組成殃饿？
ECMAScript 核心解釋器
定義了一些基本的語法和功能谋作。
兼容性：完全兼容。因?yàn)楸谏梗峁┑亩际亲罨敬擅牵詈唵蔚墓δ堋?---------------------------
DOM 文檔對象模型 Document Object Model
document 所有文檔的操作。
獲取元素秒咐，改變顏色谬晕。刪除元素，改個(gè)寬度携取，創(chuàng)建個(gè)元素攒钳，修改個(gè)內(nèi)容。
兼容性：基本兼容雷滋，有不兼容的不撑，可以解決。
---------------------------
BOM 瀏覽器對象模型 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 文本對象模型
標(biāo)簽=元素=節(jié)點(diǎn)
DOM樹
獲取標(biāo)簽名
obj.tagName 每個(gè)字母都是大寫的
獲取父級的子節(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 只兼容高級瀏覽器
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 只兼容高級瀏覽器
obj.previousSibling 只兼容低版瀏覽器
兼容寫法：
var oPre=obj.previousElementSibling||obj.previousSibling;
---------------------------------------------------------
獲取首尾子節(jié)點(diǎn)：
獲取首子節(jié)點(diǎn)
父級.firstElementChild 只兼容高級瀏覽器
父級.firstChild 只兼容低版瀏覽器
兼容寫法：
var oFirst=父級.firstElementChild||父級.firstChild
獲取尾子節(jié)點(diǎn)
父級.lastElementChild 只兼容高級瀏覽器
父級.lastChild 只兼容低版瀏覽器
兼容寫法：
var oFirst=父級.lastElementChild||父級.lastChild
--------------------------------------------------------
物體信息：
obj.offsetWidth; 獲取盒子模型的寬度
obj.offsetHeight; 獲取盒子模型的高度
obj.offsetLeft; 距離定位父級的左邊距
obj.offsetTop; 距離定位父級的上邊距
getStyle offsetWidth
類型 string number
width 純width 盒子模型的寬度
none 能獲取 不能獲取
obj.offsetParent 獲取到定位父級
關(guān)于父級
obj.parentNode 結(jié)構(gòu)上的父級 最大document
obj.offsetParent 定位上的父級 最大body
-----------------------------------------------------
字節(jié)
英文字母 1字節(jié)
數(shù)字 1字節(jié)
漢字 GB2312 2字節(jié)
UTF-8 3字節(jié)
-----------------------------------------------------
創(chuàng)建元素
document.createElement('標(biāo)簽名') 創(chuàng)建出來的元素跟html中寫的一模一樣
插入
父級.appendChild(新元素) 在元素的最后面插入一個(gè)東西
父級.insertBefore(要插入顽素，插入誰) 插入到誰誰之前
刪除元素
父級.removeChild(要?jiǎng)h除的元素) 從父級中刪除某個(gè)元素
克隆元素
obj.cloneNode();
obj.cloneNode(true); 深度克隆
會(huì)把內(nèi)容一起克隆
會(huì)把ID一起克隆，所有要注意：
克隆之后要把ID刪掉
但是有問題徒蟆，會(huì)留一個(gè)空的ID胁出，不好看。后面待解決段审。全蝶。。
-------------------------------------
BOM 瀏覽器對象模型
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
---------------------------------------
獲取絕對位置
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è)置自定義屬性
要成對出現(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ā)
圖片對象
new Image(); 創(chuàng)建一個(gè)圖片對象
這種寫法跟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
密文提交鸟缕，相對安全,容量大（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)事件
===================================
事件對象 包含了事件的詳細(xì)信息。
參數(shù)ev 兼容：高版本瀏覽器
event 兼容：IE缘薛，chrome
兼容寫法: var oEvent = ev||event;
獲取鼠標(biāo)在可視區(qū)中的坐標(biāo)
橫軸坐標(biāo)X 事件對象.clientX
縱軸坐標(biāo)Y 事件對象.clientY
鼠標(biāo)在頁面中的坐標(biāo)： 只兼容高版本瀏覽器
oEvent.pageX
oEvent.pageY
以后只要是使用到了可視區(qū)中的坐標(biāo)窍育，就一定要加上滾動(dòng)距離
事件冒泡
子級觸發(fā)了事件卡睦，會(huì)找父級相同的事件，一直找到頂漱抓。
哪怕子級沒有這個(gè)事件表锻，也會(huì)往上冒。
找父級乞娄，是按照結(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)
-------------------------------------
放大鏡：
事件對象：只能獲取鼠標(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 兼容高級瀏覽器
事件不用處理兼容
obj.onpropertychange=obj.oninput=function(){}
IE9兼容了嗎？刪除不好用
-------------------------------------
**在工作當(dāng)中所有的事件必須綁定上去
**因?yàn)檫@個(gè)事件不一定只有你一個(gè)人使用
同一個(gè)元素加同一個(gè)事件靶病，不能加多次会通，后加的會(huì)把先加的覆蓋。
事件綁定(事件監(jiān)聽) 給同一個(gè)元素加同一個(gè)事件加多次娄周。
obj.addEventListener(sEv,fn,flase); 兼容高級瀏覽器涕侈，事件名不能加'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 子級往父級找 所有瀏覽器（冒泡）
事件捕獲（捕獲階段）;true 父級往子級找 高級瀏覽器(冒泡和捕獲)
只有高級瀏覽器有，因?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)事件 兼容高級瀏覽器
回調(diào)函數(shù)
-------------------------------------
移入移出bug:
onmouseover
oEvent.fromElement（不兼容火狐）
oEvent.relatedTarget(兼容高級瀏覽器)
兼容寫法：
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(兼容高級瀏覽器)
兼容寫法：
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α=對邊比斜邊 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)客戶端的請求
把自己的計(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
事件對象
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的
不是版本號越高就越好人断。
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元素
層級選擇器
$('#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事件對象直接是兼容的全度。
return false; 阻止默認(rèn)事件，取消冒泡
阻止默認(rèn)事件
ev.preventDefault();
取消冒泡
ev.stopPropagation();
$().position().left
$().position().top
-------------------------------------
jquery 物體信息
獲取相對于父級的位置 不包括margin
$('選擇器').position().left offsetLeft
$('選擇器').position().top offsetTop
獲取元素的絕對位置
$('選擇器').offset().left getPos().left
$('選擇器').offset().top getPos().top
$('選擇器').width() 純寬度
$('選擇器').height() 純高度
$('選擇器').innerWidth() 寬度+padding
$('選擇器').innerHeight() 高度+padding
$('選擇器').outerWidth() 高度+padding+border 盒子模型offsetWidth
$('選擇器').outerHeight() 高度+padding+border 盒子模型offsetHeight
==================================
原生JS對象:document.getElementById
原生JS對象不能使用jquery中的方法和屬性
jquery對象:$()
jquery對象不能使用原生JS中的方法和屬性
原生JS對象和jquery對象轉(zhuǎn)換
原生JS對象-》jquery對象
用$()包起來
jquery對象-》原生JS對象
1.$('選擇器')[下標(biāo)]
2.$('選擇器').get(下標(biāo))
index() 當(dāng)前這個(gè)元素在同級元素中的第幾個(gè)
工具：
$.trim(obj) 去掉字符串兩端的空格
$.isarray(obj) 判斷是否是數(shù)組斥滤，是就返回ture,否側(cè)返回false
$.type(obj) 檢測是什么數(shù)據(jù)類型
==================================
jquery的鏈?zhǔn)讲僮?
siblings(); 同級
==================================
jquery插件 非辰遥火
關(guān)于插件有兩種人：
用插件的人 舒服 簡單，快速佑颇，提高工作效率
寫插件的人 更舒服 $$$
==================================
****jquery中所有的this都是JS原生對象顶掉，但有一個(gè)例外，在插件
里面this就是jquery對象挑胸。
寫插件
$.fn.xxx=function(){
}
$.fn.插件名=function(){
}
$.fn.extend({
插件名:function(){
},
插件名:function(){
}
})
=================================
jquery中的循環(huán)
$('選擇器').each(function(index,element){
//index 索引
//elemnt 每一個(gè)原生對象
//this 每一個(gè)原生對象
})
-------------------------------------
cookie 存東西
===============================
1.要知道如何使用
2.要知道什么時(shí)候使用
===============================
cookie的特性：
1.必須配合服務(wù)器環(huán)境使用
2.cookie是成對出現(xiàn)的痒筒。一個(gè)名字對應(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
密文提交奄妨，相對安全涂籽，容量大（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)瀏覽器（客戶端請求）請求
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 請求非 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請求的狀態(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è)置請求頭
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.#/suggest?callback=show&word=a
好360：
http://sug.so.#/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ī)制
一些傳統(tǒng)語言并沒有垃圾回收機(jī)制
比如：C
內(nèi)存溢出：
內(nèi)存泄露：
c語言:硬件廠商使用
垃圾回收機(jī)制如何工作装处？
生存周期
1.局部 很短 只有函數(shù)調(diào)用完成均澳，局部變量就消失
2.全部 很長 只有瀏覽器關(guān)閉之后才會(huì)消失。
3.閉包 不確定 a).只要里面的函數(shù)還有用，父級的局部變量就不會(huì)消失
b).只有里面的函數(shù)還有用找前，父級所有的局部變量就不會(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();
作用域鏈：先在本層找躺盛，如果沒有项戴，找父級，如果父級沒有槽惫，找父級的父級...直到找到全局
2.遞歸
遞歸：大事化小周叮，分而治之。
養(yǎng)兔子：
1.兔子不會(huì)死界斜。
2.兔子可以近親結(jié)婚
3.兔子3個(gè)月長大仿耽，長大后每個(gè)月就生一對小兔子
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)化
對于一個(gè)好的程序來說：
1.穩(wěn)定性
2.擴(kuò)展性
3.優(yōu)化
優(yōu)化：
1.網(wǎng)絡(luò)性能（對于前端來說项贺，網(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請求：
100個(gè)文件 100鏈接 100請求 100等待 100接收
1個(gè)文件 1鏈接 1請求 1等待 1接收
合并JS文件奕删，CSS文件，圖片
為了減少HTTP請求疗认，減輕服務(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ī)則不加任何引號）
在正則中‘或’用 |表示
例：
/a|b/
轉(zhuǎn)義：
\
\ \\
\n 換行
\t tab 縮進(jìn)
\d 代表了所有的數(shù)字
\w 所有數(shù)字侣夷，英文，下劃線
\s 所有空白符號仑乌，空格百拓、tab琴锭、換行
\D 除了數(shù)字
\W 除了數(shù)字捏浊，英文责静，下劃線
\S 除了空白符號
. 點(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ī)號碼：
010-1234567
010-12345678
0100-1234567
0100-12345678
正則分段去寫:
區(qū)號 - 號碼
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ī)號碼：
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)生的原因购公？
最開始太難了萌京。把東西封裝起來雁歌。
對象有兩種人：
用對象
寫對象
------------------------------
對象由什么東西組成的宏浩？
對象只有2個(gè)東西：屬性和方法
關(guān)于屬性和變量
屬性和變量就是一個(gè)東西，只是叫法不同靠瞎。
屬性是屬于某個(gè)對象的比庄。
變量是自由的。
關(guān)于函數(shù)和方法
函數(shù)和方法就是一個(gè)東西乏盐，只是叫法不同佳窑。
方法是屬于某個(gè)對象的。
函數(shù)是自由的父能。
this：方法等于誰神凑，this就是誰
//構(gòu)造函數(shù)--創(chuàng)建對象的
注：首字母必須大寫
-------------------------------
//面向?qū)ο蠛帽纫粋€(gè)加工工廠，首先要有原料（建立對象）何吝，加工原料（對象都有什么功能）溉委，出廠（使用時(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)建對象：
有問題。
1.容易沖突
2.效率低
空白的東西比較適合我們爱榕。
new Object();
幾乎是空的瓣喊。
問題：
1.為啥沒有new?
2.每次創(chuàng)建一個(gè)對象都有一個(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對象加的
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
對象:
oDate=new Date();
arr=new Array();
oP=new Person();
****
所有的變量都要變成屬性
所有的函數(shù)都要變成方法
-------------------------------------
this是js里面最惡心的東西藻三。
css有優(yōu)先級
this也有優(yōu)先級
this具體是什么洪橘，你不知道，只能看調(diào)用
高
new object
定時(shí)器 window
事件 觸發(fā)事件的元素
方法 屬于的那個(gè)對象
正常調(diào)用 window||undefined
低
1.this要看優(yōu)先級
2.永遠(yuǎn)要聽最后的調(diào)用
3.定時(shí)器只管一層
-------------------------------------
原型
作用：
1.加方法
2.擴(kuò)展系統(tǒng)方法
arr.indexOf
str.trim
oDate.getCnDay()
-------------------------------------
typeof 檢測數(shù)據(jù)類型
問題：不能檢測對象棵帽。沒有某一個(gè)的具體類型
instanceof 檢測屬于什么東西
constructor 構(gòu)造器
檢測這個(gè)對象的構(gòu)造函數(shù)是什么
json 就是object
-------------------------------------
js中詭異的事
function instanceof object true
object instanceof function true
function instanceof function true
object instanceof object true
原型鏈：
找一個(gè)東西熄求，先在自身找，如果自身沒有岖寞，找父級抡四，如果父級的父級沒有，找父級的父級的父級仗谆，直到找到object
面向?qū)ο蟮奶匦裕?
1.封裝：抽指巡，把程序的核心封裝起來，以后重復(fù)調(diào)用
2.**繼承：父級有的子級也有隶垮，父級改變子級也改變
3.多態(tài)：多重繼承
繼承：
父級有的子級也有藻雪，父級改變子級也改變
大項(xiàng)目能體現(xiàn)出父級的好處
比如：游戲
改變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.星星評分
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.高級留言板
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.百度下拉
