Js總結

JS總結：
一、javascript的特色
是一種嵌入在網頁中的程序段。(客戶端腳本語言)
是一種解釋型語言，被瀏覽器解釋執行。
JavaScript借用了Java的名字，也使用了部分java的語法。
加強客戶端的交互功能。

二、在網頁中嵌入js的方式
內嵌式：
<script>
……
</script>

外聯式：<script src="aa.js"></script>

直接編寫在元素的事件屬性中：<input type="button" value="提交" onclick="alert()">

超連接僞URL方式：<a href="javascript: alert('hello World');">Click</a>

三、js變量的特色
弱類型，不必定要初始化。
弱類型是指變量任何數據均可以存放。能夠存放數字，能夠存放字符串，也能夠存放對象的引用。
正由於javascript是弱類型的語言，因此形參不能指明變量的類型。
js變量定義：var x;

四、js原始類型：
undefined:
當聲明的變量未初始化時，值爲undefined。
當函數無明確返回值時，其調用結果也是undefined。

null：表示不存在的對象。，null是從Undefined派生來的。所以null==undefined

boolean：true或false

number：數字型，能夠是整數，能夠是浮點數

NaN表示非數字，它與自身不相等。通常發生在類型轉換失敗時，isNaN()較驗是否爲數字。

string：可用單引號或雙引號聲明。比較是否相等用==，方法大部分和java相似。長度：var x = "abc";alert(x.length);

五、使用typeof獲得指定變量存放數據的類型。typeof(null) 返回object
使用instanceof判斷變量指向對象是否匹配某個類型
var s = new String("hello world");
var b = s instanceof String;
alert(b); //輸出true

六、自動類型轉換規則
var x = "10"-2;結果：8 —— 自動將"10"轉爲Number類型
var x="10"+2;結果：'102'-------若有一個爲字符串，則是鏈接
var s=9+2+"8";結果：'118' —— 先進行9+2結果爲11，再和」8」鏈接
var x="2"*"3";結果：6 。自動將字符串轉爲整形
var y="4"*"abc";結果：NaN ——相乘若有一個爲非數字NaN，則結果爲非數字NaN

==比較內容，能夠進行自動類型轉換。===比較時，同時比較類型
alert(55=='55');結果爲true; alert(55==='55');結果爲false;

七、parseInt()和parseFloat，將字符串轉化爲number類型
var a = parseInt("1234px"); //返回1234
var b = parseInt("abc"); //返回NaN

八、正則表達式：
var x=/^a{2,8}$/;
alert(x.test("aaa"));
正則表達式通常用於表單驗證。<form onsubmit="return checkForm()"> 若是checkForm()返回false，則阻止表單提交
表單提交：表單對象.submit()

九、數組：
建立數組：var x = new Array();
var arr = [1,2,3,4,5,6,7,8];

arr.length; //數組長度
arr.push(100);//追加元素。

十、日期類型
function setDate(){
//建立日期對象
var date = new Date();
//獲得年月日，時分秒
var str = (date.getYear()+1900)+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 ";
str += date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
spanObj.innerHTML = str;

}

//設置時間函數
var id=window.setInterval("執行代碼",毫秒數);
//清除時間函數
window.clearInterval(id);

十一、Global全局對象經常使用方法
isNaN()：判斷是不是非數字
parseInt()：將字符串轉化爲整型，會將第一個非數字之後的字符所有忽略，轉化失敗爲NaN
parseFloat()：將字符串轉化爲浮點型，轉化失敗爲NaN
eval()。將字符串做爲js代碼執行。
eval("alert('abc')") 等價於 alert('abc');
encodeURI 將中文，空格從新編碼

十二、js對象特色
a、js是基於原型的面嚮對象語言，只有對象，沒有類，沒有接口。
b、js的函數也是對象
c、js對象的屬性和方法，能夠在運行期間動態的添加和刪除

1三、訪問、刪除、遍歷對象屬性：
訪問對象屬性：對象.屬性名 var obj = {id:1}; alert(obj.id);
對象["屬性名"] var obj = {id:1}; alert(obj["id"]);

刪除屬性：delete 對象.屬性名

遍歷對象屬性列表
for(var x in dog1){//x爲屬性名，dog1["屬性名"]取該對象指定屬性名的值
alert(x+" "+dog1[x]);
}

1四、json格式對象
var x = {};
var obj = {name:'張三',age:30};
var arr = [{name:'張三',age:30},{name:'李四',age:24},{name:'王五',age:28}];

1五、事件流
事件流意味着頁面上不止一個元素可響應相同的事件。
事件冒泡(IE)。(先響應事件源，再響應父容器)
事件捕獲(NetsCape)。(先響應父容器，再響應事件源)
事件處理(FireFox)。事件處理(能夠選擇先響應父容器，仍是先響應事件源)

1六、事件委派的方式：

傳統事件：兼容性好，一個事件只能綁定一個函數：
div1.onclick = function(){

}
div1.onclick=divClick;//只能寫函數名

現代事件：一個事件能夠綁定多個函數，但兼容性差。

必定要等待瀏覽器將元素加載完畢後，才能給元素添加事件。通常在window.onload中書寫事件添加

1七、事件處理程序返回值
若是事件中返回值爲false，能夠阻止元素默認行爲

1八、event對象：事件發生時，用於描述事件信息的對象。能夠得到鼠標信息和鍵盤信息
var e;
if(window.event){
e=window.event;
}
else if(arguments[0]){
e=arguments[0];
}
能夠經過e.cancelBubble=true(IE)或e.stopPropagation()(firefox)停止事件傳播

1九、事件類型
鼠標事件：onclick(單擊)、onmousemove(移動)、onmouseover(進入)、onmouseout(離開)
鍵盤事件：keydown(按下)、keyup(彈起)
html事件：window.onload(文檔加載完畢後執行)、window.onunload(文檔卸載完畢後執行)、onchange(下拉框選項變化執行)、onsumbit(表單提交執行)、onblur(失去焦點執行) onfocus(獲得焦點執行)
刷新頁面的時候，會觸發load事件和unload事件。

20、跳轉頁面
location.href="aaa.html";

2一、dom操做常見方法
createElement()建立新元素
appendChild() 追加元素
removeChild()刪除元素
replaceChild()：替換元素
parentNode 父元素
nextElementSibling下一個元素兄弟節點
previousElementSibling上一個元素兄弟節點

2二、得到文本節點
元素節點.firstChild-獲取文本節點
textNode.nodeValue="..." - 設置文本內容

2三、訪問元素節點：
getElementsByTagName(name)：獲得元素指定標記子元素集合
getElementsByName(name)：獲得指定name屬性的元素集合
getElementById(id)：按ID獲得元素對象

2四、innerHTML：表示元素中間的文本。在老標準中，table和select不支持。
value屬性通常只用於表單元素

2五、改變元素的樣式，須要style屬性，若是樣式中有-，則去掉-，採用駝峯命名法
元素對象.style.backgroundColor="red";
經過style屬性操做的是內嵌樣式。

改變元素對象的class屬性：
<div class="aaa"></div>
對象.className="aaa";

2六、multiple：將下拉框變爲列表框，能夠選中多個選項。判斷下拉框選項是否選中：selected判斷複選框、單選框是否選中：checked