http://www.cnblogs.com/LS-tuotuo/p/5898708.html
講述了特詳細(xì)的基礎(chǔ)知識(shí)，數(shù)據(jù)類型和函數(shù)等。
二，在HTML中使用javascript###
1，Defer=“dafer”可以立即下載加載延緩執(zhí)行
2，Async 異步記載，可以讓腳本不必等待其他腳本再執(zhí)行，不兼容ie
3，< noscript>當(dāng)腳本無效的時(shí)候，才會(huì)顯示這段話</noscript>
第三章：基本概念
【數(shù)據(jù)類型】####
- 基本類型
- 引用類型
一，5種基本類型
String Number Undefined Boolean Null
基本類型都是按值訪問的，就是說你可以操縱變量實(shí)際的值。
特點(diǎn)：
1，值不可變，
2，基本類型沒有屬性和方法，
3，基本類型比較==如類型不同會(huì)自動(dòng)轉(zhuǎn)化相同類型比較，===不會(huì)轉(zhuǎn)化類型，兩個(gè)類型相同==和===就沒什么區(qū)別了。
4，typeof.xx來檢查基本數(shù)據(jù)類型
1，值不可變
var a="hanna",
a.toUpperCase()//HANNA
alert（a）//依然是hanna
** 二，引用類型**
1，Object 2，Array 3，data類型 4，RegExp類型 5，function類型
特點(diǎn)：
1，包含引用類型值的變量實(shí)際上包含的不是對象本身，而是指向?qū)ο蟮闹羔槨?br>
2，復(fù)制引用類型的值，也是賦值其引用的指針，因此兩個(gè)變量執(zhí)行同一個(gè)地址。
3，Array.isArray(arr)//來檢查是不是引用類型，返回true/false。istanceOf有作用域的問題。
Object類型
js中沒有類的概念，因此引用類型也被稱為對象定義。因?yàn)槭且环N將數(shù)據(jù)和功能組織在一起的數(shù)據(jù)結(jié)構(gòu)，也就是說是描述一類對象的屬性和方法。
1》，new 創(chuàng)建
var person = new Object();
person.name = "Nicholas";
person.age = 21;
2》對象字面量表示法
var person = {
name:"Nicholas",
age:21,
5:true //數(shù)值屬性名會(huì)自動(dòng)轉(zhuǎn)化為字符串
};
在通過對象字面量定義對象時(shí)，實(shí)際上不會(huì)調(diào)用Object構(gòu)造函數(shù)。
訪問對象屬性的方法：
1》點(diǎn)表示法2》方括號表示法
2》方括號表示法
alert(person.name); //"Nicholas"
alert(person["name"]); //"Nicholas"
Array類型
array就是數(shù)組類型，可以保存任何類型的數(shù)據(jù)
1》使用Array構(gòu)造函數(shù)
var colors = new Array();
var colors = new Array(20);
var colors = new Array("red","blue","green");
var colors = Array(3);
var colors = Array("Greg");
2》使用數(shù)組字面量
var colors = ["red","blue","green"];
var colors = [];
var colors = [1,2,];//不推薦使用，會(huì)創(chuàng)建一個(gè)包含2或3項(xiàng)的數(shù)組
var colors = [,,,,,];//不推薦使用，會(huì)創(chuàng)建一個(gè)包含5或6項(xiàng)的數(shù)組
與對象一樣，使用數(shù)組字面量表示法時(shí)，也不會(huì)調(diào)用Array構(gòu)造函數(shù)。
1，對象，2，數(shù)組,3，函數(shù)
//多個(gè)值構(gòu)成的對象，保存在內(nèi)存中，不能直接操作，需要操作其值的引用對象 ```
3，基本包裝類型3種
Boolean Number String
//基本包裝類型可以當(dāng)做對象來訪問，操作基本類型值一經(jīng)完畢會(huì)立即銷毀，
Null==Undefined //true
Number（"xxxxx"）//可用于任何類型的轉(zhuǎn)化為數(shù)值
Number（""）//0
parseInt("xxxx")//字符串轉(zhuǎn)化為整數(shù)數(shù)值
parseInt("")//NaN
parseFloat("xxxx")//字符串轉(zhuǎn)化為浮點(diǎn)數(shù)數(shù)值
parseFloat("")//NaN ```
**
1，parselnt（"22.5"） // 22
2，parseFloat(“22.5”) //22.5
3, var age =11;
var a= age.toString(); //字符串“11”
null和undefined沒有toString方法
4，var nu=null；var nu；
var a= String（nu）// 輸出“null”和“undefined”
String（） 任何值都是轉(zhuǎn)化。
５，--a 和a--的區(qū)別//a--第一次運(yùn)算不減，第二次再減去
var a=10;
var b= --a-1 ; //8
var a; //9
var c=a-- +1； //11
var d=a+1； //10
6，var a= i %2 //求?；蚯笥? 能被2整除的都是偶數(shù),2除以 i
7,== 和=== //==如果不是同類型，會(huì)自動(dòng)轉(zhuǎn)化后比較。
//===不會(huì)轉(zhuǎn)化，會(huì)直接比較，如何比較的是對象，
會(huì)比較對象的指引是不是同一個(gè)
８，+= //加賦值 。 -= //減賦值，*=，/=，%=，<<=, >>=
9,do-while //至少執(zhí)行一次，符合條件再執(zhí)行
10，for -in //可以用來枚舉對象的屬性。
//使用for-in之前，請先檢測對象是不是null或者undefined
11, label語句 start: for (var i=0; i < count; i++) {}//以后可以由break或者continue語句引用
12，brack和continue的區(qū)別，break立即退出循環(huán)不再繼續(xù)執(zhí)行，continue退出單層循環(huán)，會(huì)繼續(xù)執(zhí)行下面的。
13，switch case 中的default 的意思是，都不滿足case中的選項(xiàng)就會(huì)執(zhí)行
**
四，變量，作用域和內(nèi)存（86-100）
1，typeOf x //是檢查對象是那種基本類型
2，instanceOf //是檢查對象是那種引用類型，如果用來檢查基本類型會(huì)始終返回 false
3，局部環(huán)境中代碼執(zhí)行完畢，函數(shù)，變量都會(huì)自動(dòng)銷毀，全局環(huán)境直到程序關(guān)閉，比如關(guān)閉網(wǎng)頁或者瀏覽器時(shí)會(huì)全部銷毀。
4， 特殊情況下，也可以延長作用域鏈，try-catch和with
5，if 和for里面的聲明的變量會(huì)在循環(huán)條件結(jié)束后，依然存在，且在全局環(huán)境中可以訪問得到！切記
五，引用類型（101-155）
1，Object類型
創(chuàng)建引用類型有2種方法
1.1；var person =new Object（），person.name = "Nicholas";person.age = 29;//這是第一種
1.2；var a={name：“哈南”，age：18}；//后者是對象字面量語法，屬性名稱自動(dòng)轉(zhuǎn)化為字符串，如果var a={}== new Object //
2,array類型 ,其實(shí)就是數(shù)組類型
創(chuàng)建array類型有2中方法
1.1；var color=new Array(20); //創(chuàng)建一個(gè)包含20項(xiàng)的數(shù)組,array類型其實(shí)就是數(shù)組
var color=new Array{"red","blue","green"}。//創(chuàng)建一個(gè)...的數(shù)組，數(shù)組的length只有3項(xiàng)
1.2；var color=["red","blue"] //創(chuàng)建一個(gè)...的數(shù)組，數(shù)組的length只有2項(xiàng)目
切記如果使用color[0], //讀取和使用數(shù)組的值時(shí)，要使用方括號且是基于0索引的下標(biāo)。
3，檢查某個(gè)對象是不是數(shù)組，用instanceOf 有作用域的問題，現(xiàn)在可以使用Array.isArray(color)//檢查color是不是數(shù)組。返回true或者flase。
4，colors.join(",")//join（）//數(shù)組按照“，”作為分隔符進(jìn)行返回
5，colors.push("yelloy")//在數(shù)組的末端添加一項(xiàng)
6，colors.pop()//取出或者刪除數(shù)組最后一項(xiàng)值是多少
7，colors.unshift("0","00" );//在數(shù)組的前端添加2項(xiàng)
8，colors.shift();//取出或者刪除數(shù)組的一項(xiàng)
9，data.reverse()//可以對數(shù)進(jìn)行反轉(zhuǎn)數(shù)組原來的順序
10，short() //單獨(dú)的short（）其實(shí)是對字符串進(jìn)行排序，需是對數(shù)組進(jìn)行排序需要
function sortNumber(a, b)
{
return b - a//如果是a-b就是從大到小 調(diào)用的時(shí)候就用arr.short("sortNumber")
}
11,concat()// colors.concat("apple")//在colors數(shù)組后面追加一組數(shù)組，返回合在一起的數(shù)組// var newJson = json.concat();數(shù)組json的克隆clone
12，slice（） colors.slice(1,4) //返回?cái)?shù)組下標(biāo)1到4的數(shù)組
13，splice（）// colors.splice(0,2)//刪除數(shù)組中的前兩項(xiàng)，
splice(1, 0, "yellow", "orange");// 從位置1 開始插入兩項(xiàng)，0代表不刪除
var newJson = json.splice(0);數(shù)組json的克隆 clone
removed = colors.splice(1, 1, "red", "purple"); // 先刪除位置下標(biāo)1的項(xiàng)，再在1位置上插入2項(xiàng)
14，indexOf(),lastIndexOf()//會(huì)返回查詢數(shù)組，位置的下標(biāo)
15， 數(shù)組的迭代方法
every() ,filter() ,for Each() ,map(), some(),
every()//遍歷數(shù)組中的每一項(xiàng)都返回true，就返回true
some（）//遍歷數(shù)組中的任何一項(xiàng)返回true，就返回true
forEach（）//遍歷數(shù)組，給數(shù)組中的每一項(xiàng)運(yùn)行函數(shù)，沒有返回值
map（）//遍歷數(shù)組，對數(shù)組中的每一項(xiàng)運(yùn)行函數(shù)，返回函數(shù)調(diào)用結(jié)果組成的新數(shù)組。
filter（）//遍歷數(shù)組，對數(shù)組中每一項(xiàng)運(yùn)行函數(shù)，返回為函數(shù)為true的項(xiàng)組成的新數(shù)組
16，歸并方法
reduce（）//從數(shù)組第一項(xiàng)開始，逐個(gè)遍歷
reduceRigth（）//從數(shù)組最后一項(xiàng)開始，逐個(gè)遍歷
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){//第一個(gè)參數(shù)前一個(gè)
return prev + cur;
});
alert(sum); //15這個(gè)案例是個(gè)求和案例
17，日期，var d=new Date();d.getFullYear()年 ,d.getMonth()+1月 （這個(gè)要加1是因?yàn)椋ヾ.getDate();當(dāng)前日期
d.getHours()//時(shí)，d.getMinutes（）//分，d.getSeconds()//秒，d.getMilliseconds（）//毫秒
18，RegExp實(shí)例屬性 ？????(找個(gè)機(jī)會(huì) 好好看看)
19，每個(gè)函數(shù)都包含2個(gè)屬性：length 和prototype
函數(shù)名.length// 此函數(shù)接受參數(shù)的個(gè)數(shù)
20，JQ中bind（）的用法
$(document).ready(function(){
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
});
21，num.toFixed(2)//數(shù)字保留2位小數(shù)，超過2位則四舍五入
22，使用new操作符創(chuàng)建的引用類型的實(shí)例，在執(zhí)行流離開當(dāng)前作用域之前都一直保存在內(nèi)存中。而自動(dòng)創(chuàng)建的基本包裝類型的對象，則只存在于一行代碼的執(zhí)行瞬間，然后立即被銷毀。
23，stringValue.charAt(1)//返回下標(biāo)為1的字符串。
24，stringValue.concat（“world”）//hello world，concat連接字符串的
25，slice()和substring()和substr()的區(qū)別
var stringValue = "hello world";
alert(stringValue.slice(3)); //"lo world"
alert(stringValue.substring(3)); //"lo world"
alert(stringValue.substr(3)); //"lo world"
alert(stringValue.slice(3, 7)); //"lo w"
alert(stringValue.substring(3,7)); //"lo w"
alert(stringValue.substr(3, 7)); ```
26，indexof(“o”),lastIndexof(“o”)//返回第一個(gè)/最后一個(gè)字符串所在的下標(biāo)位置
27，stringValue.trim()//返回清除前后空格的字符串
trimRight()，trimLeft()//返回清除左/右空格的字符串
28，字符串大小寫轉(zhuǎn)化的，最經(jīng)典的兩個(gè)方法如下，還有特定區(qū)域，如土耳其語需要另外兩種轉(zhuǎn)化方法。toLocaleLowerCase()和toLocaleUpperCase()
alert(stringValue.toUpperCase()); //"HELLO WORLD"
alert(stringValue.toLowerCase()); //"hello world"
29，在全局作用域中的this指的是 Global對象，如果是在瀏覽器中就是windows對象。
30，URI好URL的區(qū)別//uri是資源標(biāo)識(shí)符 ，而URL是資源定位符，后者包含前者，是前者的具體，URI是指定標(biāo)識(shí)web字符串各個(gè)不同的部分，有效的Uri不能包含某些字符，比如空格。
31，用來檢驗(yàn)URL或者Url是否包含其他字符，可以使用encodeURI()、encodeURIComponent()、decodeURI()和decode-URIComponent()進(jìn)行編碼和解碼行為，來保證這是有效的URI和URL!
32，Math對象的計(jì)算功能
Math.min(1,3,6,8,9)//直接比較最小值
Math.max(1,3,6,8,9)//直接比較最小值
var values = [1, 2, 3, 4, 5, 6, 7, 8];
var max = Math.max.apply(Math, values);//傳入?yún)?shù)進(jìn)行比較
33，四舍五入
Math.ceil(25.1)//26 向上舍入
Math.floor(25.9)//25 向下舍入
Math.round(25.9)//26 標(biāo)準(zhǔn)四舍五入
34，隨機(jī)數(shù)random
parseInt(10Math.random()) //輸出0～10之間的隨機(jī)整數(shù)
Math.floor(Math.random()10+1)//輸出0～10之間的隨機(jī)整數(shù)
值 = Math.floor(Math.random() * 數(shù)值的總數(shù) + 第一個(gè)值)//
function selectFrom(lowerValue, upperValue) {//參數(shù)的最大值和最小值
var choices = upperValue - lowerValue + 1;//總數(shù)等于，最大值-最小值+1，第一個(gè)值就是最小數(shù)
return Math.floor(Math.random() * choices + lowerValue);
}
var num = selectFrom(2, 10);
alert(num); // 介于 2 和10 之間（包括 2 和 10）的一個(gè)數(shù)值
//也可以用于數(shù)組間的隨機(jī)
var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"];
var color = colors[selectFrom(0, colors.length-1)];//隨機(jī)數(shù)組的下標(biāo)
aler t(color); // 可能是數(shù)組中包含的任何一個(gè)字符串
####六，面向?qū)ο蟮某绦蛟O(shè)計(jì)（156-192）
**1，java和js面向?qū)ο罄斫?*
java是類式面向?qū)ο笳Z言，對象的狀態(tài)（state）由對象的實(shí)例（instance）所持有，對象的行為和方法（method）則有聲明該對象的類所持有，并且只有對象的結(jié)構(gòu)和方法能夠被繼承
js是原型式面向?qū)ο笳Z言，對象的行為和屬性，狀態(tài)都屬于對象本身，并且都能一起別繼承
**2，創(chuàng)建對象2種方式**
創(chuàng)建一個(gè)對象最簡單的方式就是創(chuàng)建一個(gè)Object的實(shí)例，然后為他添加方法和屬性如下：
var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function(){
alert(this.name);
};
---------------第二種---------對象字面量是創(chuàng)建對象的首選模式，如下：
var person={
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName: function(){
alert(this.name);
}
}
**數(shù)據(jù)的4種屬性**
1，表示能通過delete刪除屬性從而重新定義屬性，就是能否修改屬性的特性
2，能否通過for-in 循環(huán)返回屬性
3，能否修改屬性的值
4，包含這個(gè)屬性的數(shù)據(jù)值，就是讀取屬性的時(shí)候，從這個(gè)位置讀。寫入屬性的時(shí)候，把新值保存到這個(gè)位置。
**3，工廠模式，封裝以特定接口創(chuàng)建對象的細(xì)節(jié)**
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");
**4,構(gòu)造函數(shù)模式**
**構(gòu)造函數(shù)模式略勝于工廠模式**
創(chuàng)建自定義構(gòu)造函數(shù)意味著可以將它的實(shí)例標(biāo)識(shí)為一種特定的類型，這正是構(gòu)造函數(shù)略勝于工廠模式的地方。
**調(diào)用構(gòu)造函數(shù)會(huì)經(jīng)歷4中步驟**
1，創(chuàng)建一個(gè)新對象
2，將構(gòu)造函數(shù)的作用域賦給新對象（this就指向了這個(gè)新對象）
3，執(zhí)行構(gòu)造函數(shù)中的代碼（為這個(gè)新對象添加屬性和方法）
4，返回新對象
//按照慣例，構(gòu)造函數(shù)始終都是以一個(gè)大寫字母開頭，非構(gòu)造函數(shù)都是以一個(gè)小寫字母開頭。
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
4.1 什么是構(gòu)造函數(shù)
> 構(gòu)造函數(shù)和其他函數(shù)的區(qū)別，在于調(diào)用他們的方式不同
任何函數(shù)，只要是new操作符來調(diào)用，就可以稱之為構(gòu)造函數(shù)
反之任何函數(shù)，如果不是new操作符來調(diào)用，那么就是普通函數(shù)
// 當(dāng)作構(gòu)造函數(shù)使用
var person = new Person("Nicholas", 29, "Software Engineer");
person.sayName(); //"Nicholas"
// 作為普通函數(shù)調(diào)用
Person("Greg", 27, "Doctor"); // 會(huì)添加到window對象上來
window.sayName(); //"Greg"
// 在另一個(gè)對象的作用域中調(diào)用
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");//在o作用域中調(diào)用，就擁有了Person的對象和實(shí)例
o.sayName(); //"Kristen"
**5，原型模式prototype**
原型模式的構(gòu)造函數(shù)好處是：讓所有對象的實(shí)例共享它的方法和屬性。
換句話說：不必在構(gòu)造函數(shù)中定義對象的實(shí)例信息，而是將這些實(shí)例信息添加到原型對象上去。
> ``` function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.name="lilei"
person1.sayName(); //"lilei" 因?yàn)闀?huì)先去實(shí)例搜索，實(shí)例搜索不到才會(huì)去原型，如果實(shí)例有就算是null也只是返回實(shí)例屬性?？梢允褂胐elete刪除屬性。hasOwnProperty可以查出來自實(shí)例還是來自原型
alert(person1.hasOwnProperty("name")); //ture實(shí)例屬性返回true
**-------------------------
delete person1.name;
person1.sayName(); //"Nicholas"
alert(person1.hasOwnProperty("name")); //false原型屬性返回false
**----------------
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true
alert(person1.hasOwnProperty("name")); //false原型屬性返回false
還可以寫成這種格式的原型函數(shù)
}
Person.prototype = {
//使用對象字面量重寫原型，如果已經(jīng)已經(jīng)創(chuàng)建了實(shí)例它會(huì)切換和現(xiàn)有實(shí)例和新原型之間的聯(lián)系，所以需要后new
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
sayName : function () {
alert(this.name);
}
};
var friend = new Person();//這里切記要后new，先new出報(bào)錯(cuò)。
//如果是 Person.prototype.sayHi = function(){ alert("hi");};這種格式，先new后new都無所謂了
friend.sayName(); //Nicholas
也可以給原生對象添加屬性和方法但是一般不建議這么做，因?yàn)槿绻院笥幸环揭{(diào)用，可能會(huì)出現(xiàn)沖突。
> ```String.prototype.startsWith = function (text) {
return this.indexOf(text) == 0;
};
var msg = "Hello world!";
alert(msg.startsWith("Hello")); //true 給原生對象String添加方法，msg為String類型調(diào)用的時(shí)候可以用，但是下個(gè)String 可能就。。。有命名沖突的問題
6，原型對象的問題
1，它省略了構(gòu)造函數(shù)參數(shù)初始化的問題，所有的實(shí)例在默認(rèn)的情況下都是相同的值，這不是最大的問題
2，有共享的本性所導(dǎo)致的。如果有2個(gè)實(shí)例，操作其中一個(gè)實(shí)例A的給其屬性數(shù)組添加一個(gè)數(shù)據(jù)"Lili"，由于是共享的，所以另一個(gè)實(shí)例B中也會(huì)存在“Lili”。如下：
/ / 這里有一個(gè)很神奇的地方，如果是firends是定義在構(gòu)造函數(shù)內(nèi)的一個(gè)數(shù)組，
/ / 輸入的結(jié)果person1和person2的.friends的值就是不相同的
function Person(){
//this.firends= ["Shelby", "Court"];//在這里創(chuàng)建屬性，new出來的實(shí)例，后有push上的就不會(huì)重復(fù)。
}
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true
因此創(chuàng)建自定義類型最常見的方式就是：組合使用構(gòu)造函數(shù)模式和原型模式
**構(gòu)造函數(shù)模式用于定義實(shí)例屬性，而原型模式用于定義方法和共享屬性**
這樣每個(gè)函數(shù)都有自己的一套實(shí)例副本但同時(shí)又共享著對方法的引用。
**7，構(gòu)造函數(shù)和原型混合模式**(重要)
>```
//也就是說，構(gòu)造函數(shù)有自己的私有方法，而原型模式用來定義共享的的屬相和方法
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}//在這里實(shí)例的屬性都是在構(gòu)造方法中定義的，而由所有實(shí)例共享的屬性和方法則是在原型中定義的。
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true
因此這種構(gòu)造函數(shù)和原型混合模式是最廣泛認(rèn)識(shí)度最高的一種創(chuàng)建自定義類型的方法，可以說未來默認(rèn)的一種方式
8，動(dòng)態(tài)原型模式
//構(gòu)造方法的屬性
//切記在已經(jīng)創(chuàng)建了實(shí)例的情況下，不可以使用對象字面量形式，會(huì)切斷和新原型之間的聯(lián)系。
this.name = name;
this.age = age;
this.job = job;
//動(dòng)態(tài)添加的方法
//此方法只有在sayName不存在的情況下，才會(huì)添加
if (typeof this.sayName != "function"){
Person.prototype.sayName = function(){//注意在這里對原型的修改，會(huì)共享在所有實(shí)例里面，因?yàn)槭窃谠椭卸x的。
alert(this.name);
};
}
}
**9，寄生構(gòu)造函數(shù)模式**
巴拉巴拉 ，不建議使用。
**10，穩(wěn)妥構(gòu)造函數(shù)模式**
穩(wěn)妥對象指的是沒有公共屬性，而且其方法也不引用this對象
>```function Person(name, age, job){
//創(chuàng)建要返回的對象
var o = new Object();
//可以在這里定義私有變量和函數(shù)
//添加方法
o.sayName = function(){
alert(name);
};
//返回對象
return o;
}
**----------
var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"
**---------------------
變量friend 中保存的是一個(gè)穩(wěn)妥對象，而除了調(diào)用sayName()方法外，沒有別的方式可
以訪問其數(shù)據(jù)成員。即使有其他代碼會(huì)給這個(gè)對象添加方法或數(shù)據(jù)成員，但也不可能有別的辦法訪問傳
入到構(gòu)造函數(shù)中的原始數(shù)據(jù)。穩(wěn)妥構(gòu)造函數(shù)模式提供的這種安全性，使得它非常適合在某些安全執(zhí)行環(huán)
境——
11，原型鏈繼承
當(dāng)以讀取模式訪問一個(gè)屬性時(shí)，首先會(huì)搜索實(shí)例中該屬性，如果沒有找到，就會(huì)繼續(xù)搜索實(shí)例的原型的該屬性，再?zèng)]有，就搜索該實(shí)例有無繼承的。進(jìn)行到原型末端才會(huì)停下來。
1，同樣是原型鏈添加方法，重寫同名方法，后者會(huì)替換前者。
2，通過原型鏈實(shí)現(xiàn)繼承時(shí)，不能使用對象字面量創(chuàng)建原型方法，因?yàn)檫@樣會(huì)重寫原型鏈，會(huì)切斷實(shí)例和原型之間的聯(lián)系。設(shè)想現(xiàn)原型包含的是一個(gè)某Object的實(shí)例，如果使用對象字面量會(huì)直接把指針重定向了。
寄生組合式繼承
開發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類型最理想的繼承范式！
所謂寄生組合式繼承，即通過借用構(gòu)造函數(shù)來繼承屬性，通過原型鏈的混成形式來繼承方法
這個(gè)函數(shù)接受2個(gè)參數(shù)子類型構(gòu)造參數(shù)和超類型構(gòu)造參數(shù)。
在函數(shù)的內(nèi)部，第一步是創(chuàng)建超類型原型的一個(gè)副本，
第二步是為創(chuàng)建副本添加constructor屬性，從而彌補(bǔ)因重寫原型而失去的默認(rèn)的constructor屬性，
最后一步，將新創(chuàng)建的對象（即副本）賦值給子類型的原型。
function inheritPrototype(subType, superType){
var prototype = object(superType.prototype); //創(chuàng)建對象
prototype.constructor = subType; //增強(qiáng)對象
subType.prototype = prototype; //指定對象
}
###七，函數(shù)的表達(dá)式 193- 210
**1，定義函數(shù)有兩種方式**
1，函數(shù)聲明，2，函數(shù)表達(dá)式
匿名函數(shù)定義：匿名函數(shù)的name是空字符串，也就是匿名函數(shù)沒有函數(shù)名。
>```function functionName(arg0, arg1, arg2) { //1，函數(shù)聲明
//函數(shù)體 有函數(shù)聲明提升的作用
}
var functionName = function(arg0, arg1, arg2){ //2，函數(shù)的表達(dá)式
//函數(shù)體
};
2，arguments.callee 是一個(gè)正在執(zhí)行的函數(shù)的指針。
可以用arguments.callee 代替當(dāng)前執(zhí)行函數(shù)的函數(shù)名
但是在嚴(yán)格模式執(zhí)行下，訪問這個(gè)屬性會(huì)導(dǎo)致錯(cuò)誤，可以修改如下
if (num <= 1){
return 1;
} else {
return num * f(num-1);
}
});
**2，閉包**
1，閉包定義：有權(quán)訪問另一個(gè)函數(shù)作用域中的**變量**的函數(shù)。
也就是說：函數(shù)用到外部的變量，不要傳參就可以獲取。
2，創(chuàng)建閉包：在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)。
3，閉包中的外部函數(shù)執(zhí)行完畢，其執(zhí)行環(huán)境的作用域鏈會(huì)被銷毀，但是其活動(dòng)參數(shù),變量也不會(huì)被銷毀，因?yàn)槟涿瘮?shù)的作用域鏈仍引用著這個(gè)活動(dòng)對象，直到匿名函數(shù)被銷毀后，外部函數(shù)的活動(dòng)對象才會(huì)被銷毀。
4，依據(jù)3，故由于閉包會(huì)攜帶包含它的函數(shù)的作用域，因此會(huì)比其他類型的函數(shù)占更多的內(nèi)存，再三靠考慮后再用。
5，閉包最大的用處：1，可以讀取函數(shù)內(nèi)部的變量。2，可以讓這些變量保存在內(nèi)存中，不會(huì)在外部函數(shù)調(diào)用結(jié)束后銷毀。
6，閉包應(yīng)用的2種情況如下：
1，第一，函數(shù)作為返回值
如上代碼，bar函數(shù)作為返回值，賦值給f1變量。執(zhí)行f1(15)時(shí)，用到了fn作用域下的max變量的值。至于如何跨作用域取值，可以參考上一節(jié)。
第二，函數(shù)作為參數(shù)被傳遞
>```
//閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。//f2（）就是一個(gè)閉包。
function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
在jq中閉包的用法
//這里的$只是形參，但是jq是全局變量，所以不需要調(diào)用該函數(shù)就會(huì)自動(dòng)執(zhí)行，或者分2步，就是轉(zhuǎn)化成正常的函數(shù)，先寫函數(shù)，后調(diào)用。
(function($){
$("div p").click();
})(jQuery);
**3，this對象**
this的對象的運(yùn)行時(shí)基于函數(shù)執(zhí)行環(huán)境綁定的：
1，全局函數(shù)中調(diào)用，this指向windows。
2，被構(gòu)造函數(shù)調(diào)用時(shí)，指向是調(diào)用對象，即new出來的對象。
3，call或者apply調(diào)用 this指向call apply傳遞的上下文。
在閉包中this的使用問題
> ```
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()()); //"The Window"（在非嚴(yán)格模式下）
//匿名函執(zhí)行具有全局性，所以。。。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()()); //"My Object"
//如果想要訪問某個(gè)作用域中的arguments對象，必須將該對象的引用保存到另一個(gè)閉包能夠訪問的變量中。
**4，內(nèi)存泄露**
**5，模仿塊級作用域**
>```
(function(){
//這里是塊級作用域
})();//這里的小括號，意思是直接調(diào)用的意思。且只有函數(shù)表達(dá)式可以跟小括號，函數(shù)聲明不可以后面跟這個(gè)。
//一般在for循環(huán)的外部，也可以訪問到i。如果給這個(gè)for循環(huán)外部加個(gè)私有作用域的匿名函數(shù)。
//即在匿名函數(shù)中定義的任何變量，都會(huì)在執(zhí)行結(jié)束時(shí)被銷毀。
//而且這個(gè)還可以訪問到count，因?yàn)樗且粋€(gè)閉包。
function outputNumbers(count){
(function () {//這種做法還可以減少閉包占用內(nèi)存的問題，因?yàn)闆]有指向匿名函數(shù)的引用，執(zhí)行完畢后就可以銷毀了。
for (var i=0; i < count; i++){
alert(i);
}
})();
alert(i); //導(dǎo)致一個(gè)錯(cuò)誤！
}
**6，私有變量**207 226
##13，事件
**1，事件流**
“DOM2級事件流”規(guī)定事件流包括三個(gè)階段:事件捕獲階段，處于目標(biāo)階段，和事件冒泡階段，其中冒泡階段和捕獲階段是相反的流。
由于瀏覽器的兼容性，一般建議用事件冒泡，特殊情況下在使用事件捕獲。
**2，動(dòng)態(tài)移除onclick事件**
jq中使用操作元素屬性的方法：$("#a").removeAttr("onclick"); 添加為：$("#a").attr("onclick","test()")
js中：a.onclick=null;或者a.onclick=function(){//空方法};
**3，事件處理程序添加或者刪除**
> ```var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);//true是代表捕獲階段的事件。
//還可以給btn添加其他事件處理程序也可以添加2個(gè)click同樣的事件，按照先后的執(zhí)行順序。
btn.removeEventListener("click", handler, false); //有效！remove不了匿名函數(shù)
------------------------------在IE下添加事件處理程序------------------------
btn.attachEvent("onclick",handler);//添加事件處理程序
btn.detachEvent("onclick",handler)//刪除事件處理程序
需要注意的一點(diǎn)是：
1，IE事件處理程序 是“onclick”，非IE處理程序是“click”，且參數(shù)一個(gè)是2個(gè)，另一個(gè)是3個(gè)。
2，作用域不一樣 IE處理程序的作用域會(huì)在全局作用域中運(yùn)行this===windows，非IE是當(dāng)前作用域中運(yùn)行。
3，IE,為一個(gè)按鈕添加不同的事件處理程序，其執(zhí)行的順序是按照其相反的添加順序執(zhí)行的。
4，IE9以及以上兼容addEventListent，全I(xiàn)E包括9以下都兼容attachEvent
5，支持IE事件處理程序的只有ie瀏覽器和opera
4，跨瀏覽器事件處理程序
瀏覽器事件兼容性代碼如下:
window.onload = function() {
var EventUtil = {
addHandler: function(element, type, handler){
//若瀏覽器支持addEventListener，則使用addEventListener來添加事件
if(element.addEventListener){
element.addEventListener(type, handler, false);
} else if(element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
//若以上兩種添加事件的方法都不支持，則使用默認(rèn)的行為來添加事件
element["on" + type] = handler;
}
},
//移除事件
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if(element.detachEvent){
element.detachEvent("on" + type, handler);
} else{
element["on" + type] = null;
}
}
}
var btn1 = document.getElementById("myBtn1");
var handler = function(){
alert("hello handler");
}
EventUtil.addHandler(btn1, "click", handler);//調(diào)用，傳參，使用
}
**5，事件對象**
event對象代表事件的狀態(tài)。
所有的事件都會(huì)有下表列出的成員
為一個(gè)元素添加多個(gè)事件時(shí)，可以使用type屬性，如下：
> ```var btn = document.getElementById("myBtn");
var handler = function(event){
switch(event.type){
case "click":
alert("Clicked");
break;
case "mouseover":
event.target.style.backgroundColor = "red";
break;
case "mouseout":
event.target.style.backgroundColor = "";
break;
}
};
btn.onclick = handler;
btn.onmouseover = handler;
btn. onmouseout = handler;
**
6，IE下的事件對象
7，跨瀏覽器（兼容性）的事件對象
var EventUtil = {
addHandler: function(element, type, handler){
//省略的代碼
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler){
//省略的代碼
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
--------------------一下是代碼調(diào)用兼容IE的事件對象Event-----------------------------
//注意IE不支持事件捕獲
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert("Clicked");
event = EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
};
document.body.onclick = function(event){
alert("Body clicked");
};
**8，事件類型**
``` 1，焦點(diǎn)事件。2，鼠標(biāo)事件。3，滾輪事件。4，文本事件。5，鍵盤事件。6，合成事件。7，變動(dòng)。 ```
**8.1，UI事件**
**8.2，焦點(diǎn)事件**
1，blur :元素失去焦點(diǎn)時(shí)觸發(fā)，此事件不會(huì)冒泡，所有瀏覽器都支持。
2，focus：在元素獲得焦點(diǎn)時(shí)觸發(fā)，次事件不會(huì)冒泡。
3，其他一些 失去獲得焦點(diǎn)的事件，瀏覽器支持步統(tǒng)一。
**8.3，鼠標(biāo)與滾輪事件**
9個(gè)鼠標(biāo)事件：click（單擊）dblclick（雙擊）mousedown（按下任意鼠標(biāo)）mouseup（釋放鼠標(biāo)時(shí)觸發(fā) ）mouseenter（移動(dòng)到）mouseleave（移出）mousemove（內(nèi)部重復(fù)移動(dòng)觸發(fā)，謹(jǐn)慎使用）
【mouseout（）mouseover（移動(dòng)到）//可能子元素經(jīng)過也會(huì)觸發(fā)，冒泡】
**8.4，客戶區(qū)坐標(biāo)位置**
鼠標(biāo)位置坐標(biāo)信息：
screenX( ) screenY( ) //鼠標(biāo)相對于整個(gè)電腦屏幕的坐標(biāo) 和滾動(dòng)條無關(guān)。
clientX（左到鼠標(biāo)）clienY(上到鼠標(biāo))// 鼠標(biāo)相對于瀏覽器內(nèi)容顯示的視窗 和滾動(dòng)條無關(guān)
pageX() pageY() //鼠標(biāo)相當(dāng)于瀏覽器內(nèi)容顯示的視窗，但是會(huì)加上滾動(dòng)的區(qū)域。
**8.5，鼠標(biāo)滾輪事件**
mousewheel
scroll
**8.6，觸摸設(shè)備**
**8.7，移除事件**
**8.8，插入節(jié)點(diǎn)事件**
**9，鍵盤與文本事件**
keydown：當(dāng)用戶按下鍵盤上的任意鍵時(shí)觸發(fā)，而且如果按住不放的話，會(huì)重復(fù)觸發(fā)此事件
keypress：當(dāng)用戶按下鍵盤上的字符鍵時(shí)觸發(fā)，而且如果按住不放的話，會(huì)重復(fù)觸發(fā)此事件。
keyup：當(dāng)用戶釋放鍵盤上的鍵時(shí)觸發(fā)
**9.1，鍵碼**
**10，HTML5事件**
1，contextmenu事件
-------------------以上是N多事件------------------------------》
####為每個(gè)按鈕添加事件處理程序，性能會(huì)不好，因?yàn)槊總€(gè)函數(shù)都是一個(gè)對象，對象是占內(nèi)存的，所以對象越多，性能越差，解決“事件處理程序過多”的問題可以用到事件委托如下
>```
//JS中事件委托代碼：利用冒泡事件，給所在的父元素添加一個(gè)事件。
var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event); //目標(biāo)事件target
switch(target.id){
case "doSomething":
document.title = "I changed the document's title";
break;
case "goSomewhere":
location.;
break;
case "sayHi":
alert("hi");
break;
}
});
建議在瀏覽器卸載頁面之前移除頁面中的所有事件處理程序。onunload，特別是在ie瀏覽器下，建議這么做。
428
第十章，DOM節(jié)點(diǎn) 265-
DOM的屬性和方法整理：
1,創(chuàng)建節(jié)點(diǎn)createElement
var createNode = document.createElement("div");
var createTextNode = document.createTextNode("hello world");
createNode.appendChild(createTextNode);
document.body.appendChild(createNode);
2,刪除和替換節(jié)點(diǎn)remove/replaceChild
//刪除節(jié)點(diǎn)
document.body.removeChild(createNode);//需要?jiǎng)h除的新節(jié)點(diǎn)一定要是子節(jié)點(diǎn)
-------------------------------------------------------------
//替換節(jié)點(diǎn)
document.body.replaceChild(createNode,div1);//div1是被替換的節(jié)點(diǎn)。createNode是新節(jié)點(diǎn)
3，插入節(jié)點(diǎn)appendChild，insertBefore，insertBefore
//可以使用appendChild，insertBefore，insertBefore接收兩個(gè)參數(shù)，
//第一個(gè)是插入的節(jié)點(diǎn)，第二個(gè)是參照節(jié)點(diǎn)，如insertBefore(a,b)，則a會(huì)插入在b的前面
var createNode = document.createElement("div");
var createTextNode = document.createTextNode("hello world");
createNode.appendChild(createTextNode);
var div1 = document.getElementById("div1");
document.body.insertBefore(createNode,div1);
// document.body一定要是父節(jié)點(diǎn)，且是在指定的子節(jié)點(diǎn)div1前面插入新的子節(jié)點(diǎn)createNode。
4，節(jié)點(diǎn)的屬性，父節(jié)點(diǎn)，子節(jié)點(diǎn)，兄弟節(jié)點(diǎn)last/firstChild/nextElementtSibling
//lastElementChild;//nextElementtSibling (下一同級節(jié)點(diǎn)))
//previousElementSibling 上一同級節(jié)點(diǎn)
if(ul.lastElementChild){
console.log("111E"+ul.lastElementChild.innerHTML);
}else {
console.log("11"+ul.lastChild.innerHTML);
}
---------------------------------------------------------
//父節(jié)點(diǎn)
console.log(li.parentNode.innerHTML）
//子節(jié)點(diǎn)
children是指元素的第一層子節(jié)點(diǎn)。chiledren是Element的屬性，
childNotes 也是指元素的第一層子節(jié)點(diǎn)，但是在高級瀏覽器中它還包括很多其它的類型，比如說文本節(jié)點(diǎn)等，childNotes是node的屬性
5，克隆節(jié)點(diǎn)（沒有兼容性問題）cloneNode(true)
var ul = document.getElementById("ul");
var a= ul.cloneNode(true);//設(shè)為false，則是輕度克隆，不會(huì)復(fù)制子節(jié)點(diǎn)。
document.getElementById("div").appendChild(a);
-------------------------
$("p").clone();//jq中clone的使用
6， innerHTML和outerHTML
<div id="test">
<span style="color:red">test1</span> test2
</div>
test的innerHTML值是<span>....</span>
test的outerHTML值是<div></div>
//注意：因?yàn)橛胕nnerHTML時(shí)會(huì)創(chuàng)建一個(gè)HTML解析器，效率要高很多，但是一定要避免循環(huán)操作innerHTML
7，insertAdjacentHTML在文本容器前后插入代碼（沒有兼容性問題）
document.getElementById("a").insertAdjacentHTML("afterBegin","<h1> 在文本前容器內(nèi)插入內(nèi)容1</h1>");
document.getElementById("a").insertAdjacentHTML("beforeEnd","<h1> 在文本后容器內(nèi)插入內(nèi)容2</h1>");
document.getElementById("a").insertAdjacentHTML("beforeBegin","<h1> 在文本前容器外插入內(nèi)容4</h1>");
document.getElementById("a").insertAdjacentHTML("afterEnd","<h1> 在文本后容器外插入內(nèi)容5</h1>");
8，JS選擇器querySelector/querySelectorAll
1，getElementById
2，getElementsByName
3，getElementsByTagName
4，getElementsByClassName //IE8以及以下瀏覽器不兼容
5，document.querySelector('#foo > div.bar')//返回第一個(gè)匹配元素
6，document.querySelectorAll('.bar')//所有匹配元素的集合
----------**注意事項(xiàng)**：---------------
1，querySelector（）不是實(shí)時(shí)的，所以動(dòng)態(tài)添加一個(gè)元素的時(shí)候，元素集合不會(huì)更新。
IE8以及以上瀏覽器支持，IE8以下 不支持
2，想要獲得集合中每個(gè)元素，需要遍歷解決,如下：
// Using Array.from()
Array.from(myElements).forEach(doSomethingWithEachElement)
// Or prior to ES6
Array.prototype.forEach.call(myElements, doSomethingWithEachElement
// Shorthand:
[].forEach.call(myElements, doSomethingWithEachElement)
3，因?yàn)镋lement接口繼承自Node接口，它也有以下的屬性：
myElement.children，myElement.firstElementChild，myElement.lastElementChild，myElement.previousElementSibling，myElement.nextElementSibling
或者
myElement.childNodes，myElement.firstChild，myElement.lastChild，myElement.previousSibling，myElement.nextSibling，myElement.parentNode，myElement.parentElement
9，修改classname,.classList.add()/.remove/.toggle（）
//IE10 以及以上瀏覽器才支持
document.querySelector("div>span").classList.add(“boo”)//添加class
document.querySelector("div>span").classList.remove(“boo”)//刪除class
document.querySelector("div>span").classList.toggle(“xx”)//再添加一個(gè)class
document.querySelector("div>span").classList.contains('myclass');//檢查是否包含myclass類
10，設(shè)置和獲取和刪除屬性值getAttribute
//IE7以及以下瀏覽器不
var div=document.getElementById("a");
if(div.getAttribute("class")){
console.log(div.getAttribute("class"));//在IE8以及以上瀏覽器獲取class的值
}else {
console.log(div.getAttribute("className"));//在IE7以及以上瀏覽器獲取class的值
}
//div.setAttribute("value"，“xxx”)；//設(shè)置元素的value，也可以設(shè)置class和id以及其他屬性值。
注意class和className在IE下的區(qū)別
//div.removeAttribute("value")；//刪除這個(gè)屬性
//div.hasAttribute("onclick")；//查看元素是否有onclick屬性，返回true和false，
// div.hasAttributes()//查看元素是否有任何屬性，有一個(gè)則返回true，否則false
//檢查元素div是否有子元素
document.getElementById("div").hasChildNodes();
11,各種寬高
**width：**
1,標(biāo)準(zhǔn)盒子模型：width=元素的內(nèi)容
2,怪異盒子模型：width=元素的內(nèi)容+內(nèi)邊距pading+邊框border
**clientWidth：可視區(qū)域的寬度**
1，標(biāo)準(zhǔn)：clientWidth 可視區(qū)域的寬度，出去滾動(dòng)條17px
**offsetHeight：**與Height的區(qū)別是增加了border的高度,
http://blog.csdn.net/piziliweiguang/article/details/7762770
網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;//即border
網(wǎng)頁可見區(qū)域高： document.body.clientHeight;
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括borfer的寬);
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的寬);
網(wǎng)頁正文全文寬： document.body.scrollWidth;
網(wǎng)頁正文全文高： document.body.scrollHeight;
網(wǎng)頁被卷去的高： document.body.scrollTop;
網(wǎng)頁被卷去的左： document.body.scrollLeft;
網(wǎng)頁正文部分上： window.screenTop;
網(wǎng)頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區(qū)高度： window.screen.availHeight;
屏幕可用工作區(qū)寬度：window.screen.availWidth;
12，自定義屬性：掛鉤data-
<div id="a" data-appId="12345"> 測試 </div>//設(shè)置data-appId
取值：
var div = document.getElementById("myDiv");
div.getAttribute("data-appId");
-------------------------------------------------
div.setAttribute("data-appId","123454");//設(shè)置data-appId
?。篸iv.getAttribute("data-appId");
------------------------------------
div.dataset.appId = 23456;//設(shè)置data-appId
取值“” console.log( div.dataset.appId);
**13，scrollIntoView 滾動(dòng)頁面
1,document.getElementById('showscroll').scrollIntoView();//true,false ;true元素頂端對其瀏覽器頂端
2,相當(dāng)于錨點(diǎn)，寫法<a href="divId.scrollIntoView(false)">//divId是某個(gè)元素id名稱
14，表單腳本430-462 32
1，阻止表單提交
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){//以便跨瀏覽器執(zhí)行
//取得事件對象
event = EventUtil.getEvent(event);
//阻止默認(rèn)事件
EventUtil.preventDefault(event);
//提交表單
form.submit();3
});
2，阻止重復(fù)提交表單
<form action="${pageContext.request.contextPath}/servlet/DoFormServlet" onsubmit="return dosubmit()" method="post">
<script type="text/javascript">
var isCommitted = false;//表單是否已經(jīng)提交標(biāo)識(shí)，默認(rèn)為false
function dosubmit(){
if(isCommitted==false){
isCommitted = true;//提交表單后，將表單是否已經(jīng)提交標(biāo)識(shí)設(shè)置為true
return true;//返回true讓表單正常提交
}else{
return false;//返回false那么表單將不提交
}
}
</script>
------------------------------
//避免多次提交表單
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按鈕
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});
3，重置表單
form.reset();//表單值全部重置原始，可能會(huì)清空
<select>...</select> "select-one"http://單選特性
<select multiple>...</select>//多選特性
focus：獲得焦點(diǎn)事件
brur：失去焦點(diǎn)事件
<input type="number" min="0" max="100" step="5" name="count">//數(shù)字可以按5遞加.stepDown(10);10遞減
<input type="text" size="25" maxlength="50" value autofocus >//autofocus是不用js即可獲取焦點(diǎn)的方法，另外顯示25個(gè)字符輸入不能超過50個(gè)
<textarea rows="2" cols="20">initial value</textarea>//2行，每行20個(gè)字符
change：失去焦點(diǎn)且元素value值改變時(shí)觸發(fā)，<select>則是在選項(xiàng)發(fā)生改變時(shí)觸發(fā)
document.getElementById("txt1").select() ; //選中值
textbox.value = "Hello world!"
//選擇所有文本 IE9以及以上
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//選擇前3 個(gè)字符
textbox.setSelectionRange(0, 3); //"Hel"
//選擇第4 到第6 個(gè)字符
textbox.setSelectionRange(4, 7); //"o w"
-----------------------------------
textbox.value = "Hello world!"
//選擇所有文本
selectText(textbox, 0, textbox.value.length); //"Hello world!"
//選擇前3 個(gè)字符
selectText(textbox, 0, 3); //"Hel"
//選擇第4 到第6 個(gè)字符
selectText(textbox, 4, 7); //"o w"
tabForward()//實(shí)現(xiàn)自動(dòng)切換焦點(diǎn)
十五：canvas
<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>
var c=document.getElementById("myCanvas");
//確定瀏覽器支持<canvas>元素
if (drawing.getContext){
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
}
//-------------后續(xù)補(bǔ)充----------
第二十章，JSON
1，json和js對象字面量的區(qū)別：json：1，屬性值key必須加雙引號。2，沒有變量，3，沒有分號
2，json分類：1，簡單值，2，對象，3，數(shù)組
3，JSON 對象有兩個(gè)方法：stringify()和parse()。
JSON.stringify(book);//把js對象序列化成json字符串
JSON.parse(jsonText);//把json字符串轉(zhuǎn)化為js類型格式
var book = {
title: "Professional JavaScript",
authors: [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011
};
1：var jsonText = JSON.stringify(book);//把js對象序列化成json字符串
//{"title":"Professional JavaScript","authors":["Nicholas C. Zakas"],"edition":3,
"year":2011}
2：var jsonText = JSON.stringify(book, ["title", "edition"]);//只返回這2個(gè)屬性
//{"title":"Professional JavaScript","edition":3}
3：var jsonText = JSON.stringify(book, function(key, value){。。。}）//還可以是個(gè)函數(shù)，就有些復(fù)雜
4：var bookCopy = JSON.parse(jsonText);//把json字符串轉(zhuǎn)化為js類型格式
**4，**toJSON() 方法可以將 Date 對象轉(zhuǎn)換為字符串，并格式化為 JSON 數(shù)據(jù)格式
第二十一章Ajax和comet
var xmlhttp=new XMLHttpRequest();
1，xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);//true代表異步
2，xmlhttp.send();//啟動(dòng)派發(fā)請求的操作
3，responseText：作為響應(yīng)主體被返回的文本。
4，responseXML：如果響應(yīng)的內(nèi)容類型是"text/xml"或"application/xml"，這個(gè)屬性中將保
存包含著響應(yīng)數(shù)據(jù)的XML DOM 文檔。
5,status：響應(yīng)的HTTP 狀態(tài)//200成功，304說明請求資源沒有修改，可以使用緩存數(shù)據(jù)
6,statusText：HTTP 狀態(tài)的說明。
7，readyState 屬性
0：未初始化。尚未調(diào)用open()方法。
? 1：啟動(dòng)。已經(jīng)調(diào)用open()方法，但尚未調(diào)用send()方法。
? 2：發(fā)送。已經(jīng)調(diào)用send()方法，但尚未接收到響應(yīng)。
? 3：接收。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)。//可以在3里面做loading
? 4：完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了。
8，get和post的區(qū)別：
get：參數(shù)放在URL后面？。如果數(shù)據(jù)是英文字母/數(shù)字，原樣發(fā)送，如果是空格，轉(zhuǎn)換為+，如果是中文/其他字符，則直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX為該符號以16進(jìn)制表示的ASCII。
GET 請求可被緩存
GET 請求保留在瀏覽器歷史記錄中
GET 請求可被收藏為書簽
GET 請求不應(yīng)在處理敏感數(shù)據(jù)時(shí)使用
GET 請求有長度限制
GET 請求只應(yīng)當(dāng)用于取回?cái)?shù)據(jù)
post：多了xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");和xhr.send(serialize(form));//參數(shù)放在這里面
POST 請求不會(huì)被緩存
POST 請求不會(huì)保留在瀏覽器歷史記錄中
POST 不能被收藏為書簽
POST 請求對數(shù)據(jù)長度沒有要求
POST 發(fā)送敏感數(shù)據(jù)時(shí)post更安全
9.new FormData()表單數(shù)據(jù)系列話，好處在于不必明確地在XHR 對象上設(shè)置請求頭
10，timeout和回調(diào)函數(shù)
11，overrideMimeType(）
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200 //這個(gè)寫在前面可以避免瀏覽器兼容性
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
第八章
1，location對象
//假設(shè)初始URL 為http://www.wrox.com/WileyCDA/
//將URL 修改為"http://www.wrox.com/WileyCDA/#section1"
location.hash = "#section1";//單頁面設(shè)計(jì)主要思想
//將URL 修改為"http://www.wrox.com/WileyCDA/?q=javascript"
location.search = "?q=javascript";
//將URL 修改為"http://www.yahoo.com/WileyCDA/"
location.hostname = "www.yahoo.com";
//將URL 修改為"http://www.yahoo.com/mydir/"
location.pathname = "mydir";
//將URL 修改為"http://www.yahoo.com:8080/WileyCDA/"
2，history 對象
//后退一頁
history.go(-1);
//前進(jìn)一頁
history.go(1);
//前進(jìn)兩頁
history.go(2);
//跳轉(zhuǎn)到最近的wrox.com 頁面
history.go("wrox.com");
//跳轉(zhuǎn)到最近的nczonline.net 頁面
history.go("nczonline.net");
跨域
1，定義：只要協(xié)議，域名，端口有任何一個(gè)不同的地方就叫跨域
2，我需要跨域的域名，測試啊 測試
http://m.blog.csdn.net/article/details?id=51285688
http://www.lxweimin.com/p/26925900a389
3，同源策越，即使同域名，同協(xié)議，同端口。如果任意一個(gè)不同，需要進(jìn)行跨域訪問。
4，src進(jìn)行跨域的時(shí)候，只能有g(shù)et請求，get請求進(jìn)行跨域的時(shí)候，主要是jsonp跨域
瀏覽器限制對其返回的內(nèi)容無法進(jìn)行讀寫。
5，用src進(jìn)行跨域的時(shí)候又叫做jsonp跨域，主要在頁面生成script標(biāo)簽 只能有g(shù)et請求
通常 jsonp請求是src跨域，有回調(diào)函數(shù)，跨域不同的網(wǎng)站，
3.分類：
（1）主機(jī)不同
（2）主域相同子域不同a.c.com和b.c.com
（3）主域不同www.a.com和www.b.com
端口不同www.a.com:8080和www.a.com:8088
協(xié)議不同http://www.a.com和https://www.a.com
http://mail.163.com/index.html
http://協(xié)議
mial 服務(wù)器名
163.com 域名
mail.163.com網(wǎng)站名 由服務(wù)器和域名組成
8080:端口號
index.html：默認(rèn)根目錄
子域名和二級域名
例如www.dns0755.net是dns0755.net的子域名，而dns0755.net又是net的子域名。國際頂級域名的子域名叫做二級域名。例如www.dns0755.net和ftp.dns0755.net都是dns0755.net的二級域名。
端口和協(xié)議不同而造成的跨域問題只能通過后臺(tái)代理解決。
回調(diào)函數(shù)
1，定義：回調(diào)函數(shù)作為變量傳遞給另外一個(gè)函數(shù)的（作為參數(shù)傳遞）函數(shù)，在他主體執(zhí)行完畢后
回調(diào)函數(shù)代碼如下：
function a(callbackFunction){//函數(shù)b作為參數(shù)傳遞給函數(shù)a
alert("這是parent函數(shù)a");
var m =1;
var n=3;
return callbackFunction(m,n);//同時(shí)此回調(diào)函數(shù)也是一個(gè)閉包
}
function b(m,n){
alert("這是回調(diào)函數(shù)B");
return m+n;
}
$(function(){
var result = a(b);//執(zhí)行a(b)
alert("result = "+ result);
});
執(zhí)行順序?yàn)椋?這是parent函數(shù)a
這是回調(diào)函數(shù)B
result = 4
----------------------------------
$("#btn_1").click(function() {//jq最簡單的回調(diào)函數(shù)例子
alert("Btn 1 Clicked");
});
-----------------------
var friends = ["Mike", "Stacy", "Andy", "Rick"];//js的回調(diào)函數(shù)案例
friends.forEach(function (eachName, index){
console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});
======================================
this的指向問題
1，在普通函數(shù)中，this指向它的直接調(diào)用者。如果找不到，則是指向windows對象
2，
