《jQuery基礎教程》讀書筆記

標籤：

最近在看《jQuery基礎教程》這本書，做了點讀書筆記以備回顧，不定期更新。 第一章第二章比較基礎，就此略過了。。。

第三章 事件

• jQuery中$(document).ready()與javascript原生的window.onload()區別：

$(document).ready()：通過該方法註冊的事件處理常式，會在DOM完全就緒並使用時調用。雖然這意味著所有元素對指令碼而言都是可訪問的，但是，卻不意味著所有關聯的檔案都下載完畢。當HTML下載 完成並解析成DOM樹之後，代碼就可以開始運行了。並且在指令碼中可以多次使用該方法，不用擔心之前標記的方法被覆蓋掉，而原生的window.onload()存在被覆蓋的問題

123456789

// window.onload()：當文檔完全下載到瀏覽器中時，就會觸發該事件。            $(document).read(function(){   //較長的形式能更清楚的表現代碼在做什麼               //方法實現          });          //上述調用在jQuery中可以簡寫為:          $(function(){              //方法實現          });

如果在項目中有其他的javascript庫用到$關鍵字，可以在jQuery中調用jQuery.noConflict()方法來出讓$的使用權，在代碼中用jQuery取代$符號

多個元素響應單擊事件的策略事件捕獲：1）在事件捕獲的過程中，事件首先會交給最外層的元素，接著再交給更具體的元素。2）事件冒泡：當事件發生時，會首先發送給最具體的元素，在這個元素獲得響應機會之後，事件會向上冒泡到更一般的元素。

最終出台的DOM標準規定應該同時使用這兩種策略：首先，事件要從一般元素到具體元素逐層捕獲，然後，事件再通過冒泡返回DOM樹的頂層。而事件處理常式可以註冊到這個過程中的任何一個階段。為了提供跨瀏覽器的一致性，jQuery始終會在模型的冒泡階段註冊事件處理常式。因此，我們總是可以假定最具體的元素會首先獲得響應事件的機會。為了瞭解決事件冒泡帶來的不利影響，我們在函數中必須要訪問事件對象。事件對象是一種DOM結構，它會在元素獲得處理事件的機會時傳遞交給被調用的事件處理常式，該對象中包含著與事件有     關的資訊，也提供了來影響事件在DOM中傳遞進程的一些方法。 看以下代碼：

123456

$(document).ready(function() {  var toggleSwitcher = function(event) {    if (!$(event.target).is(‘button‘)) {      $(‘#switcher button‘).toggleClass(‘hidden‘);    }  };

通過判斷event.taget屬性值來避免了因為事件冒泡帶來的不利影響。當然，在具體元素繫結方法的末尾加上event.stopPropagation()方法同樣可以阻止事件冒泡。通過使用.toggle()交替地擴充和摺疊頁面元素通過使用.hover()圖書顯示位於滑鼠指標下方的頁面元素通過.trigger()引發執行綁定的事件處理常式。 第四章 樣式與動畫

• jQuery與CSS

jQuery提供了css()方法，這個方法集getter與setter於一體。該方法能夠接受的參數有兩種，一種是為它傳遞一個單獨的樣式屬性和值，另一種是為它傳遞一個由屬性-值對構成的映射，即javascript對象字面量。

 

• 建立自訂動畫

 jQuery提供了一個強大的.animate()方法，用於建立控制更加精細的自訂動畫。.animate()方法有兩種形式，第一種形式接受以下4個參數。 1）一個包含樣式屬性以及值的映射--與之前說過的.css()方法中的映射類似。 2）可選的速度參數--既可以是預置的字串，也可以是毫秒數值。 3）可選的緩動（easing）類型。 4）可選的回呼函數

123456

.animate({     param1: value1,     param2: value2},     speed, function() {     /* stuff to do after animation is complete */});

第二種形式接受兩個參數，一個屬性對應和一個選項映射：.animate({properties}, {options}); 這其中的第二個參數是把第一種形式的後三種封裝在另一個映射之中。

第五章 DOM樹操作

• DOM元素屬性與HTML 屬性：在大多數情況下，二者的作用是一樣的。但也存在些許差異。

譬如在DOM中有個屬性為className，而對應的類屬性在HTML中為class；DOM中的checked屬性是一個布爾值，而在HTML中checked屬性值是一個字串。

• $()函數的作用：

1）利用css選取器選擇元素 2）傳入參數為HTML字串，可建立一個DOM元素。

• 移動DOM元素的方法（以及相對的反向方法。例如 appendTo()--append()）

1）.insertBefore()在現有元素外部、之間新增內容2）.prependTo()在現有元素內部、之前新增內容 3）.appendTo()在現有元素內部、之後新增內容 4）.insertAfter( 在現有元素外部、之後新增內容

• 元素複製：

可以使用Jquery的.clone()方法來建立任何匹配的元素集合的副本。單純的.clone()方法不會複製匹配的元素及其後代元素中綁定的事件。如果要連同事件一起複製，應調用.clone(true)方法。

• .text()方法可以取得匹配元素的內容或者用新字串替換匹配元素內容。

.text()方法始終會取得或設定純文字內容，所有的HTML標籤都將被忽略，而所有的HTML實體也會被轉換成對應的字元。

• 總結：

1）要在HTML中建立新元素，使用$()函數2）要在每個匹配的元素中插入新元素，使用：.append() .appendTo() .prepend() .prependTo()3）要在每個匹配的元素相鄰的位置上插入新元素，使用：.after() .insertAfter() .before() .insertBefore()4）要在每個匹配的元素外部插入新元素，使用：.wrap() .warpAll() .warpInner()5）要用新元素或文本替換每個匹配的元素使用：.html() .text() .replaceAll() .replaceWith()6）要移除每個匹配的元素中的元素，使用 .empty()7）要從文檔中移除每個匹配的元素及其後代元素，但不實際刪除它們，使用： .remove()  .detach()

第六章 通過AJAX發送資料

• AJAX解決方案中涉及到的技術（無需重新整理頁面就能從伺服器/用戶端上載入資料的手段）

1）Javascript，通過使用者或其他與瀏覽器相關事件捕獲互動作用。2）XMLHttpRequest對象，通過這個對象可以在不中斷其他瀏覽器任務的情況下向伺服器發送請求。3）伺服器上的檔案，以XML、HTML或JSON格式儲存文本資料。4）其他javascript，解釋來自伺服器的資料並將其呈現到頁面上。

• $.each()函數不操作jQuery對象，它以數組或映射作為第一個參數，以回呼函數作為第二個參數。此外，還需要將每次迴圈中數組或映射的當前索引和當前項作為回呼函數的兩個參數。

• .serialize()方法將匹配的DOM元素轉換成能夠隨AJAX請求傳遞的查詢字串。
• 安全限制：儘管構建動態Web應用程式非常實用，但XMLHTTPRequest常常會受到嚴格限制。為了了防止各種跨網站指令碼攻擊，一般情況下從提供原始頁面的伺服器之外的網站請求文檔是不可能的。但是，有時候必須要從第三方來源中載入資料。有如下解決辦法：

1）通過伺服器載入遠端資料，然後再用戶端請求時提供給瀏覽器，因為伺服器能夠對資料進行預先處理。 2）根據請求注入<script>標籤來載入外部Javascript檔案。

1	$(document.createElement(‘script‘)).attr(‘src‘, ‘http://example.com/example.js‘).appendTo(‘head‘);

3）使用<iframe>這個HTML標籤來載入遠端資料，為該元素指定任何URL作為其擷取資料的來源，包括與提供頁面的伺服器不匹配的URL；位於iframe中的指令碼需要明確地向父文檔中的對象提供資料。

第七章 使用外掛程式

• 使用jQuery的外掛程式很簡單。只要找到查件的URL，在HTML中引用它，然後再指令碼中使用即可。
• jQuery官方的外掛程式庫 http://plugins.jquery.ocm/  需要什麼外掛程式上去搜尋，並看文檔和教程。

《jQuery基礎教程》讀書筆記