1. 基礎(chǔ)
1. 基本數(shù)據(jù)類型
var b;
typeof b; //undefined
var a = true;
typeof a; //boolen
var ele = document.getElementById("div1");
typeof ele; //object
//typeof的返回類型number,string,bool,object,function,undefined，都是字符串
2. 字符串
//js中字符串是不能改變的
s = "Hello";
s[0] = "t"; //s還是="Hello"
s = s.toLowerCase();
s = s.toUpperCase();
s.indexOf('el'); //1
s.substring(0, 5); // [0,5)
s.substring(5); //[5,+oo);
3. 數(shù)組
var arr = [1, 2, 3];
arr[5] = 'x';
//arr => [1, 2, 3, undefined, undefined, 'x']
var arr = [1, 2, 3];
arr.length = 6;
//arr => [1, 2, 3, undefined, undefined]
arr.length = 2;
//arr =>[1, 2]
var arr = [10, 20, '30', 'xyz'];
arr.indexOf(30); // -1
arr.indexOf('30'); //2
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); //[0, 3)
arr.slice(3); // [3, +oo)
aCopy = arr.slice(); //[0, +oo) 相當(dāng)于復(fù)制整個數(shù)組
aCopy === arr; //false
push和pop
var arr = [1, 2];
arr.push('A', 'B'); //arr= [1, 2, 'A', 'B']
arr.pop(); //返回'B'
arr = [];
arr.pop(); // undefined
unshift和shift
var arr = [1, 2];
arr.unshift('A', 'B'); // arr =['A', 'B', 1, 2]
arr.shift(); // 'A'
sort
var arr = ['B', 'C', 'A'];
arr.sort(); //arr =['A', 'B', 'C']
reverse
var arr = ['one', 'two', 'three'];
arr.reverse(); //arr = ['three', 'two', 'one']
splice
var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
arr.splice(2, 3, 'Google', 'Facebook'); // 返回刪除的元素 ['Yahoo', 'AOL', 'Excite'];
//arr = ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle'];
//只刪除，不添加
arr.splice(2, 2); //從索引2 開始，刪除兩個
//只增加，不刪除
arr.splice(2, 0 , 'Google', 'Facebook');
數(shù)組遍歷
var myArr = ['xu', 'zhang', 'ji', 'shou'];
for (x in myArr) {
console.log(myArr[x]);
}
//////////////////////
myArr.forEach(function(e){});
老版ie沒有forEach方法，手動增加
if(!Array.prototype.forEach) {
Array.prototype.forEach = function(callback, thisArg) {
var T, k;
if(this == null) {
throw new TypeError("this is null or not defined");
}
var o = Object(this);
var len = o.length >>> 0; //Hack to convert o.length to a UInt32
if ({}.toString.call(callback) != "[object Function]") {
throw new TypeError(callback + "is not a function");
}
if (thisArg) {
T = thisArg;
}
k = 0;
while(k < len) {
var kValue;
if (k in o) {
kValue = o[k];
callback.call(T, kValue, k, o);
}
k++;
}
}
}
/////////奇技淫巧
for(var i = myArr.length; i--;) {}
重要應(yīng)用
//在瀏覽器通過document.getElementByTagName選擇的DOM節(jié)點是一種類似array的array，不能使用pop和push
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
2. 判斷Nan不能直接比較
a == NaN; //總是false
isNaN(a); //如果a是NaN，返回true
js Date屬性
var oDate = new Date();
oDate.getDate(); //返回 1-31中的一個數(shù)
oDate.getDay(); //返回0-6
oDate.getFullYear(); //返回四位數(shù)的年份
oDate.getHours(); //返回0-23
oDate.getMinutes(); //返回0-59
oDate.getSeconds(); //返回0-59
oDate.getMonth(); //返回月份0-11
oDate.getTime(); //返回1970年1月1日至今的毫秒數(shù)
oDate.toString(); //轉(zhuǎn)化為字符串
3. AJAX筆記
var oAjax;
if(window.XMLHttpRequest) {
oAjax = new XMLHttpRequest();
} else {
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
oAjax.open("GET", "test.txt", true); //true代表異步
oAjax.send(); //可以穿一個string，但是只能在POST中用
ajax在瀏覽器未關(guān)閉的時候，同一個地址只讀一次（緩存）
//如果想要像表單一樣提交數(shù)據(jù)，必須設(shè)置http頭
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
//獲取返回值
oAjax.responstText //以字符串形式返回數(shù)據(jù)
oAjax.responseXML //已XML形式返回數(shù)據(jù)
onreadystatechange ->存儲函數(shù)，當(dāng)readyState發(fā)生變化時調(diào)用
readState => 0-4
status => 200,404
oAjax.onReadyStatechange = function() {
if(oAjax.readyState == 4 && oAjax.status == 200) {
}
}
var com = "1+2+3-4+10*15-6";
eval(com);//計算這個表達(dá)式
var strS = '[1, 2, 3]';
var arr = eval(strS);
輸入控件狀態(tài)變化
HTML表單事件
onblur =>元素失去焦點執(zhí)行腳本
onchange =>當(dāng)元素改變執(zhí)行腳本
onfocus =>當(dāng)元素獲得焦點執(zhí)行腳本
onformchange =>當(dāng)表單改變執(zhí)行腳本
onforminput =>當(dāng)表單獲取用戶輸入執(zhí)行腳本
oninput =>當(dāng)元素獲取用戶輸入執(zhí)行腳本
oninvalid =>當(dāng)元素?zé)o效時執(zhí)行腳本
onselect =>當(dāng)選取元素時執(zhí)行腳本
onsubmit =>當(dāng)表單提交時執(zhí)行腳本
HTML鍵盤事件
onkeydown =>鍵盤按下時
onkeypress =>當(dāng)按下并松開鍵盤時
onkeyup =>當(dāng)鍵盤松開時
#this.value就是輸入控件的值
<form action="">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<select name="customers" onchange="showCustomer(this.value)" >
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
可以為一個form設(shè)置一個onchange函數(shù)，如果checkbox和radiobutton 改變則會調(diào)用，
文本框中文字改變不會調(diào)用
#小筆記
<div name="abc"><b>測試</b></div>
.innerHTML == <b>測試</b>
.innerTEXT == 測試
