jQuery高級編程一書總結

JS基礎

理解基礎數值

在進行數值運算時需要注意：浮點數之間的運算結果會有偏差

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）