JQuery實戰教學源碼

共6個章節，JQuery實戰源碼。

第一講：

本節學到的JQuery及其他開發知識：
1.HTML負責頁面內容，CSS負責頁面樣式，Javascript負責頁面行為
2.HTML中應該有DOCTYPE來告知瀏覽器的渲染顯示方式
3.可以先定義div或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及其他開發知識：
1.table中可以包含thead和tbody
2.表頭的內容可以放到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；標籤下面的內容就是用div來管理
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，例如$(“div: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.div元素居中顯示的方法：給div設定寬度，然後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.可以直接$(“<option></option>”)的方法來建立下拉框中的選項，然後用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的div標籤來實現，視窗中的標題列和內容區域可以再分別用一個div來表示
2.讓一組div看起來是視窗的樣式，有很多種方法，例如可以設定整個視窗使用一種背景色，然後內容區域使用另一種背景色，並且
為視窗設定一定的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”)