web API

以后是對于初學者有幫助的一些JS的方法API骄蝇,使用即說明

■JS組成■
1,ECMAScript : js的核心標準 , 同時也是一個解析器
2, DOM : document object model 文檔對象模型(結構)//dom 是關于如何創(chuàng)建炊琉、插入、修改又活、刪除頁面元素的標準苔咪。//有2套DOM,htmlDom跟xmlDom
3, BOM : browser object model 瀏覽器對象模型

〓框〓
alert 警告 執(zhí)行就 +'\n'+
console 打印對象,它底下有2個特殊方法time,tiemend,測試執(zhí)行時間柳骄,標準下跟IE11下兼容
confirm 確認框
prompt 提示
break 跳出(此次循環(huán))
continue 跳過(本次循環(huán))
delete 刪除(一般刪除對象跟對象的屬性用团赏,返回值為布爾值,成功刪除就為true)
write 寫耐薯,跟innerHTML不同舔清,不會替換原來有的

■單詞跟屬性■
this 就是它,本身(當前元素發(fā)生事件后曲初,可以調用這個他体谒,在一個事件下的話,this都是等于當前發(fā)生事件的元素)
1, 在事件處理函數中的this : 事件發(fā)生在誰身上,this就是誰臼婆。
2家凯,函數加小括號直接執(zhí)行裹粤,this一定是window. 3把鉴,定時器中的this,是 window
4, 屬性的方法中的this,就是這個屬性所屬的對象纷捞。

new 運算符,創(chuàng)建被去,具體參數主儡,請看標題“面向對象”

null 空的(一般取一個變量為空,后面再往這個變量里面存東西或者存一個數值)
return 返回值(在函數下才能有)寫了返回值惨缆,那么這個這個函數被調用的時候糜值,就是他return后面的東西,要2個括號才能調用到return后面的
arguments 傳參實參的集合坯墨,有下標寂汇。(當函數的實參不能確定,或者數量不一的時候用這個)
element 元素
length 元素的(個數)捣染,(數量)
value 價值,內涵 //里面的東西
innerHTML 這個元素里面的內容骄瓣,里面還可以加HTML的標簽,DIV級除外
switch if判斷的強化版,對于每個條件都詳細,方才執(zhí)行代碼 !(在文本JS條件中有案例)!
while for循環(huán)的簡化版
void 運算符耍攘,但不返回運算結果
cssText 獲取到元素后榕栏,可以直接修改,也就是說不用再單獨去獲取元素的width啊蕾各,height啊扒磁,直接cssText = 'width:';

■獲取樣式■

getComputedStyle() 獲取經過計算后的樣式值,如: getComputedStyle(獲取的元素).width IE6到8不兼容
currentStyle 這個是上條的專門兼容IE的式曲,如: 獲取到的元素變量.currentStyle.width 主流不兼容這個時候簡單判斷一下妨托,為了↓
獲取是什么瀏覽器執(zhí)行什么代碼可以寫個判斷 如:(三目) 某獲取到元素.currentStyle? 條件1:條件2;

■定時器■
ˇ開啟ˇ
setInterval 間隔每秒發(fā)生事件(連續(xù))
setTimeout 時間到了后發(fā)生一次事件(如果出現渲染問題,找到問題所在吝羞,然后就用延遲定時器)
定時器里的第一個參數是每次執(zhí)行的函數兰伤,第2為時間,第3個參數是傳參钧排,然后這個被傳的參數會在定時器的第一個參數也就是函數里的第一個參數就是被傳進去的參數

ˇ停止ˇ
clearInterval 停止間隔定時器
clearTimeout 停止延遲定時器

操作元素和創(chuàng)建第三種方式
元素.getAttribute('屬性名稱',2) 獲取屬性
元素.setAttribute('名稱','值') 設置屬性
元素.removeAttribute('') 刪除屬性

都有兼容問題敦腔, 1,當操作的屬性是關鍵字或保留字的時候卖氨,IE6/7會不一樣. 例如 標準 class IE6/7 就得 className ||一下就OK
2会烙,當操作兩層及以上屬性的時候负懦,只有ie瀏覽器支持筒捺,其它瀏覽器都不支持。

好處 1纸厉,可以操作行間的自定義屬性系吭。 2,可以獲取src\href等的相對地址颗品。(設置第2個參數為2,IE6/7下也是相對)

圖片預加載
通過 new Image() 這個對象預加載src 然后 這個對象的onload事件完成的時候換下一張要預加載的圖片的url

元素創(chuàng)建與輸出
var 變量=document.createElement('標簽名') 創(chuàng)建元素并且保存到一個變量里面肯尺,方便輸出到某個地方去

父級.appendChild( oLi ) 追加(也就是放到最尾)放到這個父級下
父級.insertBefore(oLi,父級.firstChild) 放到父級的第一個子節(jié)點下沃缘,也就是放到第一位,如果不寫第2個參數,就默認追加则吟,也就是放到最后
父級.removeChild(要刪除的子節(jié)點) 從一個節(jié)點里面刪除指定的子節(jié)點槐臀。也可以 this 刪除自己。刪除后會把刪除的對象作為返回值返回
并且氓仲,內存當中還是存在這個DOM元素的水慨,也就是沒有真正的清除,這個時候把返回來的對象敬扛,賦值為空類型就在內存當中完全刪除了

父級.replaceChild(oLi,oUl.children[0]) 替換晰洒,參數必須設置兩個(用來替換的節(jié)點,被替換掉的子節(jié)點)
注意注意《追加》《第一個》《替換》如果不是操作創(chuàng)建的元素,而是操作已有的元素,那么直接移動那個元素,不會復制

■Math數學方法■
Math.ceil() 向上取整,只要有小數(不包括0)就進一位整數
Math.floor() 向下取整,只要有小數就不要小數.保留前面的整數啥箭。但如果負數的話,保留數情況相反
Math.round() 小數為四舍五入谍珊,方法去保留整數
Math.random() 隨機出現0到1的(0.幾)的小數(指南說有可能為0)公式 Math.random()*k+n n等于起點 k等于目標點減去n
Math.max() 求最大值,參數里面可以傳參急侥,然后返回最大值
Math.min() 求最小值砌滞,參數里面可以傳參,然后返回最小值
Math.abs() 返回絕對值
Math.Pi 圓周率(3.141592653無限不循環(huán))
Math.pow() 平方數(第一參數為一個數字缆巧,第2參數為這個數字的多少平方)
Math.sqrt() 開方(參數為一個)平方的逆運算

更多方法請參考 http://www.w3school.com.cn/jsref/jsref_obj_math.asp

■類型■
typeof 用來判斷類型的查看變量類型的屬于運算符

function 函數
number 數字
boolean 布爾值
string 字符串
object 對象
undefined 未定義的

上面是按照typeof 的形式去判斷類型的布持,按照ECMAScript標準的話,一般有兩個類型陕悬,就是簡單類型跟引用類型题暖,首先標準下的類型有
  1. object(引用類型) 2. number(數字簡單) 3. string(字符串簡單) 4. boolean (布爾值簡單) 5. null(空值簡單) 6. undefined(未定義簡單)

■類轉換型■
顯示類型轉換 強制
Number 盡量轉成數字類型
parseInt 從左到右轉換成整數遇見非數字后,非數字后面的統(tǒng)統(tǒng)不要捉超,而且轉換的東西基本上只能是字符串或前面帶數字類型的東西胧卤,(它認符號)
parseFloat 從左到右轉換,保留小數拼岳。其他如上

NAN 轉換失敗也算是數字類型里的非數字枝誊。布爾值等于假false,而且他不等于他本身惜纸。
isNaN 判斷不是數字叶撒,值為布爾值.不是數字就為真.但他是通過Number()判斷為是不是數字的.

隱式類型轉換
'200'-3 變成數字類型了
然后 - * / % ++ -- 都會把字符串變成數字類型,
200+ '3' 變成字符串了
!100 取反耐版,祠够!,就是取反粪牲,一般取的都是布爾值
如果是 == 全等 或者 ===強等的話古瓤, '2'==2;是真,比的是里面的,'2' === 2;為假,強等判斷所有條件類型都要一樣.

■JSON落君,屬于特別的方法■(IE6/7沒有這個對象跟方法的穿香,所以可以在JSON官網下,下載一個JS庫來做引用然后就可以兼容)

JSON 系統(tǒng)已經內置的對象绎速,不需要再存在一個變量里就可以用這個對象(使用這個對象的方法進行轉換的時候都是用嚴格模式進行轉換的)

JSON.parse() 把json形式的字符串轉換成源生的js代碼(安全性高皮获,必須是嚴格模式的)
JSON.stringify() 把一個對象轉換成一段字符串

eval() 可以把任何的字符串轉成源生的javascript代碼(這個方法是原生的,兼容所有纹冤,但是安全性不高)

■程序真假值■

真 非0的數字魔市,非空字符串,true赵哲,函數待德,能找到的元素,[]枫夺,{}

假 0,NaN将宪,空字符串,false,不能被找到的元素橡庞,null较坛,未定義

■DOM知識點歸納■

節(jié)點類型
元素節(jié)點① 屬性節(jié)點② 文本節(jié)點③(包括回車換行等空字符) 注釋節(jié)點⑧ document節(jié)點⑨(可以用iframe標簽查找到本節(jié)點位置)

層級關系
父節(jié)點 (統(tǒng)稱:祖先節(jié)點) 、 子節(jié)點 (統(tǒng)稱:子孫節(jié)點) 扒最、 兄弟節(jié)點

查看節(jié)點類型
查看節(jié)點類型 nodeType 屬性
查看節(jié)點名稱 nodeName 屬性 (獲取到的都是大寫丑勤,支持所有節(jié)點)
查看節(jié)點名稱 tagName 屬性 (獲取到的都是大寫,只有在元素上生效)
查看節(jié)點的值 nodeValue 屬性 (只有屬性吧趣,文本法竞,注釋節(jié)點才有值)

節(jié)點
.parentNode 父節(jié)點

.childNodes 子節(jié)點 (在標準瀏覽器下IE8以上,會把換行解析成一個子節(jié)點,所以寫操作的時候,會報錯)
.children 子節(jié)點 (非標準强挫,但得到所有瀏覽器支持)(只返回元素的節(jié)點,不返回文本節(jié)點)

.cloneNode() 復制節(jié)點 1.參數為布爾值(true就完全復制這個節(jié)點下的子孫節(jié)點) 2.只復制節(jié)點的結構 3.復制后存在內存里或者變量里

.firstChild 第一個子節(jié)點 (在標準瀏覽器下IE8以上,會獲取到空白文本節(jié)點)
.firstElementChild 獲取第一個子元素節(jié)點 (不會獲取到空白文本節(jié)點,但 ie6/7/8不支持 )

.lastChild 獲取最后一個子節(jié)點 (在標準瀏覽器下IE8以上,會獲取到空白文本節(jié)點)
.lastElementChild 獲取最后一個子元素節(jié)點 (不會獲取到空白文本節(jié)點,但 ie6/7/8不支持 )

.nextSibling 下一個兄弟(同級)節(jié)點 (在標準瀏覽器下IE8以上,會獲取到空白文本節(jié)點)
.nextElementSibling 下一個兄弟(同級)節(jié)點 (不會獲取到空白文本節(jié)點,但 ie6/7/8不支持 )

.previousSibling 上一個兄弟(同級)節(jié)點 (在標準瀏覽器下IE8以上,會獲取到空白文本節(jié)點)
.previousElementSibling 上一個兄弟(同級)節(jié)點 (不會獲取到空白文本節(jié)點,但 ie6/7/8不支持 )

.offsetParent 找祖先節(jié)點有定位的屬性的 ① 如果上面所有祖先節(jié)點都沒有定位屬性的話,IE6/7下就是HTML節(jié)點岔霸,標準瀏覽器下為body節(jié)點.
② 如果祖先節(jié)點有定位屬性,就找到離它最近的那個祖先節(jié)點
③ 如果當前的節(jié)點沒有定位屬性又有浮動,IE6/7下就直接找到上一個祖先節(jié)點。標簽瀏覽器下還是找到祖先有定位的節(jié)點
④ 如果當前節(jié)點有display:none; IE11以下的IE瀏覽器參考①②,其他的瀏覽器都顯示為null

offset
.offsetLeft/Top 返回當前元素的外邊框外開始俯渤,到他的offsetParent的內邊框的距離.( IE6/7當前節(jié)點的offsetParent沒觸發(fā)haslayout(BFC)屬性時呆细,取值會不準確 )
offsetWidth/Height 返回當前元素自身的整個元素的寬高。也就是 width/height + padding + border
并且他們在這個元素為隱藏的時候八匠,獲取到的值都是 0

client
Width,Height,Left,Top 同上絮爷,但是他不會把border算進去 也就是他只算 自身 + padding (所以可視區(qū)的寬高都是它計算的)

DOM表格節(jié)點
tHead 表格頭節(jié)點,只有一個
tBodies 表格正文(復數梨树,所以有下標)
tFoot 表格尾坑夯,只有一個
rows 行,節(jié)點(復數劝萤,所以有下標)
cells 列渊涝,節(jié)點(復數慎璧,所以有下標)

■BOM窗口■
window.open() 打開新窗口(4個參數)1.'地址'(為空打開就為空) 2.方式(為空就默認新窗)
window.close() 關閉
window.navigator.userAgent 版本信息/用戶代理信息( 操作系統(tǒng)床嫌、瀏覽器品牌跨释、瀏覽器版本號、瀏覽器內核 )
window.location 地址欄信息(它是對象)
.href 當前的url地址厌处,類型string
.search 獲取地址欄的查詢部分信息(?到#號之間的所有內容) 修改search的值會導致頁面重新加載鳖谈。
.hash 獲取地址欄的錨信息(#號后面的所有內容) 修改hash值不會重新加載頁面。

window.innerWidth/Height 獲取可視區(qū)寬高阔涉,標準下才可獲取 ie6/7/8下不支持缆娃,而且有可能滾動條也會獲取 但可以用DOM方法代替,如下行
document.documentElement.clientWidth/Height (所有瀏覽器都支持)也可以是 關于詳細的請參照 offset跟client

window.pageXOffset/YOffset 獲取滾動條距離的X軸或者Y軸的度數 IE跟火狐下為0瑰排,也就是不支持 除了IE跟火狐,其他都OK
可以用DOM方法代替 document.body.scrollTop(谷歌) || document.documentElement.scrollTop(火狐,IE通用)
而且如果要判斷一個元素在不在可視區(qū)上贯要,就可以用這個元素的offsetTop > 滾動條距離 + 可視區(qū)距離

document.body.scrollHeight 獲取內容高度或者寬度/內容撐出來的高度或者寬度
document.body.scrollWidth ①在谷歌下,如果內容度數小于可視區(qū)度數,則采用的是可視區(qū)高度
②在ie8以上ie瀏覽器和firefox下:如果元素的高度沒有內容高度高,padding-bottom 和 padding-right 失效椭住,
③在不同瀏覽器和不同元素中崇渗,scrollHeight有可能會計算邊框,也有可能不會計算邊框京郑。
④ie6/7下始終表示內容撐出來的高度宅广。也就是無論大于或者小于設置好的寬或者高,都是撐出來的度數

document.referrer 記錄用戶從哪個URL里到當前頁面

■iframe通信■
<iframe src="" ></iframe>
關于 iframe 標簽引用的頁面 操作這個引用頁面的元素,首先要獲取當前document下的iframe標簽些举,然后這個變量的 contentWindow 就相當于引用過來的 window了

如果想操作引用當前頁面的那個頁面,那么就在被引用的頁面的 window.parent.document 就可以操作當前頁面的父級跟狱,也就是引用這個頁面的那個頁面
如果要找到引用當前頁面的最頂級父級文檔的window,那就是window.top,找父級户魏,那就是 window.parent
并且為了防釣魚網站驶臊,就可以在window.onload的時候 判斷一下 window.top是不是我當前域名下的最頂層:如下

if(window = window.top){
window.top.location.href = window.location.href
}

用open打開的窗口,想獲取新打開底下的窗口叼丑,直接接收open方法執(zhí)行后函數的返回值就是新打開創(chuàng)建的window
用open打開的窗口,通過新窗控制用open打開他的窗口的window 用 window.opener.document.body

■鼠標鍵盤事件■
對象.onload 頁面加載完成
對象.onunload 關閉當前頁面

對象.onmouseover 鼠標移入
對象.onmouseenter 鼠標移入(事件自身不冒泡)
對象.onmouseout 鼠標離開
對象.onmouseleave 鼠標離開(事件自身不冒泡)
對象.onmousemove 鼠標移動時發(fā)生

對象.onclick 點擊發(fā)生
對象.ondblclick 雙擊發(fā)生

對象.oncontextmenu 鼠標右鍵后發(fā)生
對象.onfocus 獲得焦點 ( 有焦點的元素都是可以被編輯的 )
對象.onblur 失去焦點 關于焦點( 讓一個元素得到焦點 .focus() 讓一個元素失去焦點 .blur() 獲取焦點的文本 .select() )沒有參數

對象.onmousedown 鼠標按鍵被按下
對象.onmouseup 鼠標按鍵被松開

對象.onkeydown 按下一個鍵盤按鍵
對象.onkeyup 鍵盤按鍵被按下后松開
對象.onkeypress 輸入按鍵類的才響應(少用)

對象.onhashchange 當頁面的hash值發(fā)生改變之后

■窗口事件■
window.onscroll 當前頁面滾動的時候觸發(fā)
window.onresize 當窗口發(fā)生改變的時候觸發(fā)

■移動端事件■
單手指事件

ontouchstart 按下的時候(相當于down)
ontouchmove 移動的時候(相當于move)
ontouchend 松開的時候(相當于up)

移動evtnt對象
ev.touches 當前位于屏幕上的所有手指的一個列表對象集合
ev.targetTouches 位于當前DOM元素上的手指的一個列表對象集合
ev.changedTouches 涉及當前事件的手指的一個列表對象集合

屬性 pageX/Y 相對屏幕的位置點,跟client是一樣的

■滾輪事件■
document.onmousewheel 鼠標滾輪時候發(fā)生( 火狐除外(在FF下會解析成自定義屬性),所有 ev.wheelDelta 的值都是滾下為 -120 滾上為 120 而且綁定方式為通常都可以 )

DOMMouseScroll 鼠標滾輪時候發(fā)生( 火狐獨有 )而且綁定方式只能是用第二種綁定方式 addEventListener 去綁定函數 如下
對象.addEventListener('DOMMouseScroll',function(ev){},false); 可以直接判斷 if(document.addEventListener) 來執(zhí)行兼容
方向屬性為 ev.detail 值向下正3 值向上-3 取消默認事件不能通過返回假资铡,用 if( oBar.releaseCapture ){ oBar.releaseCapture(); };

■事件總結■
event 記錄事件發(fā)生時的詳細信息(標準下event對象是事件處理函數的第一個參數)(IE所有下event 是一個全局對象)
可記錄:1,在哪個元素上觸發(fā)的事件 2幢码,在可視區(qū)的坐標位置笤休。 3,點擊的是鼠標的哪個鍵症副。 4店雅,按下了鍵盤的哪個鍵。

ev.target 事件源是指觸發(fā)當前事件的源頭是哪個元素贞铣。(IE下的對象是 srcElement闹啦,||一下就可以了)
ev.cancelBubble = true 取消事件往父級冒泡,默認為false辕坝,true就是取消.當在子事件的里面.
ev.clientX/Y 鼠標在可視區(qū)里的X,跟Y

ev.keyCode 鍵盤獲取的鍵值
ev.shiftKey 獲取鍵盤shift鍵窍奋,被按下的時候就為true
ev.ctrlKey 獲取鍵盤ctrl鍵,被按下的時候就為true
ev.altKey 獲取鍵盤alt鍵,被按下的時候就為true

.call 函數特有方法,用來改變this的指向 如:fn.call(某個對象,后面的參數接下去正常繼續(xù)按順序傳參)面向對象需要此方法繼承
.apply(參數1,參數2) 第一個參數也是改變this指向,第2個參數是一個arr琳袄,而且會把這個arr返回給調用它的obj

事件默認的事件
一般在圖片或者右鍵跟其他江场,都有個系統(tǒng)的默認事件清除默認事件 return:false 就可以了(但要清楚事件發(fā)生在什么時候,IE6/7下文字拖拽在move下發(fā)生的窖逗,所以在那里return)

事件綁定

例如 有一個函數叫 fn1 正常綁定它 window.onload = fn1;

第二種綁定方式可綁定多個不被覆蓋址否,而且順序是最后一個先執(zhí)行再往上。
標準瀏覽器下 對象.addEventListener() 如:window.addEventListener('load',fn1,false) 參數為(行為碎紊,函數佑附,捕捉)(當這個函數需要傳參的時候用匿名后在里面調用那函數)
IE6/7/8下 對象.attachEvent() 如上。 1.參數中的行為要加'on' 2.會把函數中的this改到window(可用特定函數方法改這個this的指向)

注銷事件綁定
一般普通事件綁定的直接讓那個事件等于null即可注銷綁定

對象.removeEventListener() 注銷被 addEventListener()綁定的事件仗考,而且要在同一個階段注銷音同。
對象.detachEvent() 注銷被 attachEvent()綁定的事件

匿名函數是沒有辦法被注銷的。

事件的階段

1.捕捉階段(找到要觸發(fā)事件的節(jié)點)
2.執(zhí)行階段(找到節(jié)點了秃嗜,就可以執(zhí)行函數了)
3.冒泡階段(自己的事件處理完了瘟斜,就可以傳遞給父級了)

注(一般不可能用到這個方法) ie6/7/8下是沒有事件捕獲的。但IE下所有都有一個叫全局捕獲 對象.setCapture(); 開始 對象.releaseCapture() 釋放捕獲

■數組合集■
var arr = new Array(); 用對象定義一個數組,參數的如果是數字就被認為是這個數組的長度痪寻,是內容就正常.數組的長度是可以修改的

.unshift() 往數組前面添加(IE6,7的返回值是未定義正常的是新的長度)
.push() 往數組最后一位添加

.shift() 刪除數組第一個,返回被刪除的那個.不接收參數螺句,方法只刪除一個
.pop() 刪除數組最后一個,如上

.splice(0,1) 全能方法橡类,參數1為(起始位置,包括),參數2為(刪除位置,不包括),如果后面還有參數都是添加或替換的意思,返回刪除的東西,同時會修改調用這個方法的數組

.sort() 排序,對數組進行簡單的排序,它取的是數組每個里面內容的第一個的內容進行字符串編碼蛇尚,然后對比字符串編碼的大小改變排序,
參數也可以傳一個函數函數的(a,b)可以進行打亂排序

.concat() 把2個或多個數組連接成一個新的數組顾画,如取劫,數組對象.concat(另外的數組)
.reverse() 把數組里的順序顛倒過來

■字符串合集■
var str = new String(); 用對象定義一個字符串

.charAt() 從整個字符串里面找到某個,只能獲取到一個參數研侣,參數為下標

.charCodeAt() 把被傳進的參數編程一個字符串編碼
.fromCharCode() 被傳進去的數字編碼會被轉換成字符串

.substring() 截字符串,被傳參為一個數字的時候谱邪,從被傳參的第一個數字位置開始找到后面的,如果有兩個參數庶诡,無論順序惦银,按小到大的參數,找到位置里的字符串
.slice() 跟上面一樣是截字符串末誓,不同的是它不具備交換位置順序去找扯俱,但不同的是他的負數會倒回字符串最后一位去計算
.indexOf() 左往右找到被傳參字符串的位置,只找一次喇澡,當如果這個字符串參數后面跟一個,然后非負數數字(負數默認為0)的話就表示從第幾個開始找后面的
被傳參的字符串可以是多個迅栅,但獲取到的位置是被傳參的第一個字符串的位置(找不到結果為-1就假)
.lastIndexOf() 右往左找到被傳參字符串的位置,只找一次晴玖,其他跟上面一樣读存。
.toUpperCase() 把字符串里面的英文全部轉換成大寫,不接收參數
.toLowerCase() 把字符串里面的英文全部轉換成小寫,不接收參數
.split() 分隔为流,被傳參的是帶引號的,而且是字符串里的某個让簿,轉換的都是一個數組,如果傳進的是一個空字符串敬察,就是字符串每個分隔成一個數組的一個
傳參進去的那個分隔符的字符串會被當做分隔符,就會消失拜英,而且分隔后,不管左右有沒東西琅催,沒有居凶,就加個未定義進去.被傳參的字符串如果后面還有個數字
的話,那就是限制這個數組多長的意思藤抡,如果原來的length小侠碧,那么會左往右,只要這個數字的長度缠黍,后面的不要了(這個為可選參數)

.join() 把數組轉換成字符串,如果不傳參,默認為傳了一個','弄兜,因為他必須有一個參數隔開數組的個數,再鏈接到一起鏈接成一個字符串

特定方法
encodeURI('string') window底下的方法瓷式,可把字符串作為 UTF-8 進行編碼
encodeURIComponent('string') 如上替饿,但會把一些轉義符號也進行編碼

decodeURI() 把UTF-8編碼過的內容進行解碼
decodeURIComponent() 如上,但會把一些轉義符號編碼的也進行解碼出來

FormData對象 FormData對象是一個構造函數,他不但可以用來模擬URL里的QueryString,還能把對象進行進制化來提交,一般用來用戶上傳文件的時候會用的
使用方法贸典? var a = new FormData(); a.append( key,val ); 上傳的話 a.append( 后臺接收的文件名,用戶的文件對象 );然后把返回數值扔到AJAX提交就OK

■正則表達式■
new RegExp() 正則第一種方法(好處是里面不單單能傳字符串视卢,還能傳變量)(不過第一次會先把字符串轉義,所以如\n的東西要\n才能被正確轉義)
/正則/特定屬性(修飾符) 正則第二種方法

方法
正則.test(str) 判斷字符串是否有正則匹配到的內容廊驼,返回布爾值
str.search(正則) 返回正則匹配到字符串第一個出現的位置 ( 跟indexof一樣匹配失敗返回-1 )
str.match(正則) 查找字符串中符合正則表達式匹配的整個的全部內容据过,并把匹配的結果作為數組對象返回 (匹配失敗返回 null 類型)

正則.exec(str) 如上,但是不支持多次,也就是不支持g查找,只返回第一次匹配到的全部內容和所有匹配的子項與匹配到的位置跟拿來匹配的字符串都做為數組返回妒挎。
str.split(正則) 分隔查找到字符串里面符合正則匹配到的為分隔線绳锅,把左右兩邊的數據分隔,然后分別添加到數組酝掩,并返回這個數組
正則.compile("新正則") 可以在某個過程中鳞芙,重新修改正則的規(guī)則(有待測試,證實結論2015/2/6/00:30)

str.replace(正則期虾,替換內容)
替換返回被替換后的str,不直接對原有的str進行修改积蜻。第2個參數可以是函數(匹配到一次執(zhí)行一次),并函數的(a,b,c,d)除a是匹配到全部以外彻消,其他是按照順序的子項
語法
/\d+|[1234-6^7-9 | abc | \w]/g 找到是數字的竿拆,+把連接起來(量詞),g是修飾符,找到全部找完宾尚,默認是單找一個(正則特性,懶惰)丙笋,|(一樣是‘或’的意思)

在這個//里谢澈,要找到什么就直接寫就是找到什么。比如找abc就直接寫/abc/,但不會匹配到ab這樣的只有滿足全部條件abc才會被找到
| 的意思就是或者的意思 是一個單豎線
()表示的是一個整體御板,被包的是一個整體的意思,并且從左邊到右邊锥忿,左邊第一個被包起來的是整個匹配到的字符串的一個第一個子項
[] 里面的也會被解析成只找一位,里面的會被單獨拆出來當做一位去查找怠肋。也可以說是 | 的意思敬鬓。不過他的特點是可以用鏈接式,如 1-9 a-z 就相當于在里面寫了 [1到9]
^ 在 [] 的意思就是以外的東西笙各,如 ^6-7 等于 67以外的所有,注意钉答,不在【】里面的話,它的意思是行首杈抢,字符串開頭
$ 行尾
. 的意思是除了換行的任意字符 (但如果是.的話 就是真正的符號 . 的意思)
i是修飾符数尿,就是匹配的規(guī)則不區(qū)分大小寫

\d{2,6} 最少2次,最多6次
{2,} 最少2次惶楼,最多不限
{2} 只能2次

  • 最少0次右蹦,最多不限
    ? 最少0次,最多1次 等同{0,1}
  • 最少1次歼捐,最多不限 等同{1,}

(?=要匹配的) 前向申明何陆,意思就是要匹配的必須 跟在 前面的后一位,但是又不要匹配到 被前向申明匹配到的
(?!要匹配的) 反前向申明,也就是要匹配的不能在前面的后一位出現豹储,其他的都可以甲献,同樣只匹配到前面一位。被申明的都是不會匹配到的颂翼,只是要求在后面

表達運算
\數字 整個表達式里的第幾個子項的指向,也就是\num的這一位必須是子項匹配到的而不是匹配子項的那個條件晃洒,如/(a)(b)(c)\1/ 那成功的話就要是 abca

\d 一個數字
\D 非數字
\w 數字,字母朦乏,下劃線
\W 非數字球及,非字母,非下劃線
\s 空格
\S 非空格
\b 邊界符(這個是看不到的呻疹,首先要滿足/w的表達)(起始吃引,結束,包括匹配元素前面或后面有空格的話刽锤,也會算是開始跟結束镊尺,但是匹配的是不能算是空格的)
\B 非邊界符
\f 換頁符
\n 換行符
\r 回車符
\t 制符表
\v 垂直制符表

■cookie儲存■
document.cookie = '名=值'; 儲存數據
document.cookie 返回數據(返回的全部cookie)
更多其他方法,查看API吧并思!

注意項 1.cookie 的大小是有限制的 2.cookie 的條數是有限制的 3.cookie 可以設置有效期
4.不同瀏覽器所產生的cookie是不能相同訪問 5.只能訪問自己域名下的cookie庐氮,不能訪問其它域名的cookie
6.cookie 是一個字符串信息,也只能存放字符串信息 7.有固定格式宋彼,一次設置多個的時候值后面+ 分號空格 跟下一個要存的區(qū)分開來
7.默認情況下弄砍,當瀏覽器關閉時仙畦,cookie自動失效除非設置了一個未來的過期時間

■AJAX■

Ajax對象創(chuàng)建
var xhr = new XMLHttpRequest() 首先要申明AJAX對象 (注意,IE6這個對象沒有音婶,并且如果判斷的話慨畸,也要在前面加上window后拿去判斷)
new ActiveXObject('Microsoft.XMLHTTP') (IE6里面的插件,去支持AJAX)

并且它有2種方法提交
1.get 通過地址欄的“衣式?”后面?zhèn)鬟f數據寸士,如果多個數據還會用“&”連接起來。并且會被緩存碴卧,傳輸到后端如果有中文的時候還要進行轉URL編碼
GET方式提交的地址是會被瀏覽器緩存的弱卡,要解決這個混存問題就可以在提交數據的時候順便把時間戳也加到數據的最后一個

2.post 通過請求頭傳輸,它傳輸輸入是在send方法的時候把輸入當參數傳過去的。不會被緩存,

無論是ajax還是cookie 在傳輸帶有中文的時候應該先轉換成URI編碼螟深,可用window下的 encodeURI('string') 方法進行轉換谐宙,但post傳的時候因為申明了請求頭烫葬,已經進行了轉碼

對象.responseText 服務器返回的內容就存在這個屬性里面(默認string類型)
對象.readyState Ajax的工作狀態(tài)(0.初始化界弧。 1.載入,發(fā)送請求搭综。 2.載入完成垢箕。收到發(fā)送的所有請求并返回。 3.解析響應的內容兑巾。 4.完成条获,解析完成,可以繼續(xù)下面的操作)
這個方法一般用在 onreadystatechange事件里面 如果狀態(tài)完成,就可以執(zhí)行改做的事情了

對象.status 服務器的狀態(tài)值蒋歌。(查詢 HTTP狀態(tài)嗎 一般為3位數字的數值)(一般為200就是請求到正確的后端文件)(可以確認Ajax的工作是否正常完成了帅掘,還是報錯)

屬性,方法
對象.open 打開堂油,并傳輸到指定地址(一:方式(get,post)修档,二:文件跟get的?的傳輸府框,三是否異步)
對象.setRequestHeader('content-type', 'application/x-www-form-urlencoded') 申明發(fā)送的數據類型(這一步一般是post方式的時候才需要吱窝,get方式不需要)
對象.send() open是打開的話,send就是確認的意思了迫靖。(而且POST提交方式的數據是放到這里來的院峡,數據方式是一樣的)

屬性,事件
對象.onreadystatechange 監(jiān)聽Ajax的狀態(tài)值發(fā)生改變的時候觸發(fā)的事件

■時間■
new Date 獲取到當前本地時間(全部)
+new Date 獲取當前時間的毫秒,也就是把時間對象轉換成了時間戳

獲取
getFullYear() 年
getMonth() 月份,從0開始,所以 +1
getDate() 天 | 日
getDay() 星期 從0開始系宜,0表示星期日,所以判斷

getHours() 時
getMinutes() 分
getSeconds() 秒
getMilliseconds() 毫秒

設置(用這些方法會轉換成時間戳)
new Date().setFullYear(2015); 設置年份到具體的某一年
new Date().setMonth(4); 設置月份到指定的月
new Date().setDate(20); 設置日期到指定的某一天

轉換為字符串
時間對象.toUTCString() 時間對象.toGMTString()

ˇ月份取值ˇ
January照激、February、March盹牧、April实抡、May欠母、June、
一 二 三 四 五 六

July吆寨、August赏淌、September、October啄清、November六水、December
七 八 九 十 十一 十二

ˇDate對象參數ˇnew新

數字形式:new Date(2013,4,1,9,48,12);

字符串形式:new Date('June 10,2013 12:12:12');

ˇ時間轉換公式ˇ

天:Math.floor(t/86400)

時:Math.floor(t%86400/3600)

分:Math.floor(t%86400%3600/60)

秒:t%60

更多詳細請參照 http://www.w3school.com.cn/jsref/jsref_obj_date.asp

■面向對象■
四種概念 (抽象) 封裝 繼承 多態(tài)

創(chuàng)建對象

  1. var a = Object();
  2. var a = {};

當 new 一個函數 的時候,這個函數就是一個構造函數辣卒。
1.會在內部自動創(chuàng)建一個null對象
2.并且會把這個構造函數的this指向null對象
3.如果這個構造函數里面沒有 return 語句掷贾,默認就 retuen this 賦給 null 對象
4.如果有 return 語句
①return出去的是一個對象類型的值,那么返回值就是這個對象
②return出去的是一個非對象類型的值荣茫,那么如上想帅,返回this,也就是指向 null 對象

prototype 函數原型啡莉,函數的屬性港准,當一個函數被創(chuàng)建的時候,也會自動的創(chuàng)建一個prototype的空對象
proto 對象底下的原型對象咧欣,原型鏈上的對象

↓當我們去調用一個對象的屬性或者方法的時候浅缸,它首先會在對象自身上面查找這個屬性或者方法,
↑如果沒有查找到魄咕,那么他會依據proto對象來查找是否存在該屬性或者方法衩椒,如果有則調用

js中有一個約定,如果一個函數是構造函數哮兰,那么命名采用大駝峰命名毛萌,首字母大寫。

fn1.prototype.fn2=function(){
var _this = this;

for(var i=0;i<this.aInp.length;i++){
this.aInp[i].onclick=function(){
_this.fn3(this);
};
};
};

內置方法
對象.hasOwnProperty(‘參數’) 返回布爾值喝滞,看這個參數是不是這個對象底下的屬性阁将。是返回真。不是跟沒有都返回假囤躁。
對象.constructor 返回對象的構造函數.一般用來查看或判斷構造函數的(注:這個指向是可讀可寫的冀痕,所以一般也可以用來修正構造函數的指向)
對象1 instanceof 對象2 返回布爾值,看對象1跟對象2在原型鏈上是否有關系。有就返回真(instanceof屬于運算符狸演,所以不是用“.”而是用“ ” )
對象.toString(參數) 把對象轉換成字符串(參數為進制)言蛇。還可以拿來判斷數據的類型。例如:object.prototype.toString.call(判斷的) == ''

繼承
屬性繼承 子函數繼承父構造函數的話宵距,就如 子函數=function(){ 父.call(this) };

方法繼承1 (繼承父級的原型下的所有方法)就是把父級的對象賦值給子級的對象腊尚。 如: 子對象.prototype = 父對象.prototype (淺拷貝)

繼承2 for in 循環(huán) 去 循環(huán)父級的prototype 給 子級的 prototype 如下(深拷貝)

var a = {父}; var b = {子};
for(var i in a){
if( typeof a[i] == 'object' ){
var newa = JSON.stringify(a[i]); //如果是一個對象,那么就先轉換成一個字符串
var newobj = JSON.parse(aa); //然后再次轉換回對象满哪,就不存在內存引用了
b[i] = newobj;
};
};

繼承3 模擬后端的類繼承婿斥。(用構造函數看作類去繼承)子.prototype = new 父的構造函數(); 然后創(chuàng)建出一個 子對象 var 子 = new 子構造函數();
(此方法是模擬的劝篷,相對的問題也比較多)比如子對象的.constructor 返回的是父級的構造函數。所以一般情況下還要去改 子構造函數.proto.const(簡) = 子構造函數
而且這樣創(chuàng)建出來的新的子對象民宿,是會互相影響的娇妓。影響復用性。所以要做屬性跟方法繼承的分離活鹰,而且不要直接去new 父的構造函數,而是創(chuàng)建一個函數表達式哈恰。
然后讓這個函數的.prototype = 父的.prototype,然后 子.prototype 都去 =new 新的函數();

繼承4 原型繼承也是直接用一個空函數,利用這個函數的.prototype = 父對象 志群,并且返回值 new 這個空函數名();

■閉包■
當一個函數被執(zhí)行完以后着绷,里面的變量就是局部變量會被垃圾回收機制給清理。也就是當這個函數下次被調用的時候锌云,里面的變量會被重新申明荠医。如下

function fn1(){
var a = 0;
};

當每次調用這個fn1的話,里面的a都會被重新申明為0桑涎,就是一個初始值,但是如果這個變量 a 被當前函數里的另外一個函數里(另一個作用域下)所引用或找到的話彬向,那么就不會被回收。
也就是不被回收的話石洗。就表示長期駐扎在內存當中幢泼。這樣可以避免全局變量的污染紧显,因為在全局下是找不到這個當前作用域下的變量的讲衫。如下

①function aaa(){
var a = 0; //因為下面被引用著,所以這個a孵班,當這個當前aaa函數執(zhí)行完后也不會被垃圾回收

function bbb(){
alert(a);
};
};

②function aaa(){
var a = 0;

function bbb(){
alert(a);
};
return bbb;
};

var c = aaa();
c();

那既要用到一個是必須的全局變量涉兽,又不能讓全局里去找到它的話,那就要用到閉包的寫法拉篙程,下發(fā)如下:

①function aaa(){
var a = 1; //把要申明的全局變量寫在當前函數里面
return function(){ //要執(zhí)行的語句或者執(zhí)行的代碼枷畏,寫到 return 函數里
a++; //修改所謂的全局變量,其實是被引用著的局部變量虱饿,然后使得外層某個變量被引用著拥诡,所以不會被回收,當下次執(zhí)行aaa的時候也不會重新申明
alert(a); //自己要執(zhí)行的語句
};
};

var b = aaa();
b(); //結果的話就跟 a 這個變量寫在全局函數里是一樣的但是不同的是如下
alert(a); //他不能被全局下找到氮发,這樣就能保證不會給全局造成過多的變量造成全局污染

②var ss = (function (){ //模塊化
var a = 1; //里面的所謂的全局變量其實也就是相當于模塊化的成員

return function(){
a++;
alert(a);
};

})()

模塊化的常用寫法跟實現成員跟私有方法

var ss = (function(){
var a = 1;
//在這個底下的所有所謂的全局變量跟方法都屬于私有的猜嘱,
function aaa(){
a++;
alert(a);
};

function bbb(){
a++;
alert(a);
};

return { a:aaa,b:bbb } //然后直接返回一個對象打洼,把私有的東西封裝到這個對象下,外部可以通過對象調用,但直接找是找不到的
})();

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市感凤,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件没讲,死亡現場離奇詭異,居然都是意外死亡礁苗,警方通過查閱死者的電腦和手機爬凑,發(fā)現死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來试伙,“玉大人贰谣,你說我怎么就攤上這事∏” “怎么了吱抚?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵,是天一觀的道長考廉。 經常有香客問我秘豹,道長,這世上最難降的妖魔是什么昌粤? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任既绕,我火速辦了婚禮,結果婚禮上涮坐,老公的妹妹穿的比我還像新娘凄贩。我一直安慰自己,他們只是感情好袱讹,可當我...
    茶點故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布疲扎。 她就那樣靜靜地躺著,像睡著了一般捷雕。 火紅的嫁衣襯著肌膚如雪椒丧。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天救巷,我揣著相機與錄音壶熏,去河邊找鬼。 笑死浦译,一個胖子當著我的面吹牛棒假,可吹牛的內容都是我干的。 我是一名探鬼主播精盅,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼帽哑,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了渤弛?” 一聲冷哼從身側響起祝拯,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后佳头,有當地人在樹林里發(fā)現了一具尸體鹰贵,經...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年康嘉,在試婚紗的時候發(fā)現自己被綠了碉输。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,973評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡亭珍,死狀恐怖敷钾,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情肄梨,我是刑警寧澤阻荒,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站众羡,受9級特大地震影響侨赡,放射性物質發(fā)生泄漏。R本人自食惡果不足惜粱侣,卻給世界環(huán)境...
    茶點故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一羊壹、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧齐婴,春花似錦油猫、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至嚣州,卻和暖如春鲫售,著一層夾襖步出監(jiān)牢的瞬間共螺,已是汗流浹背该肴。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留藐不,地道東北人匀哄。 一個月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像雏蛮,于是被迫代替她去往敵國和親涎嚼。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,982評論 2 361

推薦閱讀更多精彩內容

  • ??JavaScript 與 HTML 之間的交互是通過事件實現的。 ??事件,就是文檔或瀏覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,508評論 1 11
  • 第3章 基本概念 3.1 語法 3.2 關鍵字和保留字 3.3 變量 3.4 數據類型 5種簡單數據類型:Unde...
    RickCole閱讀 5,133評論 0 21
  • “外婆立哑,大雁往南飛了夜惭,昨天也看到了一群☆醮拢”我抬著頭诈茧,看著大雁遠去,和外婆說道捂掰「一幔“哪里啦?我看不真这嚣。"外婆眼睛老化的...
    Derek_Kun閱讀 325評論 1 2
  • 這是一篇刊登在MIT Technical Review, Chain Letter上面的文章姐帚,覺得挺有啟發(fā)互广,也算是...
    JChenjunjie閱讀 211評論 0 1
  • 我只想知道我將來會死在什么地方,這樣我就可以永遠不去那里啦卧土。 有人說《窮查理寶典》是一本投資圣經惫皱,而在我眼里,它是...
    007小王子閱讀 2,050評論 8 25