JavaScript框架jQuery高級編程總結
理解基礎數值
在進行數值運算時需要註意：浮點數之間的運算結果會有偏差
js提供瞭兩個工具方法用於將浮點數轉換成固定位數的小數來格式化該值
num.toPrecision(n)：將nun轉換成總位數為n的數值
num.toFixed(n)：將num轉換成包含n個小數的數值
js提供瞭一個NaN表示“非數值”，然而使用typeof方法來判斷該值的類型，輸出結果為number，這是js的一個誤區，也是一個事實
對兩個變量進行等於比較的時候，js提供瞭兩種操作符，分別是等於==和全等於===，通常建議使用全等於，因為等於操作符會在比較前先自動進行類型轉換，通常，判斷變量是否為空使用等於，其餘的數值或者對象之間的比較使用全等於
js支持的數據類型主要有：Number/String/Boolean/Object/Function/Array/Date/RegExp/Null/Undefined
當一個變量定義之後沒有初始化或者訪問瞭一個不存在的對象屬性時，他們的值就是undefined；表達式：null == undefined返回true
變量
隱式聲明的變量都是全局變量，不管是在函數體內還是全局范圍內。顯示聲明的變量都是持久的，無法刪除該變量。對於一個變量，可以多次聲明而不會產生任何錯誤。
變量名必須以一個字母、下劃線或者美元符號開頭
對象
實例化一個js對象可以通過兩種方式：一是使用new關鍵字、二是使用對象字面量直接創建。分別如下：
//使用new關鍵字創建
var obj = new Object();
//使用對象字面量直接創建
var obj2 = {};
//也可以為對象直接定義屬性
var obj3 = {
name: "chengxi",
age: 20
};
對象的屬性可以通過點操作符和中括號進行訪問，不過建議使用點操作符進行訪問，因為對象的屬性值可能也是對象
想要刪除對象的某個屬性可以使用關鍵字delete，刪除一個不存在的屬性不會產生任何危險
js使用原型繼承，對象可以直接從其他對象中繼承並進行擴展，從而創建新的對象。在繼承樹中，每一個獨享都可以通過prototype屬性連接起來
獲取一個對象的屬性時，首先會去該對象中去尋找，當沒有找到該屬性時，會沿著原型鏈一直往上找，直到找到對應的屬性並返回或者返回undefined
在js中沒有提供public之類的訪問權限控制級別關鍵字，不過如果想要聲明一個私有的變量，可以通過在函數或者對象中定義局部變量並提供相應的訪問方法即可實現
function Obj(){
//私有變量
var name = "chengxi";
//提供getter方法
this.getName = function(){
return this.name;
};
};
函數（主要介紹匿名函數）
下面代碼簡單的創建瞭一個自執行匿名函數
(function(x,y){
console.log(x+y);
})(1,2);
自執行匿名函數的框架為：
(function(args){
//function body
})(args);
jQuery核心技術
工具函數
要檢查對象的類型，在原生js中使用的是typeof操作符，然而對於null值，該操作符返回的是object而不是null。在jQuery中很好的解決瞭這一個問題，使用type(val)方法可以獲取對應的數據類型
使用extend方法可以將多個對象的屬性合並成一個，函數格式：$.extend(src,obj1,obj2)將obj1、obj2等對象的屬性合並到src對象中來
對象的遍歷有兩個方法：第一個是each，它的格式為：$.each(data, function(index,value){…});第二個是map，他的格式為：$.map(data, function(value,index){…});
判斷一個節點是否是另一個節點的子節點可以使用方法constans，其命令格式為：$.contains(container,dom）用於判斷dom節點是否在container節點中
尋找指定選擇器下的指定元素結點可以使用find方法，其格式為：$("…選擇器").find("…子選擇器"）
選擇和操作dom元素
屬性選擇器：根據元素的屬性來選擇元素。主要有：
|
屬性選擇器 |
描述 |
| elem[attr] |
選擇定義瞭attr屬性的elem元素 |
| elem[attr=val] |
選擇attr屬性值為val的elem元素 |
| elem[attr^=val] |
選擇attr屬性值以val開頭的elem元素 |
| elem[attr |
=val] |
| elem[attr!=val] |
選擇attr屬性值不等於val的elem元素 |
| elem[attr$=val] |
選擇attr屬性值以val結尾的elem元素 |
| elem[attr~=val] |
選擇attr屬性值是一個以空格分割的列表值並含有val值的elem元素 |
| elem[attr*=val] |
選擇attr屬性值含有一個特定子串val的elem元素 |
位置選擇器：從選擇器選擇的多個元素中進行位置選擇元素。主要有：
|
類型 |
描述 |
| :animated |
選擇當前正在執行動畫的所有元素 |
| :eq(n) |
選擇索引值為n的元素 |
| :gt(n) |
選擇索引值大於n的元素 |
| :lt(n) |
選擇索引值小於n的元素 |
| :even |
選擇索引值為偶數的元素 |
| :odd |
選擇索引值為奇數的元素 |
| :first |
選擇第一個元素 |
| :last |
選擇最後一個元素 |
| :header |
選擇所有標題元素 |
| :not(選擇器) |
選擇所有與選擇器不匹配的元素 |
過濾表單元素：主要有：
|
過濾器 |
描述 |
| :button |
選擇所有button元素以及類型為button的元素 |
| :checkbox |
選擇所有類型為checkbox的元素 |
| :checked |
選擇所有被選中的復選框元素 |
| :disabled |
選擇所有不可用元素 |
| :enabled |
選擇所有可用的元素 |
| :file |
選擇所有類型為file的元素 |
| :image |
選擇所有類型為image的元素以及image元素 |
| :input |
選擇所有輸入框元素 |
| :password |
選擇所有類型為password的元素 |
| :radio |
選擇所有類型為radis的元素 |
| :reset |
選擇所有類型為reset的元素 |
| :selected |
選擇所有已選中的單選元素 |
| :submit |
選擇所有類型為submit的元素 |
| :text |
選擇所有類型為text的元素 |
可見性選擇器：主要有兩個：
|
類型 |
描述 |
| :hidden |
選擇所有隱藏元素 |
| :visible |
選擇所有可見元素 |
內容過濾器：根據指定的內容對元素進行過濾，主要有:
|
過濾器 |
描述 |
| :contains(text) |
選擇所有包含特定文本內容的元素 |
| :empty |
選擇所有空元素 |
| :has(text) |
同contains，可用於選擇包含於指定選擇器匹配的後代元素的元素 |
| :parent |
選擇所有包含子元素或者文本節點的元素 |
父子關系過濾器：主要有：
|
過濾器 |
描述 |
| :first-child |
選擇每個父元素的第一個子元素 |
| :last-child |
選擇每個父元素的最後一個子元素 |
| :nth-child(n) |
選擇每個父元素的指定位置的子元素 |
| :only-child |
選擇具有唯一一個子元素的父元素的子元素 |
在大多數情況下，我們使用選擇器獲取到的元素是一個數組對象，所以我們通常隻需要取得其中的一個元素，在這裡我們可以使用[n]的方式來獲取指定索引的dom元素，也可以通過get(n)方法來獲取。在這裡需要註意的是：使用這兩種方式獲取到的變量已經是dom結點元素瞭，無法在直接調用jquery方法瞭，需要使用$(dom)轉換成jquery變量後才能調用
事件處理
所有的js事件處理函數都可以接收一個event對象作為參數，雖然絕大多數瀏覽器都接收標準的event對象作為參數，然而IE使用的卻是window.event。所以，在進行事件處理時，最好進行event兼容：
var event = (window.event?window.event:event);
為事件綁定處理函數可以使用addEventListener方法，他的格式為：$(選擇器).addEventListener(eventType,function(event){…},bool)其中第一個參數表示事件的類型，第二個參數表示事件處理函數，第三個參數表示是否允許事件捕獲
其中事件捕獲過程指的是元素嵌套的情況下的由外向內進行事件觸發，而相對應的事件冒泡指的是元素嵌套的情況下的由內向玩進行的事件觸發。如果不想要事件捕獲或者事件冒泡，在那些遵循W3C標準的瀏覽器中可以調用stopPropagation()方法即可，而在較低版本的IE中，通過設置event的屬性cancelBubble=true即可阻止事件冒泡
第二種方式是使用bind方法進行綁定，其格式為：$(選擇器).bind(eventType, function(event){…})，另外可以使用方法unbind移除事件處理程序的綁定，unbind方法的格式為：$(…).unbind(eventType)
bind方法不支持動態生成的dom元素的事件綁定，如果想要對動態生成的dom元素進行事件綁定，可以使用live方法，它的格式和bind相同，同樣也提供瞭對應的die方法來移除事件處理程序的綁定
live方法不支持鏈式調用，如果想要支持js的鏈式調用（在進行事件綁定之後還想進行其他的一系列操作），可以使用delegate方法，它除瞭live的功能外還支持鏈式調用，返回一個對象，同樣它也提供瞭對應的移除方法：undelegate
也許我們可以隻希望一個事件隻執行或者說最多執行一次，可以使用one來綁定事件
想要使用js代碼來觸發一個事件可以使用方法trigger，他的格式為：$(選擇器).trigger(eventType)來為指定的元素觸發一個指定的事件
自jQuery1.7新版本開始，就事件處理這一方面引入瞭兩個新的方法on/off，其中on可以完全取代delegate方法來進行事件綁定和鏈式調用，而移除事件直接使用off方法即可，想要移除指定元素下的指定子元素的事件可以使用如下格式：$(父選擇器).off(eventType,子選擇器)
原生js操作Ajax
首先介紹一個h5新功能，data自定義屬性，在h5之前，我們自定義屬性就是簡單的定義鍵值對，這樣會造成標簽的屬性冗餘混亂，在h5提供瞭data之後，我們自定義屬性值格式為：data-key=val，這樣一來，自定義屬性和自帶屬性就很容易的區分開來。jQuery提供瞭操作自定義屬性的方法，通過data方法可以進行自定義屬性的設置和獲取，格式為：$(選擇器).data(key,val) / $(選擇器).data(key)
原生js創建Ajax需要考慮瀏覽器的兼容性，在IE瀏覽器中，需要使用下面的代碼創建：var xhr = new ActiveXObject("Microsoft.XMLHTTP");在較低的IE版本中需要使用下面的代碼創建：var xhr = new ActiveXObjce("MSXML2.XMLHTTP");而在其餘的瀏覽器中就可以使用下面的代碼來創建瞭：var xhr = new XMLHttpRequest();
原生js中通過xhr.open方法建立一個請求，該方法的格式為：open(method,url,isAsync);其中第三個方法指定是否異步
原生js通過xhr.send發送請求參數，該方法隻是這對post請求而言的，因為get請求直接將請求參數寫到url後面即可
判斷響應的結果可以通過onreadystatechange事件，通過獲取readyState和status來判斷請求是否成功，通常有：
|
readyState值列表 |
描述 |
| 0 |
xhr對象已經構造完成，請求還為初始化 |
| 1 |
已經成功調用open方法建立請求 |
| 2 |
所有重定向已經完成，並且已經接受到瞭響應的全部http請求頭 |
| 3 |
正在接受整個響應體 |
| 4 |
數據傳輸已經完成，或者在傳輸過程中發生瞭錯誤 |
jQuery中使用Ajax
通常方法是ajax，其格式為：$.ajax(url,[settings])，屬性設置有：
|
屬性值 |
描述 |
| url |
所請求的資源 |
| type |
請求方式，通常為get和post |
| data |
要發送給服務器的數據，對於post請求時有用 |
| dataType |
要求服務器返回的數據類型，通常有xml/html/json/txt等 |
| success |
成功時的回調函數，格式為：function(data,textStatus,xhr); |
| error |
請求失敗時的回調函數，格式為：function(xhr,status,error); |
| complete |
請求完成調用時的函數，格式為：function(xhr,status); |
| timeout |
為請求設置一個超時時間 |
jQuery提供瞭一個getJSON方法，用於以異步方式發送get請求獲得json格式數據，該方法的格式為:$.getJSON(src,function(data,status,xhr){…});，然而遺憾的是，jQuery並沒有提供對應的postJSON方法
j提供瞭用於設置全局Ajax選項的方法：ajaxSetup([settings])，它對當前頁面的所有ajax有效，除非重新設置相應的選項
此外，jQuery還提供瞭一個快捷的工具方法，get和post，格式為：$.post(url,data,function(data){..},type，通常隻需要指定url和function就可以瞭，（post還需要指定data）