JavaScript客戶端框架JQuery開發(fā)入門_第1頁
JavaScript客戶端框架JQuery開發(fā)入門_第2頁
JavaScript客戶端框架JQuery開發(fā)入門_第3頁
JavaScript客戶端框架JQuery開發(fā)入門_第4頁
JavaScript客戶端框架JQuery開發(fā)入門_第5頁
已閱讀5頁，還剩40頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

JavaScript客戶端框架-jQuery開發(fā)入門

第一章JQuery開發(fā)入門教學(xué)目的：使學(xué)生掌握J(rèn)Query的開發(fā)方法?；疽螅毫私馐裁词荍Query，掌握J(rèn)Query的開發(fā)方法，掌握使用JQuery開發(fā)簡單應(yīng)用的方法。重點(diǎn)與難點(diǎn)：JQuery開發(fā)簡單應(yīng)用的方法。VisualStudio2010開發(fā)環(huán)境1.開發(fā)環(huán)境介紹2.項(xiàng)目文件構(gòu)成介紹第一節(jié)課1.幾個(gè)案例1）jquery-lightbox-0.52）基于jQuery焦點(diǎn)圖片新聞代碼（JS+CSS）3）.中國地圖/pins/demoshow/20304）jquery插件合集之圖片裁剪

/demo/cropZoom/2.JQuery概述jQuery是一個(gè)兼容多瀏覽器的javascript庫，核心理念是writeless,domore(寫的更少,做的更多)。jQuery在2006年1月由美國人JohnResig在紐約的barcamp發(fā)布，吸引了來自世界各地的眾多javascript高手加入，現(xiàn)在由DaveMethvin率領(lǐng)團(tuán)隊(duì)進(jìn)行開發(fā)。如今，jQuery已經(jīng)成為最流行的javascript庫，在世界前10000個(gè)訪問最多的網(wǎng)站中，有超過55%在使用jQuery。?jQuery是免費(fèi)、開源的，使用MIT許可協(xié)議。jQuery的語法設(shè)計(jì)可以使開發(fā)者更加便捷，例如操作文檔對(duì)象、選擇DOM元素、制作動(dòng)畫效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開發(fā)者編寫插件。其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)態(tài)網(wǎng)頁。jQuery庫-特性jQuery是一個(gè)JavaScript函數(shù)庫。jQuery庫包含以下特性：HTML元素選取HTML元素操作CSS操作HTML事件函數(shù)JavaScript特效和動(dòng)畫HTMLDOM遍歷和修改AJAXUtilities版本演進(jìn)：jQuery1.0（2006年8月）：該庫的第一個(gè)穩(wěn)定版本，已經(jīng)具有了對(duì)CSS選擇符、事件處理和AJAX交互的穩(wěn)健支持。jQuery1.1（2007年1月）：這一版大幅簡化了API。許多較少使用的方法被合并，減少了需要掌握和解釋的方法數(shù)量。jQuery1.1.3（2007年7月）：這次小版本變化包含了對(duì)jQuery選擇符引擎執(zhí)行速度的顯著提升。從這個(gè)版本開始，jQuery的性能達(dá)到了Prototype、Mootools以及Dojo等同類JavaScript庫的水平。jQuery1.2（2007年9月）：這一版去掉了對(duì)XPath選擇符的支持，原因是相對(duì)于CSS語法它已經(jīng)變得多余了。這一版能夠支持對(duì)效果的更靈活定制，而且借助新增的命名空間事件，也使插件開發(fā)變得更容易。jQueryUI（2007年9月）：這個(gè)新的插件套件是作為曾經(jīng)流行但已過時(shí)的Interface插件的替代項(xiàng)目而發(fā)布的。jQueryUI中包含大量預(yù)定義好的部件（widget），以及一組用于構(gòu)建高級(jí)元素（例如可拖放的界面元素）的工具。jQuery1.2.6（2008年5月）：這一版主要是將BrandonAaron開發(fā)的流行的Dimensions插件的功能移植到了核心庫中。jQuery1.3（2009年1月）：這一版使用了全新的選擇符引擎Sizzle，庫的性能也因此有了極大提升。這一版正式支持事件委托特性。jQuery1.3.2（2009年2月）：這次小版本升級(jí)進(jìn)一步提升了庫的性能，例如改進(jìn)了：visible/:hidden選擇符、.height()/.width()方法的底層處理機(jī)制。另外，也支持查詢的元素按文檔順序返回。jQuery1.4（2010年1月14號(hào))對(duì)代碼庫進(jìn)行了內(nèi)部重寫組織，開始建立一些風(fēng)格規(guī)范。老的core.js文件被分為attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js；CSS和attribute的邏輯分離。jQuery1.5（2011年1月31日）：該版本修復(fù)了83個(gè)bug，解決了460個(gè)問題。重大改進(jìn)有：重寫了Ajax模塊；新增延緩對(duì)象（DeferredObjects）；jQuery替身——jQuery.sub()；增強(qiáng)了遍歷相鄰節(jié)點(diǎn)的性能；jQuery開發(fā)團(tuán)隊(duì)構(gòu)建系統(tǒng)的改進(jìn)。2012年03月24日jQuery1.7.2正式版發(fā)布。2012年11月14日jQuery1.8.3發(fā)布，修復(fù)bug和性能衰退問題2013-01jQuery1.92013年4月18日jQuery2.0正式版發(fā)布3.JQuery的簡單應(yīng)用jQuery庫是一個(gè)單獨(dú)的javascript文件，可以保存到本地或者服務(wù)器直接引用，也可以從多個(gè)公共服務(wù)器中選擇引用。有MediaTemple、Google、Microsoft等多家公司給jQuery提供CDN服務(wù)，比較常用的引用地址如下<scripttype="text/javascript"src="/ajax/libs/jquery/1.8/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){//scriptgoeshere});</script>或者其簡寫$(function(){//scriptgoeshere});當(dāng)dom加載完就可以執(zhí)行（比window.onload更早）。在同一個(gè)頁面里可以多次出現(xiàn).ready()；注意到在我們的實(shí)例中的所有jQuery

函數(shù)位于一個(gè)documentready函數(shù)中：這是為了防止文檔在完全加載（就緒）之前運(yùn)行jQuery

代碼。實(shí)例

為元素添加單擊事件，發(fā)生對(duì)象隱藏效果<html><head><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>Ifyouclickonme,Iwilldisappear.</p></body></html>jQuery使用$符號(hào)作為jQuery的簡潔方式。某些其他JavaScript庫中的函數(shù)（比如Prototype）同樣使用$符號(hào)。4.如何把jQuery添加到網(wǎng)頁

1)方案一：如需使用jQuery，需要下載jQuery庫（會(huì)在下面為講解），然后把它包含在希望使用的網(wǎng)頁中。jQuery庫是一個(gè)JavaScript文件，可以使用HTML的<script>標(biāo)簽引用它：<head><scriptsrc="jquery.js"></script></head>請(qǐng)注意，<script>標(biāo)簽應(yīng)該位于頁面的<head>部分。2）方案二（替代方案）如果不希望下載并存放jQuery，那么也可以通過CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）引用它。谷歌和微軟的服務(wù)器都存有jQuery。如需從谷歌或微軟引用jQuery，請(qǐng)使用以下代碼之一：提示：使用谷歌或微軟的jQuery，有一個(gè)很大的優(yōu)勢(shì)：許多用戶在訪問其他站點(diǎn)時(shí)，已經(jīng)從谷歌或微軟加載過jQuery。所有結(jié)果是，當(dāng)他們?cè)L問您的站點(diǎn)時(shí)，會(huì)從緩存中加載jQuery，這樣可以減少加載時(shí)間。同時(shí)，大多數(shù)CDN都可以確保當(dāng)用戶向其請(qǐng)求文件時(shí)，會(huì)從離用戶最近的服務(wù)器上返回響應(yīng)，這樣也可以提高加載速度。5.如何使用jQueryIntellisense

6.一些案例<!DOCTYPEhtml><html><head><scriptsrc="http:///ajax/libs/jquery/1.8.3/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});});</script></head><body><pid="p1">如果點(diǎn)擊“隱藏”按鈕，我就會(huì)消失。</p><buttonid="hide"type="button”>隱藏</button><buttonid="show"type="button">顯示</button></body></html><!DOCTYPEhtml><html><head><scriptsrc="http:///ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);});});</script></head><body><p>演示帶有不同參數(shù)的fadeIn()方法。</p><button>點(diǎn)擊這里，使三個(gè)矩形淡入</button><br><br><divid="div1"style="width:80px;height:80px;display:none;background-color:red;"></div><br><divid="div2"style="width:80px;height:80px;display:none;background-color:green;"></div><br><divid="div3"style="width:80px;height:80px;display:none;background-color:blue;"></div></body></html><!DOCTYPEhtml><html><head><scriptsrc="http:///ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000);});});</script></head><body><p>演示帶有不同參數(shù)的fadeToggle()方法。</p><button>點(diǎn)擊這里，使三個(gè)矩形淡入淡出</button><br><br><divid="div1"style="width:80px;height:80px;background-color:red;"></div><br><divid="div2"style="width:80px;height:80px;background-color:green;"></div><br><divid="div3"style="width:80px;height:80px;background-color:blue;"></div></body></body></html>附加：單獨(dú)文件中的函數(shù)

如果您的網(wǎng)站包含許多頁面，并且您希望您的jQuery函數(shù)易于維護(hù)，那么請(qǐng)把您的jQuery函數(shù)放到獨(dú)立的.js文件中。第二節(jié)課幾個(gè)常用動(dòng)畫函數(shù)jQueryCallbackJQueryChaining一、幾個(gè)常用動(dòng)畫函數(shù)

1.jQuery滑動(dòng)方法通過jQuery，可以在元素上創(chuàng)建滑動(dòng)效果。jQuery擁有以下滑動(dòng)方法：slideDown()slideUp()slideToggle()1）jQueryslideDown()方法jQueryslideDown()方法用于向下滑動(dòng)元素。語法：$(selector).slideDown(speed,callback);可選的speed參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast"或毫秒。可選的callback參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱。<scriptsrc="http:///ajax/libs/jquery/1.8.3/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$(".flip").click(function(){$(".panel").slideDown("slow");});});</script>

<styletype="text/css">div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid1px#c3c3c3;}div.panel{height:120px;display:none;}<body>

<divclass="panel"><p>點(diǎn)擊觀看</p><p>領(lǐng)略下拉效果的魅力</p></div>

<pclass="flip">請(qǐng)點(diǎn)擊這里</p>

</body></html>2）jQueryslideUp()方法jQueryslideUp()方法用于向上滑動(dòng)元素。語法：$(selector).slideUp(speed,callback);可選的speed參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast"或毫秒?？蛇x的callback參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱。<scriptsrc="http:///ajax/libs/jquery/1.8.3/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$(".flip").click(function(){$(".panel").slideUp("slow");});});</script><styletype="text/css">div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid1px#c3c3c3;}div.panel{height:120px;}</style></html><body><divclass="panel"><p>W3School-領(lǐng)先的Web技術(shù)教程站點(diǎn)</p><p>在W3School，你可以找到你所需要的所有網(wǎng)站建設(shè)教程。</p></div>

<pclass="flip">請(qǐng)點(diǎn)擊這里</p>

</body>3）jQueryslideToggle()方法jQueryslideToggle()方法可以在slideDown()與slideUp()方法之間進(jìn)行切換。如果元素向下滑動(dòng)，則slideToggle()可向上滑動(dòng)它們。如果元素向上滑動(dòng)，則slideToggle()可向下滑動(dòng)它們。$(selector).slideToggle(speed,callback);可選的speed參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast"或毫秒?？蛇x的callback參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱。<scriptsrc="http:///ajax/libs/jquery/1.8.3/jquery.min.js"></script><scripttype="text/javascript">$(document).ready(function(){$(".flip").click(function(){$(".panel").slideToggle("slow");});});</script><styletype="text/css">div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid1px#c3c3c3;}div.panel{height:120px;display:none;}</style><body><divclass="panel"><p>W3School-領(lǐng)先的Web技術(shù)教程站點(diǎn)</p><p>在W3School，你可以找到你所需要的所有網(wǎng)站建設(shè)教程。</p></div>

<pclass="flip">請(qǐng)點(diǎn)擊這里</p>

</body>2.jQuery動(dòng)畫-animate()方法jQueryanimate()方法用于創(chuàng)建自定義動(dòng)畫。語法：$(selector).animate({params},speed,callback);必需的params參數(shù)定義形成動(dòng)畫的CSS屬性。可選的speed參數(shù)規(guī)定效果的時(shí)長。它可以取以下值："slow"、"fast"或毫秒。可選的callback參數(shù)是動(dòng)畫完成后所執(zhí)行的函數(shù)名稱。<!DOCTYPEhtml><html><head><script

src="http:///ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("div").animate({left:'250px'});});});</script></head>

<body><button>開始動(dòng)畫</button><p>默認(rèn)情況下，所有HTML元素的位置都是靜態(tài)的，并且無法移動(dòng)。如需對(duì)位置進(jìn)行操作，記得首先把元素的CSSposition屬性設(shè)置為relative、fixed或absolute。</p><divstyle="background:#98bf21;height:100px;width:100px;position:absolute;"></div></body></html>1）jQueryanimate()-操作多個(gè)屬性請(qǐng)注意，生成動(dòng)畫的過程中可同時(shí)使用多個(gè)屬性：實(shí)例$("button").click(function(){$("div").animate({left:'250px',opacity:'0.5',height:'150px',width:'150px'});});同時(shí)，色彩動(dòng)畫并不包含在核心jQuery庫中。如果需要生成顏色動(dòng)畫，您需要從jQ下載ColorAnimations插件。提示：可以用animate()方法來操作所有CSS屬性嗎？是的，幾乎可以！不過，需要記住一件重要的事情：當(dāng)使用animate()時(shí)，必須使用Camel標(biāo)記法書寫所有的屬性名，比如，必須使用paddingLeft而不是padding-left，使用marginRight而不是margin-right，等等。2)jQueryanimate()-使用相對(duì)值也可以定義相對(duì)值（該值相對(duì)于元素的當(dāng)前值）。需要在值的前面加上+=或-=：實(shí)例$("button").click(function(){$("div").animate({left:'250px',height:'+=150px',width:'+=150px'});});3)jQueryanimate()-使用預(yù)定義的值您甚至可以把屬性的動(dòng)畫值設(shè)置為"show"、"hide"或"toggle"：實(shí)例$("button").click(function(){$("div").animate({height:'toggle'});});4)jQueryanimate()-使用隊(duì)列功能默認(rèn)地，jQuery提供針對(duì)動(dòng)畫的隊(duì)列功能。這意味著如果您在彼此之后編寫多個(gè)animate()調(diào)用，jQuery會(huì)創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊(duì)列。然后逐一運(yùn)行這些animate調(diào)用。實(shí)例1隱藏，如果您希望在彼此之后執(zhí)行不同的動(dòng)畫，那么我們要利用隊(duì)列功能：$("button").click(function(){vardiv=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow");});3.jQuerystop()方法用于在動(dòng)畫或效果完成前對(duì)它們進(jìn)行停止。jQuerystop()方法用于停止動(dòng)畫或效果，在它們完成之前。stop()方法適用于所有jQuery效果函數(shù)，包括滑動(dòng)、淡入淡出和自定義動(dòng)畫。stop()方法適用于所有jQuery效果函數(shù)，包括滑動(dòng)、淡入淡出和自定義動(dòng)畫。語法$(selector).stop(stopAll,goToEnd);可選的stopAll參數(shù)規(guī)定是否應(yīng)該清除動(dòng)畫隊(duì)列。默認(rèn)是false，即僅停止活動(dòng)的動(dòng)畫，允許任何排入隊(duì)列的動(dòng)畫向后執(zhí)行?？蛇x的goToEnd參數(shù)規(guī)定是否立即完成當(dāng)前動(dòng)畫。默認(rèn)是false。因此，默認(rèn)地，s

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論