溫故而知新朋鞍，可以為師矣诗良。

譯文

集中式代碼管理工具

SVN：管理代碼

服務(wù)端存代碼的

客戶端? ? 1 上傳代碼

? ? ? ? ? ? ? ?2? 下載代碼

less：css的預(yù)處理

如何使用less??

HTML ：超文本標(biāo)記語(yǔ)言

Css：? ? 層疊樣式表

JavaScript：? ?腳本語(yǔ)言

1 js

2 效果交互

3 數(shù)據(jù)交互

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?JS

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 給頁(yè)面添加效果

? ? ? ? ? ? ? ? ? 操作樣式? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?操作屬性

HTML怎么寫JS就怎么寫? ? ? ? ? 注意：

復(fù)合樣式

margin-left---------------------------------------marginLeft燃辖；

background-color -----------------------------backgroundColor

border-top----------------------------------------borderTop

CSS怎么寫JS就怎么寫? ? ? ? ? ? ?注意：

class ---------------------------------------------------------------------className

class是js保留的關(guān)鍵字

函數(shù)

聲明函數(shù)

function 函數(shù)名(){

? ? ? ? 代碼

}

調(diào)用函數(shù)

函數(shù)名();

注意：

函數(shù)聲明了开伏，但是沒(méi)有調(diào)用：什么都不發(fā)生，函數(shù)內(nèi)的代碼不執(zhí)行

函數(shù)沒(méi)聲明号俐，就調(diào)用：報(bào)錯(cuò)：函數(shù)名 is not defined函數(shù)沒(méi)有定義

選擇器

document.getElementById( )? ? ? ? ? ? ? ? ?通過(guò)id過(guò)去一個(gè)元素

document.getElementsByTagName( )? 通過(guò)標(biāo)簽名獲取一組元素

document.getElementsClassName()通過(guò)class獲取一組元素

html? ? ? ? ? ? ? ? ? ? ? ?document.documentElement

body? ? ? ? ? ? ? ? ? ? ? document.body

循環(huán)

1.初始化

2.條件

3.語(yǔ)句

4.自增(改變條件)

while

while(條件){

? ? ?語(yǔ)句

}

for

for(初始化;條件;自增){

? ? ?語(yǔ)句

}

當(dāng)操作一組的時(shí)候使用for循環(huán)

this

?那個(gè)元素觸發(fā)的事件 就是this

i的問(wèn)題? ?執(zhí)行時(shí)機(jī)的問(wèn)題

循環(huán)中加事件 事件中使用i

.?

只能用固定的值

[ ]?

?里面放的是字符串蚕键，可以放變量或?qū)傩?/h4>

---

數(shù)據(jù)類型

1? ? ? ? ? 種類

1 number? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 數(shù)字

2 string? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?字符串

3 boolean? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?布爾值

4 undefind? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 未定義? ? ? ? true? ? ?false

5 object? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?對(duì)象

6 function? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?函數(shù)

2? ? ? ? ? ?檢測(cè)基本數(shù)據(jù)類型? ? ? ? ? ?typeof

3? ? ? ? ? 數(shù)據(jù)類型的轉(zhuǎn)換

顯式轉(zhuǎn)換(強(qiáng)制轉(zhuǎn)換)

字符串?dāng)?shù)字-》整數(shù)

var num = parseInt(字符串?dāng)?shù)字);

字符串?dāng)?shù)字-》小數(shù)

var num = parseFloat(字符串?dāng)?shù)字);

字符串?dāng)?shù)字-》數(shù)字

var num = Number(字符串?dāng)?shù)字);? ? ? 嚴(yán)格

-------------------------------------------------------

隱式轉(zhuǎn)換

12+'abc'

'12'-5

NaN Not a Number

誰(shuí)都不等于救欧，包括自己。檢測(cè)是否是NaN

isNaN(值)：如果是 就是true否則 就是false

命名規(guī)范

匈牙利命名法

oBtn? ? ? ? ? ? ? ? ? ? ? ? ? ?一個(gè)按鈕

aBtn? ? ? ? ? ? ? ? ? ? ? ? ? ? 一組按鈕

sName? ? ? ? ? ? ? ? ? ? ? ? 字符串的名字

iAge? ? ? ? ? ? ? ? ? ? ? ? ? ? 整數(shù)年齡

fPrice? ? ? ? ? ? ? ? ? ? ? ? ? 小數(shù)價(jià)格

流程控制語(yǔ)句

if（）{

? ?}

else if（）{? ?

}

else if（）{? ??

}

switch

switch( 變量){

case itme1：

語(yǔ)句

break锣光；

case itme2:

語(yǔ)句

break笆怠；

case itme3：

語(yǔ)句

break；

default：

語(yǔ)句

break誊爹；

? ? ? ? ? ?}

真? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?假

ture? 非0數(shù)字 非空字符串 非空對(duì)象? ? ? ?false 0 空字符串? NaN null? undefined

return

function(參數(shù)){

coding

return;

}

調(diào)用某個(gè)函數(shù)蹬刷，可以返回一個(gè)東西

return的特點(diǎn)

1 如果不寫return 返回undefined；

2 如果寫了return频丘，但是沒(méi)有值 也返回undefined办成；

3 return 后面的程序不執(zhí)行

return 的作用

1 返回東西

2 后面的程序不執(zhí)行，阻斷程序執(zhí)行搂漠；

運(yùn)算符

算術(shù)運(yùn)算符

+ - * / %(模迂卢、取余)

賦值運(yùn)算符

=? ? ? ? ? ? ? ? ? += -= *= /= %=

比較運(yùn)算符

> < >= <? ? ? ? ? ? ? ? ? ?!=(不等)? ? ?===(全等)? ? ? ? ? ?!==(不全等)

邏輯運(yùn)算符

&&? ? ?（與，并且） 兩者都需要

||? ? ? ? （或桐汤，或者）滿足一種

而克！? ? ? ?（非，相反）相反的結(jié)果

判斷的? 簡(jiǎn)寫

if（）{}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?條件&&coding

if（）{}else（）{}? ? ? ? ? ? 三目運(yùn)算符? ? ? ? ? ? ?條件怔毛？coding1：coding2

continue 跳過(guò)本次循環(huán)员萍，進(jìn)行下一次循環(huán)

break 終止循環(huán)

return 阻止函數(shù)內(nèi)，后面的代碼執(zhí)行

定時(shí)器

1 隔一段時(shí)間執(zhí)行一次

設(shè)置定時(shí)器：setInterval(function(){},ms)? ?清除定時(shí)器：clearInterval(timer)

隔一段時(shí)間執(zhí)行一次拣度，并且只執(zhí)行一次

設(shè)置定時(shí)器：setTimeout(function(){},ms)? 清除定時(shí)器：clearTimeout(timer)

注意：開啟定時(shí)器之前先清除定時(shí)器

日期對(duì)象

var oDate = new Date( );

獲取時(shí)間

獲取年? ?var y=oDate.getFullYear();

獲取月? ?var m=oDate.getMouth();? ? 注意：從0 開始

獲取日? ?var d=oDate.getDate();

獲取時(shí)? ?var h=oDate.getHours();

獲取分? ?var m=oDate.getMinutes();

獲取秒? ?var s=oDate.getSeconds();

獲取星期? ?var w=oDate.getDay();

獲取時(shí)間戳var? sjc=oDate.getTime();

設(shè)置時(shí)間

設(shè)置年月日 var y,m,d=oDate.setFullYear(y,m,d);

設(shè)置時(shí)分秒毫秒 var h,m,s,ms=oDate.setHours(h,m,d,ms);

設(shè)置時(shí)間戳? var sjc=oDate.setTime();

格林威治時(shí)間稱之為時(shí)間戳 1970年1月1日0時(shí)0分0秒0毫秒

到現(xiàn)在的毫秒數(shù)碎绎；

倒計(jì)時(shí)

常用方法

1 字符串的常用方法

string.chatAt()

string.split()

string.substring()? ? string.substring(start,end)不包括end蜂莉；

string.indexOf()

string.lastIndexOf()

string.toUpperCase()

string.toLowerCase()

2 數(shù)組的常用方法

arr.push()

arr.pop()

arr.shift()

arr.unshift()

arr.join()

arr.sort()

arr.sort(num1,num2){

return num1-num2;

}

arr.reverse()

arr.contant()

arr.splice()??

arr.splice(start,length) arr.splice(start,0,item1,item2) arr.splice(start,length,item1,item2)

3 Math的常用方法

Math.random()

Math.pow()

Math.sqrt()

Math.round()

Math.floor()

Math.ceil()

Math.abs()

Math.max()

Math.min()

JSON

鍵值對(duì)? ? ? ? key：value

循環(huán) for? ...? in

for(var key in json){

? ? ?key

? ? ?json[key]

}

通常只用于json? 性能比f(wàn)or循環(huán)差

封閉空間

作用：? ? ? ? ? ?1 解決i的問(wèn)題? ? ? ? ? ? ? ? ?2解決變量名沖突問(wèn)題

（）（）

作用域

起作用的范圍

全局

外面沒(méi)有任何函數(shù)包裹

在任何地方都可以使用

局部

只能在聲明他的函數(shù)內(nèi)使用

閉包

子函數(shù)可以使用父函數(shù)的局部變量

DOM(Document Object Model) 文檔對(duì)象模型

操作文檔

元素=標(biāo)簽=節(jié)點(diǎn)

DOM樹(節(jié)點(diǎn)關(guān)系)

oEle.tagName 獲取元素的名字

節(jié)點(diǎn):

標(biāo)簽節(jié)點(diǎn)

文本節(jié)點(diǎn)

判斷節(jié)點(diǎn)類型? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? oEle.nodeType

1 標(biāo)簽節(jié)點(diǎn)

3 文本節(jié)點(diǎn)

9 document

通過(guò)節(jié)點(diǎn)關(guān)系獲取

獲取子節(jié)點(diǎn)

oParent.children

獲取父節(jié)點(diǎn)

獲取結(jié)構(gòu)上父級(jí)

obj.parentNode

最大是document，再往上是null

獲取定位上父級(jí)

obj.offsetParent

最大是body混卵，再往上是null

獲取兄弟節(jié)點(diǎn)

上一個(gè)兄弟節(jié)點(diǎn)

oEle.previousElementSibling? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?兼容IE678

oEle.previousSibling? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 兼容寫法

oEle.previousElementSibling||oEle.previousSibling

下一個(gè)兄弟節(jié)點(diǎn)

oEle.nextElementSibling? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?兼容IE678

oEle.nextSibling? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?兼容寫法

oEle.nextElementSibling||oEle.nextSibling

獲取首尾子節(jié)點(diǎn)

oParent.firstElementChild? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?兼容IE678

oParent.firstChild? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?兼容寫法

var oFirst = oParent.firstElementChild||oParent.firstChild;

oParent.children[0];

獲取尾子節(jié)點(diǎn)

oParent.lastElementChild? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?兼容IE678

oParent.lastChild? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 兼容寫法

var oLast = oParent.lastElementChild||oParent.lastChild;

oParent.children[oParent.children.length-1]

創(chuàng)建

document.createElement('標(biāo)簽名');

添加

添加到父級(jí)的最后

父級(jí).appendChild(子級(jí));

在某個(gè)元素之前插入

父級(jí).insertBefore(要插入的元素,誰(shuí)之前);

刪除

父級(jí)中刪除子級(jí)

父級(jí).removeChild(子級(jí));

BOM? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 瀏覽器對(duì)象模型

window.location 包含地址信息? ? ? ? ? .pathname? ? ?.host? ? ?.port

window.open();? ? ? ? ? ? ? ?打開新窗口

window.close();? ? ? ? ? ? ? 關(guān)閉窗口

當(dāng)頁(yè)面滾動(dòng)觸發(fā)

window.onscroll

當(dāng)改變可視區(qū)大小觸發(fā)

window.onresize

獲取各種信息

獲取元素盒子模型的寬高

oEle.offsetWidth 盒子模型寬度

oEle.offsetHeight 盒子模型高度

獲取元素的位置

獲取相對(duì)位置

oEle.offsetLeft 距離定位父級(jí)的左邊距

oEle.offsetTop 距離定位父級(jí)的上邊距

獲取絕對(duì)位置

可視區(qū)寬高

document.documentElement.clientWidth 可視區(qū)寬

document.documentElement.clientHeight 可視區(qū)高

滾動(dòng)距離

scrollTop 垂直方向

document.documentElement.scrollTop||document.body.scrollTop

scrollLeft 水平方向

document.documentElement.scrollLeft||document.body.scrollLeft

事件

onclick? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?點(diǎn)擊事件

onmouseover? ? ? ? ? ? ? ? ? ? 鼠標(biāo)移入

onmouseout? ? ? ? ? ? ? ? ? ? ? 鼠標(biāo)移出

onscroll? ? ? ? ? ? ? ? ? ? ? ? ? ? ?滾動(dòng)距離改變

onresize? ? ? ? ? ? ? ? ? ? ? ? ? ? 改變可視區(qū)大小

onload? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?加載完執(zhí)行

事件對(duì)象 包含了事件的詳細(xì)信息

ev(參數(shù)) 不兼容IE6、7窖张、8

event 不兼容Firefox

var oEvent = ev||event;

事件

onmousemove 鼠標(biāo)移動(dòng)觸發(fā)

oncontextmenu 上下文菜單

鍵盤事件

onkeydown 鍵盤按下

onkeyup 鍵盤抬起

獲取鍵碼

oEvent.keyCode

瀏覽器默認(rèn)行為

阻止瀏覽器默認(rèn)行為

事件中：

return false;

--------------------------------------------------

事件冒泡

子級(jí)的事件幕随，會(huì)觸發(fā)父級(jí)相同的事件

取消冒泡

oEvent.cancelBubble = true;

--------------------------------------------------

拖拽

鼠標(biāo)按下? ? ? ? ? ? ? ? ? ? ? ? onmousedown

獲取鼠標(biāo)在元素中的位置

disX = clientX-offsetLeft

disY = clientY-offsetTop

鼠標(biāo)移動(dòng)? ? ? ? ? ? ? ? ? ? ? ? onmousemove

clientX-disX

clientY-disY

鼠標(biāo)抬起? ? ? ? ? ? ? ? ? ? ? ? ?onmouseup

onmousemove = null;

onmouseup = null;

設(shè)置捕獲

oEle.setCapture&&oEle.setCapture();

釋放捕獲

oEle.releaseCapture&&releaseCapture();

時(shí)間綁定（事件監(jiān)聽）

解決事件沖突問(wèn)題? ? ? ? ? ? ? ? ? 給同一個(gè)元素加同一個(gè)事件，加多次

oEle.addEventListener(sEv, fn, false);? ? ? ? ? ? ? ?只兼容高級(jí)瀏覽器

oEle.attachEvent('on'+sEv, fn);? ? ? ? ? ? ? ? ? ? ? ? ? ?兼容IE

解除綁定

oEle.removeEventListener(sEv, fn, false);

oEle.detachEvent('on'+sEv, fn);

事件流? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (事件的走向)

DOM事件流 高級(jí)瀏覽器的事件流

1? ?事件冒泡(冒泡階段)

事件捕獲(捕獲階段)

只有addEventListener第三個(gè)參數(shù)是true才觸發(fā)

2? ?IE事件流 低版本ie的事件流

事件冒泡(冒泡階段)

事件委托(事件委派)

作用：

1.提高性能

2.給未來(lái)元素添加事件

獲取事件源

var oSrc = oEvent.srcElement||oEvent.target

Jquery

jquery的任何東西都得用$

常用方法見手冊(cè)? ? ? ? ? ? ? ?*（想要熟練還需要沒(méi)事多看手冊(cè)）

jquery手冊(cè)

加載

DOMReady

1? ? document.addEventListener('DOMContentLoaded',function(){

},false);

2? ? ?document.addEventListener('readystatechange',function(){

if（document.readyState==‘complete’ ）加載完成

},false);注意：做交互用的?

獲取非行間樣式(oEle.currentStyle||getComputedStyle(oEle,false))['width']

return false;

1 取消冒泡

2 組織默認(rèn)行為

某個(gè)元素后面添加

$(' ').appendTo('#box');某個(gè)元素前面添加$(' ').prependTo('#box');

刪除元素$('#box').remove();

原生與Jquery之間的轉(zhuǎn)換

原生--->jquery? ? ? ? ? ? ? ? ? ? ? ? ? ? $(原生對(duì)象)

jquery--->原生? ? ? ? ? ? ? ? ? ? ? ? ? ? $('#div1').get(0)? ? ? ? ? ? ? ? ? ? ? ? ? ?$('#div1')[0]

獲取第幾個(gè)

$().get(下標(biāo)) 原生對(duì)象

$().eq(下標(biāo)) jq對(duì)象

獲取索引

$().index()

從學(xué)習(xí)JS開始到現(xiàn)在總結(jié)了一遍所有的重點(diǎn)筆記宿接，一個(gè)知識(shí)點(diǎn)一直知識(shí)點(diǎn)的摸索 回憶 背誦赘淮，經(jīng)過(guò)一下午時(shí)間的總結(jié) 收獲頗豐，有的小細(xì)節(jié)已經(jīng)忘記了但是經(jīng)過(guò)這次博客的總結(jié)讓我撿起了過(guò)往學(xué)過(guò)的知識(shí)睦霎。

以后一定堅(jiān)持每周總結(jié)之前的筆記和例子 梢卸。

時(shí)光飛逝，學(xué)習(xí)已然過(guò)去一半副女，自己也找到了適合自己的學(xué)習(xí)方式蛤高。為了最終的勝利加油? 與我的可愛(ài)的伙伴們一起學(xué)習(xí) 貴在堅(jiān)持。Fighting１４鞫浮！

完結(jié)沟涨。