資料型別

js有六種資料型別，包括五種基本資料型別和一種複雜資料型別

>>基本資料型別：Number、String、Boolean、Undefined、Null

1. Number型別 包含整數和浮點數（浮點數數值必須包含一個小數點並且小數點後面最少跟一個數字）兩種值

    NaN：非數字型別。特點：涉及到任何關於NaN的操作，都會返回到NaN；NaN不等於自身
   

2. String型別
   字串有length屬性

    字串轉換：轉型函式String()，適用於任何資料型別（null和undefined轉換後為null和undefined）
    toString()方法（null和undefined沒有toString()方法）
    
   

3. Boolean型別 只有兩個值，true和false

4. Undefined型別 只有一個值，undefined。使用var 聲明瞭變數，但是未給var初始化，那麼這個變數的值就是undefined

5. null型別 null型別被看做空物件指標

6. object型別 js中物件是一組屬性與方法的集合。

    這裡要說到引用型別，引用型別是一種資料結構，用於將資料和功能組織在一起。
    引用型別有時候也被稱為物件定義，因為他們描述的是一類物件所具有的屬性和方法。
   

三大引用型別

1. Object類

我們看到的大多數型別值都是Object型別的例項，建立Object例項的方式有兩種。

第一種是使用new操作符後跟Object建構函式，如下所示

var person = new Object();

person.name = “Micheal”;

person.age = 24;

第二種方式是使用物件字面量表示法，如下所示

var person = {

name : “Micheal”,

age : 24

};

2.Array類

陣列的每一項可以用來儲存任何型別的資料，也就是說，可以用陣列的第一個位置來儲存字串，第二個位置儲存數值，第三個位置儲存物件…另外，陣列的大小是可以動態調整的。

建立陣列的基本方式有兩種

第一種是使用Array建構函式，如下所示

var colors = new Array(“red”,“blue”,“yellow”);

第二種是使用陣列字面量表示法，如下所示

var colors = [“red”,“blue”,“yellow”];

3.function型別

每個函式都是Function型別的例項，而且都與其他引用型別一樣具有屬性和方法。函式通常是使用函式宣告語法定義的，如下所示

function sum(num1,num2){

return num1 + num2;

};

這和使用函式表示式定義函式的方式相差無幾。

var sun = function (){

return sum1 + sum2;

};

也就是說，js按照儲存方式分為值型別和引用型別，區別如下：

    題目1： var a = 100;
    　　　　var b = a;
    　　    a = 200;
    　　　　console.log (b);
    
    題目2： var a = {age : 20};
    　　　　var b = a;
    　　　　b.age = 21;
    　　　　console.log (a.age);
    
    題目1的答案是 100，題目2的答案是21，
    
    題目1是簡單的值型別，在從一個變數向另一個變數賦值基本型別時，會在該變數上建立一個新值，然後再把該值複製到為新變數分配的位置上。
    
    此時，a中儲存的值為 100 ，當使用 a 來初始化 b 時，b 中儲存的值也為100，但b中的100與a中的是完全獨立的，該值只是a中的值的一個副本，此後，
    這兩個變數可以參加任何操作而相互不受影響。也就是說基本型別在賦值操作後，兩個變數是相互不受影響的。
    
    題目2是引用型別，當從一個變數向另一個變數賦值引用型別的值時，同樣也會將儲存在變數中的物件的值複製一份放到為新變數分配的空間中。
    
    這時儲存在變數中的是物件在堆記憶體中的地址，所以，與簡單賦值不同，這個值的副本實際上是一個指標，而這個指標指向儲存在堆記憶體的一個物件。那麼賦值操作後，
    兩個變數都儲存了同一個物件地址，則這兩個變數指向了同一個物件。因此，改變其中任何一個變數，都會相互影響。
    
    因此，引用型別的賦值其實是物件儲存在棧區地址指標的賦值，因此兩個變數指向同一個物件，任何的操作都會相互影響。

陣列

排他思想

利用for迴圈幹掉所有，然後再設定自己的

DOM節點操作

訪問關係

1. 父節點

parentNode

2. 兄弟節點

nextSibling 下一個兄弟節點 IE6、7、8適用

nextElementSibling 其他瀏覽器適用

previousSibling previousElementSibling

必須先寫正常瀏覽器，再寫IE6、7、8

3. 子節點

firstChild IE6、7、8

firstElementChild 正常瀏覽器

lastChild lastElementChild

4. 孩子節點

childNodes 選出全部的孩子

它是標準屬性，返回指定元素的子元素合集，包括HTML節點，所有屬性、文字節點

            nodeType  來判斷   
   nodeType == 1    元素節點     
   nodeType == 2    屬性節點
   nodeType == 3    文字節點

children 選取所有的孩子（只有元素節點）

IE6、7、8會包括註釋節點

DOM節點操作

1. 建立節點

    var newLi = document.creatElement("li");
   

2. 插入節點

    appendChild();    新增孩子，放到盒子最後面
    insertBefore(插入的節點,參照節點)  子節點，新增孩子
    寫滿兩個引數  
    demo.insertBefore(test,childrens[0]);
    放到了第一個孩子的前面  
    如果第二個引數  為 null  則 預設這新生成的盒子放到最後面。
    demo.insertBefore(test,null);
   

3. 移除節點

    removeChild() 移除孩子節點      var da = document.getElementById("xiongda"); demo.removeChild(da);
   

4. 克隆節點

    cloneNode();
    複製節點    括號裡面可以跟引數，如果是true則是深層複製，除了複製本盒子，還複製子節點；如果是false則是淺複製，只複製本節點，不復制子節點。
   

節點屬性

1. 獲取節點屬性 getAttribute(“title”)
2. 設定節點屬性 setAttribute(“class”,“one”)
3. 刪除節點屬性 removeAttribute(“title”)；

內建物件

內建物件就是指這個語言自帶的一些物件，供開發者使用，這些物件提供了一些常用的或是最基本而必要的功能。

1. 日期函式 Date()

可以設定本地日期，年月日 時分秒

    常用方法:
獲取日期和時間
getDate()                  獲取日 1-31
getDay ()                  獲取星期 0-6      
getMonth ()                獲取月  0-11
getFullYear ()	           獲取完整年份（瀏覽器都支援）
getHours ()	               獲取小時 0-23
getMinutes ()	           獲取分鐘 0-59
getSeconds ()	           獲取秒  0-59
getMilliseconds ()         獲取當前的毫秒 
getTime ()	               返回累計毫秒數(從1970/1/1午夜)

示例：
var date = new Date()
date.getTime();

2. 定時器——setInterval(執行的函式,間隔時間ms)

每隔一段時間執行一次函式，特別像for迴圈，但他最大的特點在於自動，可以設定時間

    寫法
    setInterval(“fun()”,1000)     可以用 
    setInterval(function(){},1000)

關閉定時器 clearInterval(定時器名稱); 定時器不再進行

3. 定時器——setTimeout(執行的函式,時間)

在規定的時間之後，執行一次函式，類似於定時炸彈

深層次看待兩種定時器區別

setInterval是排隊執行的，假如 間隔時間是1秒， 而執行的程式的時間是2秒 上次還沒執行完的程式碼會排隊, 上一次執行完下一次的就立即執行, 這樣實際執行的間隔時間為2秒

假設setTimeout延遲時間為1秒執行，要執行的程式碼需要2秒來執行，那這段程式碼上一次與下一次的執行時間間隔為3秒

利用setTimeout來實現setInterval效果

在setTimeout執行的函式中遞迴呼叫setTimeout定時器

按鈕不可用

btn.disabled = “disabled” || btn.disabled = true;

注意：
因為 button是個雙標籤 所以要更改他的值， 使用 innerHTML 的，不是value。

this

this指向的是事件的呼叫者，或者函式的使用者。

例如

var btn.onclick = function(){this;} //this指向事件的呼叫者 btn
setInterval(sendTextMessage,1000) //開啟定時器
function(){
    count--;
    this.innerHTML = "還剩餘"+count+"秒";
}//this 指向函式的使用者 setInterval

arguments物件

arguments物件是函式自動建立的一種類陣列物件，用來接收函式所傳入的引數值。

由於js語法不支援函式的過載，所以需要用arguments物件來模擬函式過載效果。

函式過載：相同函式名，不同引數列表的多個函式，在呼叫時，可根據傳入的引數不同，自動選擇對應的函式執行。

作用：

arguments[i]    獲取下標對應的引數值
arguments.length    獲取所傳入函式的實參個數
arguments不是陣列型別，不可使用陣列API

function fn(a,b,c){
    console.log(a+b+c); 
    alert(arguments.length;)
}
fn(1,3,4,6); //arguments.length;  返回的是  實參的個數。
            //但fn執行的結果仍為前三個數的和   
            //但是這個物件有講究，他只在正在使用的函式內使用。 
            //arguments.callee;    
            //返回的是正在執行的函式。 也是在函式體內使用。
            //在使用函式遞迴呼叫時推薦使用arguments.callee代替函式名本身。 
function fn(){
console.log(arguments.callee);
}   
     //這個callee 就是 ：   function fn() {  console.log(arguments.callee); } 

&&和||

a&&b 結果是什麼？

若a為假，返回a，若a為真，返回b

var aa  =   0&&1;
alert(aa)    // 0 
var bb =  1&&0;
alert(bb);  //0  
var cc =  1&&10;
alert(cc);  // 10

a||b 結果是什麼？

若a為假，返回b，若a為真。返回a。

0||1 //1
1||0 //1
1||5 //1
5||1 //5

字串物件常用方法

轉換為字串

     1. + “”       2+ “”  =  “2”    2+”ab”   =  “2ab” 
2. String()    轉換為字串 
3. toString（基數）  ;    基數就是進位制  
   var txt = 10;
   txt.toString(2)       二進位制      1010

根據位置返回字元

    charAt(index)，返回指定位置的字元（引數：字元位置）  js中字元為長度為1的字串
charCodeAt(index)，返回指定位置字元的unicode編碼

根據字元返回位置

1. 返回前面起第一個字元的位置

    indexOf('字元');
//它是從前面開始數（左邊開始數），而且只找第一個，然後返回該字元的位置，索引號從0開始，返回數值

var text= "abcdef";
console.log(text.indexOf('d'));     //結果是3
//如果找不到，返回 -1

2. 返回後面起第一個字元的位置

    lastIndexOf('字元');

var text = "abcdefabcdef";
text.lastIndexOf("d");  //返回9
//返回的值還是從 左邊開始數的索引號

網址編碼

• 把網址傳入後臺，需要進行編碼

encodeURIComponent(URIstring) 可以把字串作為URI元件進行編碼

decodeURIComponent() 函式可把字串作為 URI 元件進行解碼

操作字串

a.concat(b)合併字串

eg:txt1.concat(txt2)

slice(‘取字串的開始位置’,’[取字串的結束位置]’)

兩個引數都是索引號，第二個引數位置可選，省略的話則一直取到最後一個。

注：取到第二個索引值之前的那一個。

起始位置可以是負數，如果是負數則是從右邊往左邊開始取。

substr(起始位置,[取的個數])

不寫取的個數，則按預設從起始位置一直取到最後
取的個數：是指從起始位置開始，往後面數取幾個
起始位置為負數的話IE6、7、8會報錯，儘量少用。

substr()與slice()區別：substr()始終會把小的值作為起始位置，大的值作為結束位置。例如 substr(6,3) 實際中會變成 substr(3,6)

保留小數位數(以保留 2位有效小數為例)

//通過indexOf()返回小數點的位置，然後利用substr擷取字串
1. console.log(str.substr(0,str.indexOf(".")+3));
//先乘以100，取整，然後除以100
2.console.log(parseInt(PI*100) /100);
//PI.toFuxed(2)保留兩位小數
console.log(PI.toFixed(2));

大小寫轉換

1. toUpperCase()    //轉換為大寫
2. toLowerCase()    //轉換為小寫
asdf.toUpperCase() 
$("txt").value.toUpperCase();

無縫滾動

原理：以四張圖片為例，首先複製兩張圖（第一張和第二張）放到最後面（本質上變成了第五、六張），ul是不斷向左移動的，如果ul的left值小於等於四張圖片的寬度的負值，就將ul的left值快速復原為0。

緩動動畫（一次過渡一張banner圖）

原理：等差數列。

將ul的left值設為以圖片寬度為公差的等差數列

js的位置和尺寸

offset 家族

1. offsetWidth/offsetHeight

得到物件的寬度和高度（自己的，與他人無關）

offsetWidth = width + border + padding

2. offsetLeft/offsetTop

返回與上級盒子（最近的且帶有定位的）左邊的距離，即對於已經定位的最近的父元素的左邊距離

如果父級都沒有定位則以body為準
子盒子到定位的父盒子邊框到邊框的距離

3. offsetParent

返回該物件的最近的帶有定位的父級，如果沒有定位則返回body

offset家族與style.left、style.top的區別

最大區別在於offsetLeft/offsetTop可以返回沒有定位的盒子距離左側/頂部的距離，而style.left、style.top不可以。

offset返回的是數字，而style.left、style.top返回的是帶有px的字串

offset只讀，而style.left、style.top可讀可寫。

如果沒有給html元素指定過top樣式，則style.top返回的是空字串

最重要的區別，style.top只能得到行內樣式，offsetLeft隨便

screenX、pageX、clientX的區別

screenX/Y 以我們的電腦螢幕為基準點測量

pageX/Y 以文件（絕對定位）的基準點對齊

clientX/Y 以瀏覽器的可視區域，類似於固定定位

拖動原理

滑鼠按下，移動滑鼠

bar.onmousedown = function(){
    document.onmousemove = function(){}
}

防止選擇拖動

按下滑鼠然後拖拽可以選擇文字，而要清楚選中內容的話

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

scroll家族——scrollTop、scrollLeft

scrollTop 被捲上去的部分的高度

獲取scrollTop的相容性寫法

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

scrollTo(x,y) 可以把內容滾動到指定的座標

window.scrollTo(x,y);

冒泡機制

事件冒泡：當一個元素上的事件被觸發的時候，比如說滑鼠點選了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。

順序 div -> body -> html -> document -> window

以下事件不冒泡：blur、focus、load、unload

阻止冒泡方法

標準瀏覽器：event.stopPropagation()

IE瀏覽器：event.cancelBubble = true

相容寫法

1   if(event && event.stopPropagation)
2          {
3              event.stopPropagation();  //  w3c 標準
4          }
5          else
6          {
7              event.cancelBubble = true;  // ie 678  ie瀏覽器
8   }

三個取整函式

Math.ceil() 向上取整
Math.floor() 向下取整
Math.round() 四捨五入取整

緩動動畫原理

勻速動畫的原理：盒子本身的位置+步長

緩動動畫的原理：盒子本身的位置+步長（不斷變化的）

封裝程式碼

1     function animate(obj,target){  //  第一個引數 動誰   第二個引數  動多少
2          clearInterval(obj.timer);
3          obj.timer = setInterval(function() {
4                // 計算步長   動畫的原理    盒子本身的位置  +  步長
5                var step = (target - obj.offsetLeft) / 10;  // 步長
6                step =  step > 0 ? Math.ceil(step) : Math.floor(step);  //  取整步長
7                // obj.style.left = 盒子本身的位置  +  步長
8                obj.style.left = obj.offsetLeft + step + "px";
9                if(obj.offsetLeft == target){
10                    clearInterval(obj.timer);
11                }
12          },30)
13      }

json遍歷

for(變數 in 物件) {執行語句;}

var json = {width:200,height:300,left:50}
console.log(json.width);
for(var k in json)
{
    console.log(k);   // k 遍歷的是json  可以得到的是  屬性
    console.log(json[k]);  // json[k]  得到 是屬性的  值
}

in運算子

二元運算子，但對運算子左右兩邊的運算元要求比較嚴格。要求左邊的運算元必須是字串型別或可以轉換為字串型別的其他型別，而右邊的運算元必須是陣列或者物件。只有第一個運算元的值是第二個運算元的屬性名，才會返回true，否則返回false。

// in 可以用用來判斷 json 裡面有沒有某個屬性
var json = {name: "andy",age : 15};
if("andy" in json)
{
    console.log("yes");  // 返回的是 yes 
}
else
{
    console.log("no");
}

new 關鍵字

常利用new關鍵字去宣告新的物件

其作用是建立一個物件例項。這個物件可以是使用者自定義的，也可以是帶建構函式的一些系統自帶的物件

new關鍵字可以讓this 指向新的物件

所謂“建構函式”，其實就是一個普通函式，但是內部使用了this變數。對建構函式使用new運算子，就能生成例項，並且this變數會繫結在例項物件上。

prototype 共同的、相同的

主要解決：函式因為使用非常非常多，重複執行效率太低

Person.prototype.showName = function() {  // 用的共同的父親
    alert("我的名字是"+ this.name);
}

<!--類.prototype.方法  = function() {}  具體格式 
可以把那些不變的屬性和方法，直接定義在prototype物件上
使用方法：
     類名.prototype.方法-->