jquery從入門到精通圖書光盤的開發(fā)技巧

1、Web應(yīng)用開發(fā)概述Web應(yīng)用開發(fā)概述Web應(yīng)用開發(fā)概述jQuery的開發(fā)技巧快速控制頁面元素調(diào)用jQuery中的方法靈活使用jQuery中的事件 常用自定義方法小 結(jié) 綜合實(shí)例:實(shí)現(xiàn)我的開心小農(nóng)場 小 結(jié) 其他開發(fā)技巧與方法06小 結(jié) 快速控制頁面元素101獲取鼠標(biāo)位置02居中顯示元素獲取鼠標(biāo)位置 很多時候，我們需要實(shí)現(xiàn)當(dāng)用戶在界面中，鼠標(biāo)滑過圖片時，需要捕獲鼠標(biāo)的位置，繼而實(shí)現(xiàn)后面的功能。下面通過一個實(shí)例來具體說明該功能的實(shí)現(xiàn)。居中顯示元素 在實(shí)際應(yīng)用中，我們經(jīng)常需要將元素居中顯示在屏幕中央，不管是相對窗口水平方向還是垂直方向都是居中的。如常見的論壇彈出登錄窗口的居中顯示，jQuery中的燈

2、具效果等等。$.fn.center = function() this.css(position,absolute); this.css(top,($(window).height() - this.height()/2 + $(window).scrollTop()+px); this.css(left,($(window).width() - this.width()/2 + $(window).scrollLeft()+px); return this;調(diào)用jQuery中的方法201使用預(yù)加載方法預(yù)覽圖片通過html()方法判斷元素是否為空03延遲加載圖片02使用預(yù)加載方法預(yù)覽圖片 在日

3、常Web開發(fā)中，為了提高圖片加載速度，需要用到圖片預(yù)加載的技術(shù)，這樣圖片的顯示和切換就顯得流暢，這樣做在一定程度上可以提升用戶體驗(yàn)。 預(yù)加載是指圖片在顯示之前瀏覽器已經(jīng)完成了對圖片的下載和緩存，因此圖片經(jīng)過預(yù)加載后，再進(jìn)行顯示，速度和體驗(yàn)都會得到很好的提升。延遲加載圖片 與上一節(jié)講解的預(yù)加載圖片相反，我們在多圖片的網(wǎng)站，如淘寶、拍拍這些圖片較多的網(wǎng)站，若將頁面的圖片全部加載出來，如果用戶的網(wǎng)絡(luò)狀況不佳，就會導(dǎo)致頁面加載速度變慢的問題。尤其是在首頁，這樣會使用戶體驗(yàn)感下降，此時我們可以使用LazyLoad這款插件來實(shí)現(xiàn)圖片的延遲加載。通過html()方法判斷元素是否為空 在jQuery中，htm

4、l()方法可以用來設(shè)置元素的HTML內(nèi)容，也可以用來獲取元素的HTML內(nèi)容。而html()方法實(shí)質(zhì)上還可以檢測一個元素是否為空。$container = $(#container);if($container.html() alert($container.html();$container = $(#container);if($container.length 0) alert($container.html(); 雖然使用元素的html()方法和lenth屬性都可以檢測元素是否存在，但兩者間存在一個很大差別就是，使用html()方法不僅可以檢測元素是否存在，還可以查看元素中是否包含內(nèi)容，

5、而length屬性只判斷元素是否在頁面中存在，而不檢測其內(nèi)容。靈活使用jQuery中的事件3屏蔽鼠標(biāo)右鍵菜單 在jQuery中實(shí)現(xiàn)屏蔽鼠標(biāo)右鍵菜單這一功能非常簡單，只需要在頁面的“contextmenu”事件中返回false值即可。限制文本輸入框中輸入字符的個數(shù) 在常見的Web頁面開發(fā)時，通常都要限制文本框或文本域的接收字符的數(shù)量。例如論壇的留言輸入框、微博輸入框等等。本節(jié)我們將完成一個限制文本輸入框中字符數(shù)量的功能。 常用自定義方法401自定義選擇器02自定義樣式自定義選擇器 選擇器是jQuery中的一個明顯特征，也是jQuery中的利器，使用它可以靈活的選擇和獲取元素。但如若想要更詳細(xì)的選

6、擇器功能，還需要自定義選擇器來實(shí)現(xiàn)。自定義樣式 jQuery中除了可以自定義選擇器之外，也可以自定義頁面的整體風(fēng)格。通常做法是將頁面的樣式定義在一個CSS樣式文件中，當(dāng)頁面加載時，在元素中使用標(biāo)簽導(dǎo)入該CSS文件。因此，使用jQuery代碼控制標(biāo)簽中導(dǎo)入的文件名稱就可以實(shí)現(xiàn)自定義選擇頁面樣式的功能。其他開發(fā)技巧與方法501隱藏搜索文本框文字統(tǒng)計元素個數(shù)03返回頁面頂部02隱藏搜索文本框文字 在實(shí)際開發(fā)中，有時需要在文本框獲取焦點(diǎn)時，隱藏文本框內(nèi)容，光標(biāo)離開時，再顯示文本框的內(nèi)容，例如實(shí)現(xiàn)搜索功能的文本框。 獲取焦點(diǎn)時失去焦點(diǎn)時統(tǒng)計元素個數(shù) 如果要統(tǒng)計頁面當(dāng)中某一元素的個數(shù)，可以使用size()函數(shù)來實(shí)現(xiàn)。該函數(shù)返回被jQuery選擇器匹配的元素的數(shù)量。$(selector).size()小 結(jié)6 本章介紹了很多在使用jQuery時的開