首頁 > web前端 > js教程 > 主體

JQuery實戰教學源碼免費下載

發布: 2019-10-09 15:04:58
原創
2637 人瀏覽過

下載地址: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.可以直接$(“

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!