jQuery實戰小知識

一.基礎篇

1.jQuery通常對任何需要執行操作(除了那些微不足道的JavaScript操作)的頁面都非常有用,而且也高度關注如何幫助頁面開發者在頁面中使用不唐突的JavaScript。採用jQuery的解決方案,把行爲從結構中分離出來,正如把樣式從結構中分離出來一樣,他能使我們更好地組織頁面,增加代碼的靈活性。

         儘管事實上jQuery僅僅向JavaScript命名空間引入了兩個新的命名(jQuery函數和其別名$),它卻通過使jQuery函數高度多功能化,以及根據傳入的參數調整執行的操作來提供大量的實用功能。

2.jQuery()有如下用途:

        □通過包裝器方法選擇和包裝將要操作的DOM元素;

        □爲全局實用函數提供命名空間;

        □從HTML標記創建DOM元素;

        □創建在DOM就緒後執行的代碼。

3.jQuery在頁面上表現出色,它不僅儘量減少了對全局JavaScript命名空間的佔用,而且提供了官方方法,以儘可能減少當衝突依然存在時對命名空間的佔用問題,也就是當頁面上另一個庫(比如Protorpe)也要求使用$名稱的時候。

 

二.選擇要操作的元素篇

1. jQuery提供了通用而強大的選擇器集合(模擬CSS選擇器),以便使用簡潔而強大的語法來識別頁面文檔中的元素。這些選擇器包含目前大多數現代瀏覽器都支持的CSS3語法。

2.jQuery提供的另一個重要功能是,使用HTML片段動態地創建新元素,以便創建或擴大包裝集。可以將這些孤立的元素連同包裝集中的其他元素一起操作,最終添加到頁面文檔的某些部分中。

3.jQuery提供了一組健壯的方法用來調整包裝集,以提煉集合的內容,可以在創建之後立即應用這些方法,也可以中途在一組方法鏈中應用這些方法。對現有包裝集應用過濾條件也可以輕鬆地創建新的包裝集。

4.jQuery提供了大量工具來確保你可以輕鬆而精確地找出期望操作的頁面元素。

 

三.用jQuery爲頁面添加活力篇

1.自定義特性與HTML

           在HTML4中,使用非標準的特性名稱(比如data-custom)雖然是一個常用的技巧,但是卻會導致標記是無效的,並且不會通過官方的驗證測試。如果你比較關注驗證的結果,那就要謹慎行事了。

           另一方面,HTML5正式承認並允許這樣的自定義特性,只要自定義特性的名稱以字符串data-爲前綴即可。根據HTML5的規則,任何遵循此命名約定的特性都是有效的;而不遵循此約定的還是無效的。attr(name, value)

2.$(whatever).attr("disabled",  "enabled");使用這種方式來禁用提交按鈕(或多個按鈕)不能免除服務器端代碼的職責:防止雙重提交或執行任何其他類型的驗證。爲客戶端代碼添加這種功能可以提高頁面對最終用戶的友好度,而且能幫助阻止正常情況下的雙重提交問題。但是這不能阻止攻擊或者其他黑客行爲,因此服務器端代碼必須繼續保持警惕。

3.position(),元素的偏移父元素是擁有顯示定位規則relative或absolute的最近的祖先元素。

 

四.事件處理篇

1.在DOM第0級事件模型中,事件處理器中的幾乎每個步驟都需要使用瀏覽器特定檢測,目的是爲了確定下一步的動作。

2.DOM第0級事件模型有一個嚴重的缺點,因爲存儲在屬性上的函數引用充當了事件處理器,所以對於任意指定的事件模型,一個元素的每次只能註冊一個事件處理器。

3.DOM第2級事件模型被設計來處理這類問題。DOM第2級事件處理器(也稱爲監聽器)是通過元素方法創建的,而不是把函數引用賦值給元素屬性。每個元素都定義有一個名爲addEvenListener()的方法,用來附加事件處理器(監聽器)到元素上。addEvenListener(eventType,listener,useCapture)。

4.在DOM第2級事件處理模型中,當觸發一個事件時,事件首先從DOM樹的根部向下傳播到目標元素,然後再次從目標元素向上傳播到DOM樹根部。前一階段(根到目標)稱爲捕獲階段,後一個階段(目標到根)稱爲冒泡階段。

        無論何種原因,都可以通過Event實例提供的機制來阻止事件向更高層傳播。對於標準兼容的瀏覽器,可以調用Event實例的stopPropagation()方法來阻止事件向更高層的祖先元素傳播。

5.jQuery中自定義事件能力是觀察者模式的一個有限制的示例,有時也被稱爲發佈/訂閱模式。通過在元素上創建特定事件的處理器來訂閱元素的該事件,然後當該事件發佈(被觸發)時,在事件層次結構中,任何已訂閱的元素都會自動調用它們的處理器。這樣就可以通過減少必要的耦合來大大降低代碼的複雜度。之所以稱其爲觀察者模式的有限制的示例,是因爲訂閱者侷限於發佈者祖先層次結構中的元素(而不是DOM中的任意元素)。

6.傳統的基本事件模型,也被非正式地稱爲DOM第0級事件模型,在聲明事件監聽器時享有某種程度上獨立於瀏覽器的操作,但是監聽器函數的實現需要依賴於瀏覽器的不同代碼來處理Even實例中的差異。這個事件模型可能是頁面開發者最熟悉的,它通過將監聽器函數的引用賦值給元素的屬性(例如onclick屬性)來創建DOM元素的事件監聽器。使用這個模型雖然簡單,但是卻限制了在特定的DOM元素上的任何一個事件類型都只能有一個監聽器。

7.使用更加先進和標準化的DOM第2級事件模型可以來避免這方面的不足,在這個模型中我們使用一個API將處理器綁定到其事件類型和DOM元素上。儘管這個模型很通用,但是它僅支持標準兼容的瀏覽器,例如:Firefox,Safari,Camino以及Opera。

8.對於IE瀏覽器,即使直到IE8還是使用基於API的專有事件模型,它提供了DOM第2級事件模型的功能的子集。

9.jQuery提供了通用的bind()方法用來在元素上建立任意類型的事件監聽器,以及特定事件的便捷方法,例如change()和click()。這些方法以獨立於瀏覽器的方式運行,並且使用在事件監聽事件中最常用的標準屬性和方法來標準化傳入的Even示例。

10.jQuery也提供了刪除事件處理器或者在腳本控制下觸發這些處理器的方法,並且還定義了一些更高級的方法來儘可能簡單地實現普通的事件處理任務。

11.jQuery還提供了live()方法,爲可能還尚不存在的元素預先指定處理器,而且允許我們指定自定義方法來輕鬆地註冊將會在自定義事件發佈時調用的處理器。

 

五.用動畫和特效裝扮頁面篇

1.當說到某個元素被從顯示器中刪除時(在這裏,以及其餘關於特效的討論中),意思是該元素不再被瀏覽器的佈局管理器考慮在內,這是通過設置該元素的CSS的display樣式屬性爲none來實現的。這並不意味着元素從DOM樹中刪除,沒有哪個特效可以將元素從DOM中刪除。

2.jQuery創建自定義動畫的animate()方法。

3.當不帶參數調用show()和hide()方法時,會立即從顯示器上顯示或隱藏元素,沒有任何動畫。可以通過向這些方法傳入控制動畫速度的參數以及提供一個可選的,在動畫完成時執行的回調來執行顯示或隱藏元素的動畫版本。toggle()方法用來切換元素的隱藏或顯示狀態。

4.另外一組包裝器方法(fadeOut()和fadeIn())通過調整元素的不透明度來隱藏或顯示元素,從而在顯示器上刪除或顯示元素。第三者方法(fadeTo())以動畫方式改變包裝元素的不透明度,但不會從顯示器上刪除元素。

5.最後一組內置的3個特性動畫通過調整包裝元素的垂直高度來隱藏或顯示它們:slideUp(),slideDown()以及slideToggle()。

6.jQuery提供了animate()方法以便我們創建自定義動畫。可以使用這個方法對任何接受數字值的CSS樣式屬性應用動畫,最常用的是元素的不透明度,位置和尺寸。

 

 六.DOM無關的jQuery實用函數

1.$.trim(value)刪除傳入的字符串開頭和結尾處的空白字符,並返回修改後的結果。

2.可以使用each()方法來遍歷數組,但是相比each()方法,$.each()函數有略微的性能優勢。記住,如果你非常關心性能問題,那就需要使用老式的for循環來獲得最佳的性能。

3.$.map(array, callback)遍歷傳入的數組,爲數組的每一項調用回調函數,並將函數調用的返回值收集到一個新的數組中。

4.$.makeArray(object)將傳入的類似數組的對象轉換爲JavaScript數組。

5.$.unique(array)向其傳入DOM元素的數組,則返回由原始數組中不重複的元素組成的數組。

6.$.merge(array1,array2)將第二個數組中的值合併到第一個數組中並返回結果。這個操作會修改第一個數組並將其作爲結果返回。

7.如果你是“面向對象JavaScript"的發燒友,那就毫無疑問你不僅熟悉如何擴展對象的實例,而且熟悉如何通過對象構造器的prototype屬性來擴展創建對象的類。$.extend()可以用來擴展prototype以實現基於構造器的繼承,也可以用來擴展現有的對象實例從而實現基於對象的繼承(jQuery在其內部也是這樣實現的)。

8.$.contains(container,containee)測試一個元素是否在DOM層次結構中包含在另一個元素內部。

9.$.noop()什麼都不做

10.由於大部分的JSON也是有效的JavaScript表達式語法,於是JavaScript的eval()函數早就被用來將JSON字符串轉換爲等價的JavaScript對象。現代瀏覽器提供了JSON.parse()來解釋JSON,但是並非每個開發者都能奢望他們的所有用戶都在使用最新的瀏覽器。jQuery深知這一點,爲此提供了$.parseJSON()實用函數。$.parseJSON(json)解析傳入的JSON字符串,返回其計算值。

11.我們看到jQuery如何通過$.support對象上的各種標誌來告訴我們當前瀏覽器的功能。當需要求助於瀏覽器檢測來了解$.support無法提供的,瀏覽器在功能和運行上的差異時,$.browser提供的一組標誌能夠幫助我們確定當前顯示頁面的瀏覽器家族。當不可能按照獨立於瀏覽器的方式編寫代碼時,並且首選的特徵檢測方法行不通時,才應該考慮瀏覽器檢測這個最後的手段。

12.jQuery認識到網頁開發者有時可能需要同時使用jQuery和其他庫,爲此提供了$.noConflict()用來允許其他庫使用$別名。在調用此函數後,所有的jQuery操作必須使用jQuery名稱而不能使用$。

13.$.trim()的存在是爲了填補原生JavaScript的String類的一個空白,它用來修剪字符串開始和結尾處的空白字符。

14.jQuery也提供了一組非常有用的函數用來操作數組中的數據集。$.array()可以很方便地遍歷數組中的每一項。$.grep()允許我們使用任何篩選條件來篩選源數組中的數據,從而創建新的數組。$.map()允許我們在源數組上輕鬆使用自定義的轉換函數,從而產生包含轉換後的值的新數組。

15.我們可以使用$.makeArray()將NodeList實例轉換爲JavaScript數組,可以使用$.inArray()來測試一個值是否在數組中,甚至可以通過$.isArray()來測試某個值是否是數組,可以使用$.isFunction()來測試一個值是否爲函數。

16.jQuery通過$.param()來創建正確格式化和編碼的查詢字符串。

17.jQuery提供了$.extend()函數用來合併對象,甚至可以用來模擬某種繼承架構。這個函數可以將多個源對象的屬性合併到目標對象中。

18.$.proxy()方法用來預綁定一個對象,隨後用於事件處理器調用的函數上下文,$.noop()函數什麼也不做。

19.當我們需要動態加載腳本文件的時候,可以使用jQuery定義的$.getScript()來在頁面生命週期的任何時候加載和執行腳本文件,甚至是在頁面所在域之外其他域的腳本。

 

七.擴展jQuery篇

1.爲實用函數添加命名空間

           如果想確保自己的實用函數不會和其他人的實用函數衝突,可以通過在$上創建命名空間對象來爲函數添加命名空間,反過來說這個命名空間充當了函數的擁有者。例如:如果我們想將所有的日期格式化函數放在名爲jQiaDateFormater的命名空間中,可以這麼做:$.jQiaDateFormatter = { }; $.jQiaDateFormatter.toFixedWidth = function( value, length, fill )  {...};這確保了像toFixedWidth()這樣的函數永遠不會和另一個名字類似的函數衝突。

2.把自己的代碼編寫爲jQuery擴展有許多優點。這不僅可以在Web應用中保持代碼的一致性(無論使用的是jQuery  API還是自定義API),還可以使我們的代碼充分利用jQuery提供的所有強大功能。

3.遵循一些命名規則可以幫助避免文件名之間的命名衝突,也可以避免頁面重新指定$時可能會產生的問題。

4.創建新的實用函數就像在$上創建新的函數屬性一樣簡單,而新的包裝器方法可以簡單地創建爲$.fn的屬性。

 

八.使用Ajax與服務器通信篇

1.jQuery的Ajax實現沒有使用IE瀏覽器的包裝器,因爲不正確的實現會導致引用問題。相反,jQuery在ActiveX對象可用的時候使用它。這對我們來說是好消息。通過使用jQuery來滿足對Ajax需求,就可以知道最好的實踐已經被研究出來並將被應用到實際。

2.GET請求-----意圖是冪等的:相同的GET操作無論進行一次,兩次還是三次操作,返回的結果應該是完全相同的(假設沒有其他的力量在起作用來改變服務器的狀態)。

3.POST請求-----可以是非冪等的:發送到服務器的數據可以用來改變應用程序的模型狀態。例如,添加或者更新數據庫中的記錄或者從服務器刪除信息。

4.瀏覽器會根據使用的HTTP方法來決定是否緩存,GET請求非常容易被緩存。請使用正確的HTTP方法以確保不會違背瀏覽器或者服務器對請求意圖的期望。這只是對REST式理論領域的一個初探,在REST式理論中也可以使用其他的HTTP方法,比如PUT和DELECT。

5.當XML文檔從服務器返回時,它會被自動解析並且使結果DOM可供回調函數使用。當XML顯得大材小用或者不適合作爲數據傳輸機制時,一般會使用JSON來代替它。這樣選擇的一個原因是JSON非常容易融入客戶端腳本。jQuery可以使這個操作更容易。如果我們知道響應主體將會是JSON的時候,調用$.getJSON()實用函數可以自動地解析返回的JSON字符串,使結果JavaScript數據項可供該函數的回調函數使用。

6.對於加載HTML內容到DOM元素,load()方法提供了一種簡單的方式來從服務器獲取內容並使之成爲任意包裝集元素的內容。使用GET還是使用POST方法取決於如何提供傳遞到服務器的參數數據。

7.當需要GET方法時,jQuery提供了實用函數$.get()和$.getJSON();如果從服務器返回JSON數據,那後者會很有用。爲了強制發起POST方法,可以使用$.post()實用函數。

8.如果需要最大的靈活性,那麼可以使用帶有豐富分類選項的$.ajax()實用函數,它允許我們控制Ajax請求的大部分細節。jQuery中所有其他的Ajax特徵都使用這個函數的服務來提供自己的功能。

9.爲了使得管理大量的選項不那麼繁瑣,jQuery提供了$.ajaxSetup()實用函數,允許爲$.ajax()函數(包括使用$.ajax()服務的所有其他的Ajax函數)的任何常用選項設置默認值。

10.爲了完善Ajax工具集,jQuery也允許我們通過在各個階段觸發Ajax事件來監聽Ajax請求的過程,並允許建立處理器來監聽這些事件。我們可以對這些處理器使用bind()方法,也可以使用以下便捷方法:ajaxStart(),   ajaxSend(),    ajaxSuccess(),    ajaxError(),     ajaxComplete()    以及ajaxStop()。

 

九.jQuery UI篇

 

十.JavaScript必知知識篇

1.大多數面向對象(簡稱OO)語言都定義了某種基本的Object對象類型,其他所有的對象都源於這個對象類型。在JavaScript中,基本的Object對象確實是作爲所有其他對象的基礎,但是這種比較也僅此而已。從基本層面上看,JavaScript的Object對象與其他大部分的OO語言所定義的基本對象毫無相通之處。

2.新的對象由new操作符和與其相配的Object構造器來產生。如:var shinyAndNew = new Object();

3.就像服務器端對象那樣,JavaScript對象也可以包含數據和方法。不同於那些服務器端的對象,這些元素不是爲對象預先聲明的,我們可以在需要的時候動態地創建它們。如:var  ride = new  Object();

        ride.make = "Yamaba";

        ride.model = "V-Star  Silverrado  1100";

        ride.year = 2015;

        ride.purchased = new Date( 2015, 6, 1);

在這裏我們創建了一個新的Object實例,並且把它賦值給ride變量。然後用一些不同類型的屬性來填充這個變量。我們知道JavaScript  Object的實例就是一組屬性集,每個屬性都由名稱和值構成。屬性的名稱是字符串,屬性值可以是任何JavaScript對象,可以是Number,String,Date,Array,基本的Object,也可以是任何其他的JavaScript對象類型(包括函數)。屬性不侷限於String或Number的類型。一個對象屬性可以是另一個Object實例,這個實例又包含其自己的屬性集,而屬性集中也可以包含擁有屬性的對象,以此類推。

4.通用的屬性引用操作符的格式:object[propertyNameExpression],如下面的等價引用

         ride.make

         ride['make']

         ride['m'+'a'+'k'+'e']

         var p = 'make';   ride[p];

5.從技術上而言,JSON無法表示日期值,主要是因爲JavaScript本身沒有任何一種日期字面值。當在腳本中使用JSON時,通常會使用Date構造器來表示日期值。如果用作交換格式使用時,日期常常被表示爲包含ISO 8601格式的字符串或表示日期值的數字(Date.getTime()返回的毫秒數)。同樣也要注意,當把JSON用作交換格式使用時,必須遵守一些嚴格的規則,比如引用屬性的名稱。

6.在JavaScript中的閉包,其創建方式都是隱式的,而不像其他一些支持閉包的語言那樣需要顯示的語法。這是一把雙刃劍,一方面使得創建閉包很容易,但另一方面這使得很難在代碼中發現閉包。無意創建的閉包可能會帶來意料之外的結果。例如,循環引用可能導致內存泄露。內存泄露的典型示例就是創建向後引用閉包中變量的DOM元素,這會阻止那些變量的回收。

7.函數在JavaScript中是一等公民,能夠以類似於其他對象類型的方式來進行聲明和引用。可以使用字面值表示法來聲明函數,將它們保存在變量和對象屬性中,甚至還可以將它們作爲回調函數,將它們作爲參數來傳入其他函數。

8.函數上下文這個術語描述的是在函數調用中this指針所引用的對象。儘管通過將對象設置爲函數上下文,就可以像操作對象方法那樣來操作函數,的是函數並沒有被聲明爲任何單個對象的方法。調用方式(可由調用者顯示地控制)決定了調用的函數上下文。

9.函數聲明及其環境形成閉包的方式。在後續調用函數時,這個閉包允許函數訪問成爲閉包一部分的局部變量。

發佈了16 篇原創文章 · 獲贊 7 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章