1運算符
算數運算符:+，-，*，%，/，++，--
指派運算符:=,+=,-=,*=,/=,%=
比較運算符:==,!=,!==,>,<,>=,<=
===(全等于) !== (不全等于): 判斷值和資料的類型
邏輯運算符:&&,||,!
條件運算符:
字元串操作: +連接配接符号,
位運算符:
2變量
var 變量名=值
var 的類型取決于值的類型 類型一個自動類型
var 類型可以動态的變換
var a = "abc"
a = 123 這是沒問題的
3資料類型
數字類型 number
字元串類型 string 空字元也是字元類型
真假類型 boolean
空類型: null什麼都沒有
未定義類型:Undefined 表示沒有定義
符合資料類型:複雜類型,array數組,object對象
檢視資料的類型 Typeof 傳回的是
4alert 彈出一個視窗,會暫停程式的運作
5文法規則:
1區分大小寫
2所有的符号都必須是英文狀态下的
3可以不加分号結尾,但是最好加上最好.
4單行注釋 // 多行注釋 /**/
5document.write() 輸出到頁面
6傳值
指派傳值: 兩份資料,之間不會影響
引用傳值: 一份資料，任意一個改動值另一個都會收到影響
簡單資料是指派傳值 var a = 10; var b = a;
複雜資料都是引用傳值: var a = {a:"你好",b:23}; var b = a
7if(條件){語句塊}
if(條件){語句塊} else{語句塊}
if(條件){語句塊} else if(條件){語句塊} else{語句塊}
8switch
1
2
3
4
5
6
7
8
9
10
11
12
<code>switch</code><code>(值)</code>
<code>{</code>
<code> </code><code>case</code> <code>值:</code>
<code> </code><code>{</code>
<code> </code><code>}</code>
<code> </code><code>break</code><code>;</code>
<code> </code><code>case</code> <code>10>值 前提是值是bool類型</code>
<code> </code><code>break</code>
<code> </code>
<code> </code><code>default</code><code>:預設</code>
<code>}</code>
9while(條件){執行體}
10 for(初始值;循環條件;值每次的變化){循環體}
11函數 function 函數名(){函數體}
帶參數函數 function 函數名(名字){ 使用參數直接用名字 函數體}
帶參數的不需要加var,
<code> </code><code>function</code> <code>jia(a,b)</code>
<code>document.write(a+b);</code>
<code>jia(10,20)</code>
參數最後一個可以有預設值
function jia(a,b=20){}
12數組
同資料類型的變量放在一個集合裡
var arr=[23,24,25]
通路第一個取值arr[0]
長度: arr.length
13二維數組
周遊二維數組
13
14
15
16
17
18
<code>var</code> <code>arr1=[1,2,3];</code>
<code>var</code> <code>arr2=[4,5,6];</code>
<code>var</code> <code>arr3=[7,8,9];</code>
<code>var</code> <code>arr4=[arr1,arr2,arr3];</code>
<code>或者</code>
<code>var</code> <code>arr4=[</code>
<code> </code><code>[1,2,3],</code>
<code> </code><code>[4,5,6],</code>
<code> </code><code>[7,8,9] </code>
<code> </code><code>];</code>
<code>for</code><code>(</code><code>var</code> <code>i = 0;i<arr4.length;i++)</code>
<code>for</code><code>(</code><code>var</code> <code>j =0;j<arr4[i].length;j++)</code>
<code>document.write(arr4[i][j]+</code><code>"<br/>"</code><code>);</code>
14常用函數
ParseInt:取整
parseFloat: 去浮點數
NaN:not a number表示不是一個數字
isNaN: 判斷是不是數字,是傳回false 如果是字元才會傳回true
15array對象
var arr = new Array(23，2,2,4) // 建立一個array對象
對象有屬性和方法
Concat()連接配接内容或者數組,組成新的數組 傳回
Join加入某個字元n,用n來連接配接數組的每項組成的字元串 最後元素一個不會
arr567 = arr567.join(""); 使用這種方法,可将一個數組變成一個字元串
Pop删除數組最後一個元素,并傳回
Push加入新的内容到最後,傳回新的長度
Reverse 反轉數組的順序
16 string對象 var str = "abc" var str = new string("abc")
屬性:
length 字元串長度
方法:
charAt(n) 擷取字元串裡下标為n的字元
也可以直接用[]下标号 取值
CharCodeAt(n) 找到索引位置上的字元串的編碼值 ASCLL
indexOf("m") 找m在字元串中第一次出現的位置 從0開始沒找到傳回-1
lastIndexOf("c") 字元c在字元串中最後一次出現的位置 找到傳回-1
split("n") 以字元n分割字元串為 傳回一個數組
如果沒有這個字元 就會把所有的字元串轉為一個數組元素.
split("") 可以把字元串 每個元素切割成 數組
substr(n,m):截取字元串: 把字元串從n開始的地方截取m個字元
如果隻有一個參數n,預設就從n開始截取到最後
substring(n,m)截取字元串:把字元串從n的位置開始截取到m的位置,
注意能夠取到n但是去不到m
toLowerCase() 把字元串中的字元轉換成小寫toUpperCase轉大寫
17 Math 對象
Math.pow(n,m) 求n的m次方
Math.abs(n)求n的絕對值
Math.round(n)求n的四舍五入值
Math.floor(n) 求n的向下取整的值,不大于n的最大整數
Math.ceil(n) 求n的向上取整的值，不小于n的最小整數
Math.random()獲得一個0到1之間的随機數,注意:能取到0,但不不能取到1
Math.random()*20 求0到20之間的随機數
Math.random()*10+10 求10到20之間的随機數
也就是最小10最大20,同時減去10(0,10）然後總體+10
求30-60之間的随機數:
首先30-30 60-30(0,30)然後整體+30
Math.random()*30+30
50 100随機數 都減去50(0*50) 整體加50
Math.random()*50+50
18 JS特殊字元
單引号和雙引号：隻是用字元和字元串這兩個沒有差別
如果雙引号中包括雙引号需要用\"轉義
單引号也是一樣的
如果要用反斜杠'\\'
\轉義字元 document.write("他說:\"aaa,bbb,ccc,hggg\""+"<br/>");
\r回車
\r換行
19 Date 對象
構造方法:
new Date(); //建立目前時間日期對象
new Date("1999/9/9 6:6:6") 建立一個指定的時間
new Date("1999,9,9,6,6,6") 建立一個指定的時間日期對象
new Date(2343523445632) 建立一個從1970年開始的1-1-淩晨0點開始,
以毫秒為機關, 但現在的時間 機關是毫秒。
toLocalString() 以目前本地格式顯示
getFullYear() 擷取年份
getMonth() 擷取月份
getDate() 擷取日期
getHours() 擷取小時
getMinutes() 擷取分鐘數
getSeconds() 擷取秒數
getMilliSeconds() 毫秒
getDay() 擷取星期
setFullYear(n) 設定年份
setMonth() 設定月份
setDate() 設定日期
setHours() 設定小時
setMinutes() 設定分鐘數
setSeconds() 設定秒數
setMilliSeconds() 設定毫秒
20 Object對象
var obj = {name:"小明",age:24,taiji:function(){},zuofan:function(alert("做飯")){]};
裡面有屬性 有方法
使用對象
obj.name 取值
//調用方法
obk.zuofan();
HTML和JS互動 通過id擷取這個标簽
HTML:對象.HTML屬性=值
CSS: 對象.style.CSS 屬性=值
document.getElementById(标簽id) 擷取之後 Js就可以使用這個标簽的屬性和方法了
Onclick 點選
Onmouseiver 滑鼠放上
Onmouseout 滑鼠離開.
<code>function</code> <code>fn(){</code>
<code>var</code> <code>obj = document.getElementById(</code><code>"d1"</code><code>);</code>
<code>obj.style.background = </code><code>"red"</code><code>;</code>
<code>function</code> <code>fm(){</code>
<code>obj.style.background = </code><code>"blue"</code><code>;</code>
<code></script></code>
<code><body></code>
<code><div id=</code><code>"d1"</code> <code>onmouseover=</code><code>"fn()"</code> <code>onmouseout=</code><code>"fm()"</code><code>></code>
<code>這是DIV</code>
<code><div/></code>
21 事件
滑鼠事件:
Onclick:點選
OMouseover:滑鼠放上
Onmouseout:滑鼠離開
ONdblclick:輕按兩下事件
Onmousedown:滑鼠按下
Onmouseup:滑鼠擡起
Onmousemove: 滑鼠移動
表單事件:
onfocuss:獲得焦點
onblur:失去焦點
onsubmit:送出事件
onchange:當發生改變的時候
onreset: 重置事件
鍵盤事件:
onkeyup: 鍵盤擡起
onkeydowm: 鍵盤按下
onkeypress:鍵盤按下一次
視窗事件:onload事件
頁面加載完成之後立刻執行的事件。
21 DOM對象 當網頁被加載時,浏覽器會建立頁面的文檔對象模型(Document Object Model)
通過這些對象 去修改或者擷取元素對應的内容
22 DOM操作HTML
JavaScript能改變頁面中所有HTML的元素
JavaScript能夠改變頁面中所有的HTML屬性
JavaScript能夠改變頁面中所有的CSS樣式
JavaScript能夠對頁面中所有的事件作出反應
document.getElementById("id号")
//通過元素名擷取
<p>aaa</p>
<p>bbb</p>
他預設獲得的就是第一個元素的對象
document.getElementsByTagName("p")
23異常捕獲
try{
放可能會發生異常的代碼
}catch(err){
發生異常在這裡處理 err就是錯誤資訊
}
自定義錯誤 使用throw抛出
如 if(字元串 == "") 我們不想要空字元串
{
throw "字元串不能為空";
}catch(err)
{
這時候 err輸出的就是 字元串不能為空
24 使用函數來定義對象,然後建立新的對象
<code>建立一個object對象 并且為對象的屬性指派</code>
<code>poe = </code><code>new</code> <code>Object()</code>
<code>poe.age = 10</code>
<code>poe.name = </code><code>"a"</code>
<code>還有另外一種也可以</code>
<code>poe = {age:</code><code>"10"</code><code>,name:</code><code>"hahaha"</code><code>};</code>
<code>document.write(</code><code>"age:"</code><code>+poe.age)</code>
<code>document.write(</code><code>"name:"</code><code>+poe.name)</code>
使用函數來建立
<code>function</code> <code>peop(name,age){</code>
<code>this</code><code>._name = name;</code>
<code>this</code><code>._age = age;</code>
<code>this</code><code>._print = </code><code>function</code> <code>prints(){</code>
<code>document.write(</code><code>"age:"</code><code>+</code><code>this</code><code>._age+</code><code>"name:"</code><code>+</code><code>this</code><code>._name);</code>
<code>peopa = </code><code>new</code> <code>peop(</code><code>"zhangsan"</code><code>,</code><code>"10"</code><code>)</code>
<code>peopa._print()</code>
25事件詳解
HTML事件處理
<code>這是一個Button标簽</code>
<code><button id=</code><code>"btn1"</code><code>>按鈕</button></code>
<code><script></code>
<code> </code><code>var</code> <code>btn = document.getElementById(</code><code>"btn1"</code><code>)</code>
<code> </code><code>btn.onClick = </code><code>function</code><code>(){ 函數體代碼 } 點選這個按鈕會執行這個</code>
<code> </code><code>//如果是這種情況 </code>
<code> </code><code>btn.onclick = </code><code>function</code><code>(){ alert(</code><code>"a"</code><code>)} 這個事件會被覆寫</code>
<code> </code><code>btn.onclick = </code><code>function</code><code>(){ alert(</code><code>"b"</code><code>)} 這個事件會執行</code>
這是DOM2級事件處理
addEventListener("事件名","事件處理函數","布爾值")
true事件捕獲,false事件冒泡 這個版本暫時忽略
使用removeEventListener()移除一個事件
<code>var</code> <code>btn = document.getElementById(</code><code>"btn1"</code><code>)</code>
<code> </code><code>btn:addEventListener(</code><code>"click"</code><code>,da1)</code>
<code>btn:addEventListener(</code><code>"click"</code><code>,da2)</code>
<code>function</code> <code>da1(){alert(</code><code>"我是事件1"</code><code>)}</code>
<code>function</code> <code>da2(){alert(</code><code>"我是事件2"</code><code>)} 這個事件會依次執行</code>
<code>删除一個事件</code>
<code>btn:removeEventListener(</code><code>"click"</code><code>,da1)</code>
<code>使用type屬性可擷取事件類型 比如 click mouseover</code>
<code>target擷取事件目标</code>
<code>stopPropagation() 阻止事件冒泡</code>
26Window對象
innerHeight 浏覽器内部高度
innerWidth 浏覽器内部寬度
26 可以設定一個時間間隔來執行代碼
1setlnterval()間隔 機關毫秒數,不停的執行指定的代碼
clearlnterval()用來停止setlnterval方法的函數代碼
2setTimeout（）暫停指定的毫秒數後指定的代碼
clearTimeout 停止執行settimeout方法的代碼
我們每隔1秒 去調用擷取事件
<code>var mytime = setInterval(function(){</code>
<code> </code><code>gettime();</code>
<code>},1000)</code>
<code>function gettime(){</code>
<code>var d = </code><code>new</code> <code>Date();</code>
<code>var t = d.toLocaleTimeString();</code>
<code>document.getElementById(</code><code>"timew"</code><code>).innerHTML=t;</code>
26 Location 對象 window.location用來擷取目前頁面的位址(URL)
27 Screen對象
screen.avaliWidth 可用螢幕寬度
screen.availHeigth 可用螢幕高度
screen.heigth 螢幕高度
screen.width 螢幕寬度
28 面向對象
29 prototype
在JavaScript中prototype是實作面向對象的重要機制
每個函數就是一個對象(function)函數對象都有一個子對象,prototype對象,類是
以函數的形式來定義的,prototype表示改函數的圓形,也表示一個類成員的集合
30 function 來模拟類
19
20
<code>function Peo(){</code>
<code>Peo.prototype.shuo = function(){</code>
<code>alert(</code><code>"說話"</code><code>);</code>
<code>執行個體化</code>
<code>var p = </code><code>new</code> <code>Peo()</code>
<code>p.shuo() 調用類方法</code>
<code>屬性</code>
<code>Peo.prototype.age </code>
<code>這個function Peo就相當于構造函數 這樣可以給内部屬性指派</code>
<code>function Peo(age){</code>
<code> </code><code>this</code><code>._age = age</code>
<code>var p = </code><code>new</code> <code>Peo(30)</code>
<code>alert(p._age) 這裡輸出的就是30</code>
31 類的繼承
<code>function</code> <code>Stu(){</code>
<code>繼承自 上面的Peo </code>
<code>Stu.prototype = </code><code>new</code> <code>Peo();</code>
<code>調用父類的函數</code>
<code>var</code> <code>s = </code><code>new</code> <code>Stu();</code>
<code>子類重名 覆寫父類方法</code>
<code>Peo.prototype.shuo = </code><code>function</code><code>(){</code>
<code> </code><code>alert(</code><code>"說不出話"</code><code>);</code>
<code>如果還想調用父類的方法</code>
<code>var</code> <code>superFunc = Stu.prototype.shuo;</code>
<code>superFunc.call(</code><code>this</code><code>);</code>
父類的先構造 然後 子類再構造
成員函數可以直接使用成員屬性
<code> </code><code>alert(</code><code>"說話"</code><code>+</code><code>this</code><code>._age);</code>
閉包是外部不能通路這個對象裡的變量
21
22
23
24
25
26
27
28
29
30
31
<code>var</code> <code>n = 10 這個變量可以在任意地方使用</code>
<code>function</code> <code>Peo(age){</code>
<code>this</code><code>._age = age</code>
<code>alert(</code><code>"父類"</code><code>+</code><code>this</code><code>._age);</code>
<code>alert(</code><code>"說話"</code><code>+</code><code>this</code><code>._age);</code>
<code>alert(n) 成功輸出</code>
<code>但是我們可以把他包起來</code>
<code>(</code><code>function</code><code>(){</code>
<code>var</code> <code>n = 10</code>
<code> </code><code>alert(</code><code>"父類"</code><code>+</code><code>this</code><code>._age);</code>
<code>}());</code>
<code>這樣外部就不能通路他了</code>
這時候外部不能通路了,在麼辦呢?
這裡就要面向對象的封裝了
<code>window.Peo = Peo 使用window對象來記錄這個變量</code>
<code>然後就可以直接使用Peo了</code>
另一種方法 來使用面向對象
首先還是建立一個function
<code>function</code> <code>Per(){</code>
<code>//建立一個空的對象</code>
<code>var</code> <code>_this = {}</code>
<code>_this.shuohua = </code><code>function</code><code>(){alert(</code><code>"說話"</code><code>);}</code>
<code>//傳回這個對象</code>
<code>return</code> <code>_this;</code>
繼承
<code>function</code> <code>ter(){</code>
<code>var</code> <code>_this = Per();</code>
建立對象 并調用方法
<code>var</code> <code>t = </code><code>new</code> <code>ter()</code>
<code>t.shuohua();</code>
重寫父類方法
<code>_this.shuohua = </code><code>function</code><code>(){</code>
<code>alert(</code><code>"不說話"</code><code>);</code>
如果還是要調用父類的方法
<code>var</code> <code>superFunc = _this.shuohua;</code>
有參構造和屬性
<code>function</code> <code>Per(name){</code>
<code>_this.names = name;</code>
封裝起來
<code>alert(_this.names+</code><code>"說話"</code><code>);</code>
<code>window.Per = Per;</code>
本文轉自超級極客51CTO部落格，原文連結：http://blog.51cto.com/12158490/2062919，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)