1. 基础
1. 基本数据类型
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. 数组
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) 相当于复制整个数组
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');
数组遍历
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--;) {}
重要应用
//在浏览器通过document.getElementByTagName选择的DOM节点是一种类似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中的一个数
oDate.getDay(); //返回0-6
oDate.getFullYear(); //返回四位数的年份
oDate.getHours(); //返回0-23
oDate.getMinutes(); //返回0-59
oDate.getSeconds(); //返回0-59
oDate.getMonth(); //返回月份0-11
oDate.getTime(); //返回1970年1月1日至今的毫秒数
oDate.toString(); //转化为字符串
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在浏览器未关闭的时候，同一个地址只读一次（缓存）
//如果想要像表单一样提交数据，必须设置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 //以字符串形式返回数据
oAjax.responseXML //已XML形式返回数据
onreadystatechange ->存储函数，当readyState发生变化时调用
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);//计算这个表达式
var strS = '[1, 2, 3]';
var arr = eval(strS);
输入控件状态变化
HTML表单事件
onblur =>元素失去焦点执行脚本
onchange =>当元素改变执行脚本
onfocus =>当元素获得焦点执行脚本
onformchange =>当表单改变执行脚本
onforminput =>当表单获取用户输入执行脚本
oninput =>当元素获取用户输入执行脚本
oninvalid =>当元素无效时执行脚本
onselect =>当选取元素时执行脚本
onsubmit =>当表单提交时执行脚本
HTML键盘事件
onkeydown =>键盘按下时
onkeypress =>当按下并松开键盘时
onkeyup =>当键盘松开时
#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设置一个onchange函数，如果checkbox和radiobutton 改变则会调用，
文本框中文字改变不会调用
#小笔记
<div name="abc"><b>测试</b></div>
.innerHTML == <b>测试</b>
.innerTEXT == 测试
