《深刻PHP與jQuery開發》讀書筆記——Chapter2

Pro PHP and jQuery Chapter2 總結

1.理解jQuery腳本的基本行爲

jQuery事實上沿用了JavaScript的那一套東西，幾乎全部方法都支持鏈式調用，也就是說方法能夠一個接一個地執行。

$('p')
    .addClass('new-class')
    .text("I'm a paragraph!")
    .appendTo('body');

要記住： 鏈式調用事後返回的仍是jQuery對象自己。

2.經常使用的jQuery選擇器方法

2.1遍歷DOM元素

遍歷，就是從一個DOM元素移動到另外一個元素的行爲。

1. 索引.eq()
2. 過濾.filter()和.not()
3. 首尾索引.first()和.last()
4. 包含特殊特徵的元素.has()
5. 返回布爾求值.is()
6. 集合切分操做.slice()
7. 尋找子元素(可選參數來匹配特定子元素)，僅僅檢查下一級元素.children()
8. 找出直屬上級.closest()
9. 不論代數，找出符合條件的子孫元素.find()
10. 向後查找.next(),.nextAll()和.nextUntil()
11. 向前查找.prev(),.prevAll()和.prevUntil()
12. 選擇全部兄弟元素(不分先後的同級相鄰元素).siblings()
13. 向上回溯父元素(直到html).parent(),.parents()和.parentsUntil()
14. 新建jQuery對象.add(),注意在此刻該元素只存在於jQuery對象中,還沒有添加到DOM樹，所以還不能顯示在頁面上。
15. 既匹配段落元素，又匹配篩選後的結果.andSelf()
16. 返回文本節點，即元素開始標籤和結束標籤之間的字符數據(元素實際顯示的文本）.contents()
17. 獲得上一步操做的結果集.end()

2.2建立元素並將其添加到DOM

注意:咱們在Google Chrome的控制檯或者是FireBug的控制檯裏面對DOM所作的任何修改都是臨時的。這意味着當刷新原始頁面時，瀏覽器會重置全部的變動。之因此這樣是由於JavaScript是一種客戶端語言,腳本修改的並不是存放在服務器上的真實文件，而僅僅是瀏覽器對這個文件副本的解釋。

可是JavaScript是能夠經過AJAX技術將修改保存到服務器的，這一技術能使JavaScript與服務器端語言(如PHP)協同工做。

• （主動）在目標內容以後添加.append(),在目標內容以前添加.prepend()
• （被動）在目標內容以後追加.appendTo(),在目標內容以前追加.prependTo()
  如：

$("<p>", {
            "text":"I'm a new paragraph!",
            "css":{"background":"yellow"}
        })
        .prependTo("body");

• （主動）在目標內容以後，目標元素以外添加.after()，在目標內容以前，目標元素以外添加.before()
• （被動）在目標內容以後，目標元素以外添加.insertAfter(),在目標內容以前，目標元素以外添加.insertBefore()
• 使用一個或多個元素包住已有的元素.wrap(),注意，裏面可加回調函數

$("span").wrap(function(){
        return $(this).is(".foo") ? "<strong>" : "<em>";
});

• 刪除包住的元素.unwrap()
• 將整個元素集合都須要用一個標籤包住,.wrapAll()會在DOM中移動元素，從而使得它們集中在一塊兒。
• 放在最內部包圍:.wrapInner()
• .remove()和.detach()方法用於從DOM中徹底刪除一個元素。兩個方法都從DOM中刪除選中的元素，但.detach()方法無缺地保存了被刪除元素的數據，所以特別適合那些須要把刪除元素挪到DOM其餘位置的場合。

2.3獲取和修改CSS及屬性

1. .attr()主要有兩個功能:a.讀取給定的屬性;b.設置給定屬性的值，這須要用屬性名字做爲它的第一個參數，再提供一個值做爲它的第二個參數。
2. 刪除屬性.removeAttr()
3. 設置樣式規則（接收JSON數據）.css()
4. .text()和.html()方法用於處理一個元素的內容，兩者的不一樣在於.html()可以讀取或設置HTML內容，而.text()只能讀取或設置文本內容。
5. .val()方法用於訪問和修改表單元素的內容(值)。
6. .data()經過使用一種安全簡單的方式把與元素有關的信息儲存到jQuery對象中。（支持JSON格式）
7. .addClass()用於添加屬性，.removeClass()用於刪除屬性,toggleClass()用於屬性輪轉，即若是目標元素沒有相應的class，它會添加它，若是已經有相應的class，它會刪除它。
8. 布爾值檢測jQuery對象是否具備相應的屬性.hasClass();
9. 高和寬.height(),.width()
10. 內外高寬.innerHeight(),.innerWidth(),.outerHeight()和outerWidth()

2.4處理結果集

.map()和.each()

.map()和.each()方法使得開發者可以使用回調函數對結果集內的每個元素單獨處理，這個回調函數須要兩個參數，即當前元素的索引和當前元素自己。

兩者的區別：.map()方法返回的是一個包含回調函數返回值的新對象，而.each()返回的是受回調函數影響後的原始jQuery對象。這意味着.each()支持鏈式調用，而.map()不支持。

2.5動畫或其餘效果

1. 顯示和隱藏效果：.show()和.hide()
2. 讓一個元素淡入或者淡出（使用透明度）.fadeIn()和.fadeOut()。當調用這兩個函數時,.fadeIn()把元素的透明度從0調整到1，另外一個則從1調整到0.淡入和淡出輪流搖擺的函數.fadeTo()
3. 上下展開和隱藏:.slideUp(),.slideDown(),搖擺的函數有.slideToggle()
4. 動畫方法內部都是調用的是.animate()
5. 延遲動畫.delay(),中止動畫.stop()

2.6處理時間

• 瀏覽器事件拋出異常:當瀏覽器檢測到自身發生變化或遇到錯誤時，就拋出瀏覽器事件。.error()
• 在頁面內容發生滾動時會觸發scroll事件，要爲滾動事件綁定事件處理程序，使用.scroll()方法。
• .ready()是一個防止腳本執行過早從而避免異常的「保險」。這個方法會一直等到DOM準備好，能夠接受處理時才觸發它的處理程序。一個常見的習慣是把整個腳本作成一個回調函數傳遞給.ready()函數：

$(document).ready(function(){
        //全部利用jQuery實現的功能都放在這裏
});

此外,.ready()方法也接受一個可選的參數，這個參數用來在此函數內做爲jQuery函數的別名。這使你可以書寫更安全的jQuery腳本，即便在已經使用jQuery.noConflict()方法把$別名讓給了其餘框架的場合，你使用$符號的腳本也同樣正常工做。

下面的代碼老是能夠保證你代碼中的$別名可以正常工做：

jQuery.ready(function($){
        //全部利用jQuery實現的功能都放在這裏
        $("p").fadeOut();
    });

• 當一個用戶單擊連接，刷新頁面，單擊前進或後退按鈕，或者關閉整個窗口時，都會觸發unload事件。然而，對unload事件的處理各個瀏覽器並不統一。所以，若要在生產環境使用這個事件，就必定要事先在不一樣的瀏覽器環境中對腳本進行充分測試。
• 處理事件綁定函數。.bind()綁定，.unbind()解除綁定。可用的事件有blur,focus,focusin,focusout,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup和error。
• 相似.bind()和.unbind(),.live()和.die()也分別負責爲元素綁定和刪除事件處理函數。一個主要的不一樣是，.live()不但能綁定事件處理函數和JavaScript屬性給頁面上已有的元素，就連動態添加到DOM中的匹配元素也能（主動）綁定。
• .one()方法的用法和.bind()徹底相同，惟一的區別在於，.one()綁定的事件處理函數，在事件觸發一次後即被自動解除綁定。
• 關於.toggle()方法，有三種用法：

一是.toggle()方法容許開發者綁定兩個或多個函數給click事件，這些函數在事件發生時會交替執行，非此即彼。

$("#bar")
    .toggle(function(){
                console.log("Function 1");
            },
            function(){
                console.log("Function 2");
            },
            function(){
                console.log("Function 3");
            });

接下來，用下面的代碼切換段落p#bar的顯示狀態：

$("#bar").toggle();

二是能夠用一個連續時間作它的第一個參數，它就會以動畫的形式隱藏或顯示元素。

$("#bar").toggle(2000);

最後，能夠用一個布爾值作它的第一個參數能夠控制元素的顯示或隱藏。

$("#bar").toggle(true);
$("#bar").toggle(false);

• .trigger()方法用來觸發事件。這個方法的第一個參數是將被觸發的事件名，第二個參數是一個可選的數組，用來傳遞給事件處理函數。

$("#bar")
    .bind("click",function(){
            console.log("Clicked!");
    })
    .trigger("click");

• 每個事件都有一個與事件同名的快捷方法。若是不傳遞任何參數給快捷方法，它就調用相應事件的.trigger()方法觸發事件。

可用的快捷方法有.blur(),.focus(),.focusin(),.focusout(),.load(),.resize(),.scroll(),.unload(),.click(),.dblclick(),.mousedown(),.mouseup(),.mousemove(),.mouseover(),.mouseout(),.mouseenter(),.mouseleave(),.change(),.select(),.submit(),.keydown(),.keypress(),.keyup()和.error()。

舉個例子，下面的代碼先綁定一個處理函數到click事件，而後觸發這個事件：

$("#bar").click(function(){console.log("Clicked!"); }).click();

2.7使用AJAX控制函數

1.$.ajax()

$.ajax()接受一個參數：一個包含AJAX調用所需設置的對象。若是調用它卻不作任何設置，這個方法會簡單地載入當前頁面而不作任何處理。

最經常使用的設置項目有如下參數能夠設置：

• data:發送給遠程腳本的數據，能夠是查詢字符串形式(key1 = val1&key2 = val2),也能夠是JSON數據形式（{"key1":"val1","key2":"val2"})。
• dataFilter(data,type):一個回調函數，用於對數據進行預處理，特別適合用來對遠程腳本發送過來的數據作「消毒」（無害化）處理。
• error（XMLHttpRequest，textStatus，errorThrown）：一個回調函數，在請求發生錯誤時執行。XMLHttpRequest對象，字符串描述的請求狀態，還有錯誤碼會做爲參數傳遞給它。
• success(data,textStatus,XMLHttpRequest):一個回調函數，在請求成功完成時執行。遠程腳本返回的數據，字符串描述的請求狀態和XMLHttpRequest請求對象會做爲參數傳遞給它。
• type:請求類型。默認值是GET,POST也能夠用。PUT和DELETE雖然也能夠用但不保證全部瀏覽器都支持。
• url:目標URL，請求會發送到這個地址。

如下是一個示例：

$.ajax({
        "type":"POST",
        "url":"ajax.php",
        "data":"var1=val1&var2=val2",
        "success":function(data){
                    $("#bar")
                        .css("background","yellow")
                        .html(data);
        }
});

2.$.ajaxSetup()

$.ajaxSetup()用於爲AJAX請求設置默認選項。舉例來講，默認狀況下，若所有AJAX請求都被用POST方式發到ajax.php，而且返回數據都用來填充段落#bar,則可使用下面的代碼：

$.ajaxSetup({
        "type":"POST",
        "url":"ajax.php",
        "success":function(data){
                $("#bar")
                    .css("background","yellow")
                    .html(data);
        }
});

如今，發起新的AJAX請求就容易多了，只須要傳遞新的數據：

$.ajax({
        "data":{
                "newvar1":"value1",
                "newvar2":"value2"
        }
});

在以後的AJAX調用中，只要在調用選項中給出新的選項設置就可覆蓋默認設置：

$.ajax({
        "type":"GET",
        "data":{
                "newvar1":"value3",
                "newvar2":"value4"
        }
});

3.使用AJAX快捷方法

這些快捷方法都是$.ajax()方法的簡單封裝，只不過有幾個請求選項被設置成了固定值而已。

使用這些方法會有輕微的性能損失，由於本質上這些方法只是被設置好了參數，而後再由它調用$.ajax()。儘管如此，使用這些快捷方法帶來的便利確實可以加快腳本的開發。

• $.get()和$.post()

處理標準的GET和POST請求，用$.get()和$.post()方法最方便。兩個方法都支持4個參數:請求URL，可選的參數（發給遠程腳本的），可選的回調函數（當請求成功完成後執行）和一個可選的dataType設置。

• $.getJSON()

當須要獲取JSON數據時，使用$.getJSON()格外方便。它須要的參數有請求URL，可選的數據和可選的回調函數。

要演示這個方法的使用，咱們須要建立一個新的測試文件命名爲json.php，而後插入如下數據:

{"var1":"value1","var2":"value2"}

而後經過jQuery獲取:

$.getJSON("json.php",
        function(data){
            $("#bar")
                .css("background","yellow")
                .html(data.var1+", "+data.var2);
        });

• $.getScript()
  $.getScript()方法用於加載外部腳本。它的第一個參數是請求URL，還有一個可選的回調函數（一般並不須要，由於腳本在加載完成後會自動執行）。

新建一個測試文件script.php,而後添加以下內容：

alert("This script was loaded by AJAX!");

而後執行：

$.getScript("script.php");

• $.load
  .load()方法的行爲就像$.get()或$.post(),只是它是一個方法而不是全局函數。它內置一個固定的回調函數，負責用服務器返回的數據填充當前元素的內容。

這個函數支持三個一樣的參數:目標URL，可選的數據和可選的回調函數（在當前元素的內容被替換之後執行）。

The END