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