JQuery實戰教學源碼免費下載

下載地址：http://www.php.cn/xiazai/code/1765

第一講：

本節學到的JQuery及其他開發知識：

1負責頁面內容，CSS負責頁面樣式，Javascript負責頁面行為

2.HTML中應該有DOCTYPE來告知瀏覽器的渲染顯示方式

3.可以先定義p或span節點用於以後顯示伺服器返回資料。

4.border屬性可以控制頁面元素的邊框

5.background-***可以控制背景圖，以及背景圖的位置，重複顯示的方式

6.可以透過#idname或.classname的方式來個制定的html節點定義樣式

7.可以透過$(document).ready(function(){})的方式來定義頁面裝載完成時，需要執行的方法。

8.可以透過$()方法來獲得頁面的指定節點，參數是某種css的選擇器

9.可以在$()方法返回的jquery對像上執行各種Jquery的方法來獲取數據，定義事件，執行操作。

10.val()方法可以得到節點的value屬性值

11.html()方法可以設定某個節點中的html內容

12.click()方法可以回應滑鼠點擊事件

13. keyup()方法可以回應鍵盤彈起的事件。

14.$.get()方法可以和伺服器端進行get方式的交互，註冊的callback方法會再資料回來的時候被調用，這個方法會接收到代表伺服器端返回資料的一個純文字的參數

15.addClass() removeClass()方法可以為某個節點新增或刪除一個class

16.傳送給伺服器端的資料在javascript中做兩次encodeURI，然後在伺服器端的程式碼中按UTF-8的方式做一次URLDecode，可以解決中文亂碼問題。

相關專題推薦：《jquery實戰影片》

第二講

本節學到的JQuery及其他開發知識：

1.table中可以包含thead和tbody

可以放到th中

3.table{}這種寫法稱為標籤選擇器，可以對整個頁面所有table產生影響。

4.table td{}這種寫法表示的是table中包含的所有td。

5.可以透過border-collapse: collapse這種方式來使表格中的單元格的邊框合併。

6.當th上由背景色時，這個th屬於的tr上定義的背景色會無效。

7.$(function(){})是$(document).ready(function(){})的簡化寫法

8.$(“tbody tr”)可以傳回tbody中的所有tr節點

9.$(“tbody tr:even”)可以傳回tbody中所有索引值是偶數的tr節點

10.css方法可以用來設定或取得節點的css屬性，參數名稱是css的屬性名稱。

11.JQuery的物件內容包含著選擇器對應的DOM節點，以數組形式保存

12.get方法可以獲得JQuery物件中包含的某一個DOM節點

13.function中的this代表執行這個function的物件

14.$()方法的參數是一個DOM物件時，這個方法相當於把DOM物件轉換成JQuery物件。

15.children方法可以獲得某個節點的子節點，可以製定參數來限制子節點的內容。

16.如果選擇器回傳的JQuery物件包含多個DOM節點，在這個物件上註冊類似click這樣的事件時，所有DOM節點都會用於事件

17.html方法可以設定或取得節點的HTML內容

18.val方法可以取得或設定節點的value值

19.$()方法的參數如果是一段正確的HTML文本，則可以建立一個DOM節點，並包裝成JQuery物件

20.JQuery大部分方法都會傳回執行這個方法的JQuery對象，因此可以採用鍊式方法的寫法來寫給予JQuery的程式碼。

21.width方法可以設定或取得某個節點的寬度

22.appendTo方法可以將一個節點追加到另一個節點所有子節點的後面

23.阻止事件傳遞可以讓當前節點的事件返回false

24.trigger方法可以觸發某個javascript的事件發生。

25.JQuery中某個事件方法的參數function上可以定義一個event的參數，JQuery會屏蔽瀏覽器的event差異，傳給我們一個可用的event物件

26.JQuery的event物件上有一個which的屬性可以獲得鍵盤按鍵的鍵值

27.13表示回車鍵，27表示ESC鍵

第三講

本節學到的JQuery及其他開發知識：

1.頁面中的選單項目可以透過嵌套的ul和li來表示

2.選單最外層為ul，一層每個主選單放在一個li中，如果有子選單，在這個主選單的li中建立新的ul，再依次嵌套即可建立多層的選單。

3.瀏覽器中ul和li元素預設情況下文字前都有圓點標識符，li元素會有縮排。 Opera瀏覽器比較特殊，li的識別字和其他瀏覽器不同。

4.list-style屬性值為none時，可以清除ul和li前面的小圓點

5.清除子選單的縮排值，需要padding和margin都為0，其中IE6和IE7只有margin也為0的時候才可以清除縮排值

6.可以使用background-image來指定一個元素的背景圖，如果背景圖比元素的實際大小要小，那麼背景圖會自動在橫向和縱向上重複顯示，知道填滿整個區域

7.可以使用bakcground-repeat來控制背景圖的重複填充方式。

8.如果一個元素上同時定義了背景圖和背景色，那麼有背景圖的地方是不會顯示背景色的

9.text-decoration屬性值為none時，可以取消文字上的下劃線

10.background-position可以控制背景圖的位置，屬性值既可以用數值，也可以用center，left,top這些值來控制橫向和縱向的位置。這個屬性的兩個值，第一個對應橫向，第二個對應縱向

11.background-image的值為none表示沒有背景圖

12.background-repeat的值為no-repeat時，背景圖不會在所在的區域重複顯示。

13.IE6以外的其他瀏覽器可以透過設定display的值為block來讓a元素充滿所在的區域。對於IE6，則需要設定display為inline-block，同時設定a的寬度。

14.display的值為none可以用來隱藏元素。

15. .main a和.main > a的不同之處，前者選擇使用了.main的這個class的元素內部所有的a節點，後者只選擇.main的子節點中的a節點

16 .show,hide方法可以用來顯示或隱藏元素，沒有參數時的效果和修改css的display屬性效果一樣。參數可以是單位為毫秒的數字，或是’slow’,’normal’,’fast’這三個文字，

都可以來控製完成顯示或隱藏所需的時間。注意這時動畫效果時靠著不斷改變元素的寬度和高度來實現的。

17.toggle方法更為強大，可以省去我們判斷元素是顯示還是隱藏的狀態，直接讓顯示的元素隱藏起來，隱藏的元素顯示出來。參數使用方法和show，hide相同。

18.slideDown，slideUp可以實現向下或向上捲動的效果，實際上是透過指定時間內修改元素的高度來實現動畫效果。要注意的是這兩個方法參數為空的情況和show，hide不同。

19.slideToggle和toggle達到的效果類似

20.DOCTYPE對於JQuery中的動畫是有影響的。當沒有DOCTYPE定義時，在IE中，JQuery的動畫會出現閃爍的糟糕效果。

21.float的值是left，可以使原本各自位於一行的元素全部在一行中向左浮動。

22.可以給多個選擇器定義同樣的樣式，選擇器之間用,分割。同樣對於JQuery的$方法，也可以傳入過個選擇器。

第四講

本節學到的JQuery及其他開發知識：

1.一組標籤用一個ul來管理，每一個標籤是ul中的一個li；標籤下面的內容就是用p來管理

2.跟在浮動元素（float）之後的元素會圍繞著浮動元素，如果不希望有這種圍繞，可以在浮動元素之後的那個元素上定義clear屬性，

3.實現當前標籤和內容區域的融合，可以透過使用相同的背景色，外加當前標籤使用同顏色的邊框來實現。

4.JQuery中的mouseover，mouseout方法對應標準javascript的onmouseover，onmouseout事件，可以處理滑鼠進入和離開的事件。

5.在一個包含了多個元素的JQuery物件上執行each方法，可以註冊給each方法的那個function的內容被每一個元素執行。同時這個

  function還可以接收到一個參數，表示這個元素的索引值。 JQuery中的許多方法也用到了each

6.eq方法可以根據索引值只得到JQuery物件中包含的多個元素中的某一個元素，並且仍然傳回元素對應的新JQuery物件。

7.選擇器中使用eq，例如$(“p:eq(1)”)

8.addClass和removeClass方法用於新增和移除元素的class定義。

9.Javascript中的setTimeout方法可以延時執行某些程式碼，對應的clearTimeout可以清除設定的延遲操作。

10.做一個AJAX應用的時候，可以考慮現在FireFox上調試通過，然後再到其他瀏覽器中進行檢查，並修正可能的兼容性問題。

11.cursor屬性可以控制元素上的滑鼠樣式，pointer的屬性值表示手型樣式，也就是我們常見的連結滑鼠樣式

12.position屬性可以控制元素定位的方式，值為relative時表示相對原來的位置進行定位。可以透過設定top，left，bottom，right的值來控制元素相對原來的位置進行移動

13.z-index可以控制元素在頁面中的層高，值越大就會在頁面的層越靠前，也會覆蓋住一些z-index值較低的元素。只有position的值為relative或absolute的元素，z-index才會生效。

14.JQuery中的load方法十分強大，可以把一個指定的靜態，動態頁面或伺服器端程式輸出的資料裝入到執行load方法的JQuery物件包裝的元素中。

15.load方法也支援部分裝載，在裝入的頁面位址後面加空格，然後使用選擇器，就可以把頁面中符合選擇器的部分裝進去。

16.被load的頁面一定要是UTF-8編碼的，否則裝入後中文會出現亂碼。

17.bind可以用來給指定的節點綁定Javascript的事件或JQuery中定義的事件。對於JQuery中沒有直接提供註冊方法的事件，可以用這種方式註冊。方法的第二個參數可以是事件執行的方法定義。

18.ajaxStart，ajaxStop對應ajax互動開始前和結束後的事件，給某一個節點註冊了這兩個事件後，當前頁面的ajax交互開始前和結束後，就會執行指定的方法。

第五講

1.img標籤的alt屬性要寫上，在圖片尚未裝載進來或圖片不存在時，這個屬性的文字訊息會顯示出來

2.select表示下拉框，下拉框的每一項都是一個option，option開始結尾標籤中的內容會顯示在頁面上，value屬性的值則是用於在JQuery中用val方法取得並傳送給伺服器的。

定義了selected的屬性值為selected時，表示當前option被選取

3.p元素居中顯示的方法：給p設定寬度，然後margin-left和margin-right的值都為auto。簡寫方法是margin: 0 auto;

4.html的p標籤表示一個段落的內容，其中的內容會獨佔一行或多行，後面的內容會另起一行顯示

5.為了讓p中文字和圖片居中，可以使用text-align屬性，屬性值為center。 p標籤預設有margin-top和margin-bottom的值，需要的話可以透過css清除

6.visibility的屬性值為hidden時，元素隱藏，但是和display為none不同的時，在頁面中任然佔據一定空間，只是不顯示

7.多個選擇器如果有相同的屬性值，可以放在一起定義，選擇器之間用逗號分割

8.change方法對應標準Javascript中的onchange事件，可以處理下拉框內容變化的事件

9.parent方法可以獲得一個節點的父節點

10.next方法可以獲得一個節點的下一個兄弟節點，對應的previous方法可以獲得一個節點的上一個兄弟節點

11.$.post方法可以和伺服器端發起post的非同步請求。第一個參數是請求的伺服器端位址，第二個參數是發送給伺服器端的數據，參數是Javascript的對象，採

用名值對的方式表示，第三個參數是回調方法，第四個參數指示伺服器端回傳的資料類型，JQuery會根據這個參數幫我們進行轉換。 get方法只有第二個參數不同，其他幾個參數用法相同

12.Javascript中的簡單物件定義方式是{key1: value1, key2: value2}

13.JSON的資料格式其實就是Javascript中的一個物件或資料定義的文字格式內容，例如{key1: value1, key2: [1,2,3]}或[1,2,{key2: value2}]

14.可以直接$(“”)的方法來建立下拉框中的選項，然後用appendTo這樣的方法加入到下拉框中

15.attr方法可以設定或取得某一個節點的屬性值

16.ajaxStart在每一個JQuery發出的ajax請求開始前執行，ajaxStop在JQuery佇列中所有的ajax請求結束後執行，ajaxComplete在每個JQuery發出的ajax請求結束後執行

17.fadeOut和fadeIn可以實現淡出淡入的效果，參數內容和slideUp，slideDown方法類似。

18.animate方法可以實現任意的動畫效果，可以控制某個css屬性在某個時間內進行變化，從而達到動畫的效果

19.opacity可以改變元素的透明度，IE中使用過濾器實現， 100表示​​完全顯示，0表示完全透明，非IE瀏覽器使用opacity屬性，1表示完全顯示，0表示透明。 JQuery在animate方法

中屏蔽了瀏覽器差異，直接使用opacity就可以達到淡入淡出的效果。

20.data方法可以用於快取資料。快取可以提高系統的運作效率，降低伺服器端的負載

21.可以使用Javascript中的Image物件來預先裝載圖片，這樣可以知道圖片何時裝載完成，以便給出一些圖片裝載的提示資訊。

22.load方法可以對應Javascript中的onload事件，本例中用於捕捉圖片載入完成的事件

第六講

本節學到的JQuery及其他開發知識：

1.頁面中模擬的視窗可以透過html的p標籤來實現，視窗中的標題列和內容區域可以再分別用一個p來表示

2.讓一組p看起來是視窗的樣式，有很多種方法，例如可以設定整個視窗使用一種背景色，然後內容區域使用另一種背景色，並且

給視窗設定一定的padding值（或是內容區域設定邊框），已達到內容區域和標題列以後視窗外邊的對比，從而看起來是一個視窗的效果。

3.正確理解float的效果，實際上會影響到後面的一個元素和float的元素之間的顯示效果，因此這個例子中如果html代碼中img位於標題欄的最後時，float: right導致圖片跑到了內容區

域的最右邊。只有在html裡面將img放到標題列文字的前面，這個時候float: right才會使圖片剛好位於標題列的最右邊

4.overflow屬性值為auto時，當內容區域很多超過了定義的高度或寬度時，就會顯示捲軸。

本節學到的JQuery及其他開發知識：

5.position屬性值為absolute時，元素將在頁面中絕對定位，預設情況是相對頁面的左上角進行定位。如果祖先節點中有position: relative的定義，則相對這個祖先節點的左上角進行定位

6.瀏覽器可視區域的寬和高可以透過$(window).width()和$(window). height()的方式來獲得

7.瀏覽器捲軸的左邊界和上邊界可以透過$(window).scrollLeft()和$(window).scrollTop()來獲得

8.視窗定位到螢幕可視區域的正中間，需要用視窗定位到螢幕視覺區域的正中間，需要用螢幕可視區域的寬減去視窗的寬，然後除2，再加上捲軸的左邊界值，才能獲得視窗需

要的左邊界值；上邊界值也是同理的方法獲得。

9.插件的編寫方法：$.fn.myplugin =  function(){//mycode},方法中的this表示的是執行這個方法的jquery對象，注意方法應該在最後return this,以保證其他jquery方法可以級聯操作。

10. instanceof可以用來判斷一個變數是不是某個js類別的實例，例如判斷是不是一個Object，用法obj instanceof Object

11. typeof可以用來判斷一個變數的資料型別，例如typeof str == “string”

12.height()和width()方法獲得是元素本身的高和寬，innerHeight()和innerWidth()獲得是包括了padding的高和寬，outerHeight()和outerWidth()獲得是包含了border和padding的

高和寬，outerHeight(true)和outerWidth(true)獲得是包括maring，border和padding的高和寬

13.scroll可以用於註冊瀏覽器或某一個節點的滾動條滾動所需要執行的操作。

14.resize可以用來註冊瀏覽器大小改變時所需要執行的動作。

15.jquery提供的事件操作在註冊的時候是增量的，比如說我有兩段程式碼都是$(window).scroll(function(){})，第二段的function內容不會覆蓋到第一段，而是在scroll時，兩段程式碼都被執行

16.animate方法可以對left，top值進行一定時間內的變化，達到動畫的效果。

17.dequeue方法可以從動畫隊列的開頭移除一個動畫效果，並立即執行它。這樣可以確保佇列後面的動畫不用等待開頭的動畫，也能執行。

18.is方法可以用來判斷一個物件是否滿足is方法參數中的jquery選擇器

19. :visible選擇器可以用來取得頁面中的可見元素

20.瀏覽器間的差異導致在document.ready中中的程式碼獲得瀏覽器視覺區域寬高以及滾動條left，top的值不一定都是正確的，因此我們需要保證在這個方法完成之後再來獲得這些值。

21.$.browser可以用來判斷瀏覽器的類型，判斷的方法可以是$.browser.msie == true，也可以使用的值包含$.browser.opera$.browser.safari $.browser. mozilla

22.$.browser.version可以判斷瀏覽器的版本號，例如$.browser.version.indexOf(“8”)

以上是JQuery實戰教學源碼免費下載的詳細內容。更多資訊請關注PHP中文網其他相關文章！