1、,,,講師：張迪,網(wǎng)頁(yè)設(shè)計(jì)(專業(yè)必修課),2017,,,,,Jquery框架入門,第十二課,,,,,,上節(jié)內(nèi)容回顧,Javascript基礎(chǔ)Javascript概念和歷史問(wèn)答：javascript和java有什么關(guān)系？問(wèn)答：javascript有哪三個(gè)重要的組成部分？ECMAScript語(yǔ)法問(wèn)答： ECMAScript與其他編程語(yǔ)言相比，主要的不同是什么？ 問(wèn)答： 調(diào)試代碼時(shí)查看變量值，有哪兩種主要方法？,

2、,,上節(jié)內(nèi)容回顧,DOM問(wèn)答：什么是DOM？問(wèn)答：如何通過(guò)DOM控制獲取標(biāo)簽元素，并修改其內(nèi)容？BOM問(wèn)答：什么是BOM？問(wèn)答：BOM都提供哪些主要方法？,Javascript學(xué)習(xí)方法,Javascript畢竟是一種編程語(yǔ)言。內(nèi)容較繁雜。不容易一次掌握。但它又是前端面試必考內(nèi)容。如何快速掌握該語(yǔ)言特性呢？一方面要學(xué)習(xí)基礎(chǔ)理論知識(shí)，建議采用思維導(dǎo)圖的方式來(lái)進(jìn)行梳理。例如：http://www.cnblogs

3、.com/coco1s/p/3953653.html另一方面，要以實(shí)際項(xiàng)目為出發(fā)點(diǎn)，進(jìn)行練習(xí)。而不是停留在看書(shū)、做課后題的水平上。,,Jquery框架概述,PART 01,,,,Why Jquery,JavaScript的出現(xiàn)使得網(wǎng)站和訪問(wèn)者之間實(shí)現(xiàn)了實(shí)時(shí)的、動(dòng)態(tài)的和交互的關(guān)系，但由于不同的瀏覽器對(duì)JavaScript的支持和實(shí)現(xiàn)程度不同，導(dǎo)致為了使得網(wǎng)頁(yè)中的JavaScript代碼兼容所有的瀏覽器，開(kāi)發(fā)人員要做大量的工作。為了簡(jiǎn)

4、化JavaScript的開(kāi)發(fā)，2000年以來(lái)，涌現(xiàn)了許多JavaScript框架，比較有代表性的包括YUI、ExtJS、 Prototype等。 jQuery作為一個(gè)2006年誕生的開(kāi)源框架，后來(lái)者居上， 已經(jīng)成為最常用的JavaScript類庫(kù)。,Jquery history,jQuery是是由美國(guó)人John Resig于2006年1月創(chuàng)建的一個(gè)開(kāi)源項(xiàng)目。它的主旨是：Write less, do more2007年， jQuery

5、1.1.3版本發(fā)布，支持通過(guò)CSS選擇符的方式選擇DOM元素，同時(shí)提供Ajax交互。并且jQuery選擇符引擎執(zhí)行速度的顯著提升。2009年以后，由于jquery簡(jiǎn)單易用，jquery已經(jīng)成為國(guó)內(nèi)外web開(kāi)發(fā)的標(biāo)配類庫(kù)。,Jquery 的優(yōu)勢(shì),早期JavaScript本身存在三個(gè)弊端：即復(fù)雜的文檔對(duì)象模型（DOM）、不一致的瀏覽器實(shí)現(xiàn)缺乏便捷的開(kāi)發(fā)、調(diào)試工具。而jQuery則是JavaScript的一個(gè)類庫(kù)，jQuery封裝

6、了很多預(yù)定義的對(duì)象和使用函數(shù)，能幫助使用者很輕松的建立有高難度交互的頁(yè)面。尤其是基于CSS選擇器的DOM選擇機(jī)制，改善了原生javascript的DOM接口不好用的問(wèn)題兼容各大瀏覽器，改善了瀏覽器實(shí)現(xiàn)不一致的問(wèn)題,Jquery 的主要功能,快速獲取文檔元素jQuery的選擇機(jī)制構(gòu)建于Css的選擇器，它提供了快速查詢DOM文檔中元素的能力，而且大大強(qiáng)化了JavaScript中獲取頁(yè)面元素的方式。提供漂亮的頁(yè)面動(dòng)態(tài)效果jQuery中

7、內(nèi)置了一系列的動(dòng)畫效果，可以開(kāi)發(fā)出非常漂亮的網(wǎng)頁(yè)，許多網(wǎng)站都使用jQuery的內(nèi)置的效果，比如淡入淡出、元素移除等動(dòng)態(tài)特效。,Jquery 的主要功能,創(chuàng)建AJAX無(wú)刷新網(wǎng)頁(yè)AJAX是異步的JavaScript和ML的簡(jiǎn)稱，可以開(kāi)發(fā)出非常靈敏無(wú)刷新的網(wǎng)頁(yè)，特別是開(kāi)發(fā)服務(wù)器端網(wǎng)頁(yè)時(shí)，比如PHP網(wǎng)站，需要往返地與服務(wù)器通信，如果不使用AJAX，每次數(shù)據(jù)更新不得不重新刷新網(wǎng)頁(yè)，而使用AJAX特效后，可以對(duì)頁(yè)面進(jìn)行局部刷新，提供動(dòng)態(tài)的效果。

8、提供對(duì)JavaScript語(yǔ)言的增強(qiáng)jQuery提供了對(duì)基本JavaScript結(jié)構(gòu)的增強(qiáng)，比如元素迭代和數(shù)組處理等操作。,Jquery 的主要功能,提供對(duì)JavaScript語(yǔ)言的增強(qiáng)jQuery提供了對(duì)基本JavaScript結(jié)構(gòu)的增強(qiáng)，比如元素迭代和數(shù)組處理等操作。增強(qiáng)的事件處理jQuery提供了各種頁(yè)面事件，它可以避免程序員在HTML中添加太事件處理代碼，最重要的是，它的事件處理器消除了各種瀏覽器兼容性問(wèn)題。更改網(wǎng)頁(yè)內(nèi)

9、容jQuery可以修改網(wǎng)頁(yè)中的內(nèi)容，比如更改網(wǎng)頁(yè)的文本、插入或者翻轉(zhuǎn)網(wǎng)頁(yè)圖像，jQuery簡(jiǎn)化了原本使用JavaScript代碼需要處理的方式,,Jquery框架基礎(chǔ)應(yīng)用,PART 01,,,,Jquery框架的版本介紹,目前jQuery有三個(gè)大版本：1.x：兼容ie678，使用最為廣泛的，官方只做BUG維護(hù)，功能不再新增。最終版本：1.12.4 (2016年5月20日)2.x：不兼容ie678，很少有人使用，官方只做BUG維護(hù)，

10、功能不再新增。最終版本：2.2.4 (2016年5月20日)3.x：不兼容ie678，只支持最新的瀏覽器。目前該版本是官方主要更新維護(hù)的版本。,Jquery框架文件的引入,方法一：下載后使用jquery.js文件先從官網(wǎng)jquery.com上下載jquery的js文件。在自己的項(xiàng)目里，新建一個(gè)叫js的文件夾在在需要使用jQuery的網(wǎng)頁(yè)頭部引入該js文件，例如：方法二：使用內(nèi)容分發(fā)網(wǎng)絡(luò)CDN來(lái)獲取jquery.js文件，例

11、如：,初級(jí)應(yīng)用案例,$(document).ready(function(){$("p").click(function(){ $(this).hide(); });}),在jQuery程序中，使用最多的莫過(guò)于“$”美元符了，$就是jQuery對(duì)象的一個(gè)簡(jiǎn)寫格式。要使用jquery對(duì)象中定義的方法，無(wú)論是頁(yè)面元素的選擇，還是功能函數(shù)的前綴都必須使用該符號(hào)，可以說(shuō)它是jQuery程序的標(biāo)志。,,h

12、ttp://www.runoob.com/try/try.php?filename=tryjquery_hide,初級(jí)應(yīng)用案例,$(document).ready(function(){$("p").click(function(){ $(this).hide(); });}),jQuery的基本語(yǔ)法是： $(selector).action()其中：美元符號(hào)代表 jQuery對(duì)象選

13、擇符（selector）"查詢"和"查找" HTML 元素jQuery 的 action() 執(zhí)行對(duì)元素的操作,,初級(jí)應(yīng)用案例,$(document).ready(function(){$("p").click(function(){ $(this).hide(); });}),$(document).ready(fn)函數(shù)，類似于JavaScript中的wi

14、ndow.onload，通過(guò)執(zhí)行匿名函數(shù)的方式，啟動(dòng)其內(nèi)部的代碼。不同之處在于：$(document).ready()在頁(yè)面框架加載完畢后就執(zhí)行；而且它可以寫很多個(gè)。,,初級(jí)應(yīng)用案例,$(document).ready(function(){$("p").click(function(){ $(this).hide(); });}),$(“p”).click(function(){…})就是一個(gè)

15、典型的jQuery語(yǔ)句。其意義是：查找到名為p的標(biāo)簽，給它賦予一個(gè)點(diǎn)擊事件clickclick里頭有要執(zhí)行的函數(shù),,初級(jí)應(yīng)用案例,$(document).ready(function(){$("p").click(function(){ $(this).hide(); });}),$(this).hide();這也是一個(gè)典型的jQuery語(yǔ)句。其意義是：This指代的是當(dāng)前元素，也就是p

16、標(biāo)簽。給它賦予一個(gè)action，名為hide()，其功能是隱藏該元素。,,,Jquery選擇器,PART 01,,,,Jquery選擇器,選擇器是jQuery的根基，在jQuery中無(wú)論是對(duì)事件處理、遍歷DOM還是Ajax操作都依賴于選擇器，熟練的使用選擇器不僅能簡(jiǎn)化代碼，而且可以達(dá)到事半功倍的效果。其基本使用與CSS選擇器相同。回顧一下CSS選擇器是如何使用的吧！,Jquery選擇器,基本選擇器，包括：ID選擇器、標(biāo)簽名選擇

17、器、類選擇器、通配符選器。,更多介紹,Jquery選擇器,基本選擇器，包括：后代選擇器、子選擇器、相鄰選擇器、兄弟符選器。,更多介紹,選擇器演示案例,$(document).ready(function(){ $("button").click(function(){ $("ul li:first").hide(); });});,當(dāng)點(diǎn)擊button標(biāo)簽后隱藏 第一個(gè)

18、元素中的第一個(gè) 元素,,http://www.runoob.com/try/try.php?filename=tryjquery_sel_ullifirst,選擇器演示案例,$(document).ready(function(){ $("tr:even").css("background-color","yellow");});,在頁(yè)面啟動(dòng)時(shí)給表格中偶數(shù)行的標(biāo)

19、簽加上黃顏色,,http://www.runoob.com/try/try.php?filename=tryjquery_sel_even,課堂練習(xí),在上一個(gè)例子的基礎(chǔ)上修改代碼。創(chuàng)建一個(gè)button按鈕。點(diǎn)擊該按鈕后，奇數(shù)行的標(biāo)簽將帶有黃色背景。,Jquery選擇器,原生javascript獲取DOM元素的方法：document.getElementById，通過(guò) id 查找 HTML 元素。document.getEle

20、mentsByTagName，通過(guò)標(biāo)簽名查找HTML元素。document.getElementsByClassName，通過(guò)類名查找HTML元素。通過(guò)簡(jiǎn)單實(shí)踐同學(xué)們可以發(fā)現(xiàn)：使用jquery選擇器去選取DOM元素，比原生javascript要簡(jiǎn)便、靈活得多。,更多介紹,,Jquery事件和效果,PART 03,,,,Jquery事件,大多數(shù) DOM 事件都對(duì)應(yīng)一個(gè)等效的 jQuery 方法。,更多介紹,以click方法為例，j

21、Query的事件定義語(yǔ)法如下：$("p").click(function(){ // 動(dòng)作觸發(fā)后執(zhí)行的代碼!! });,Jquery效果,Jquery的效果，是給選中的DOM對(duì)象設(shè)置各種特效，包括隱藏、顯示、切換，滑動(dòng)，淡入淡出，以及動(dòng)畫！配合jquery事件機(jī)制，可以做出非常實(shí)用的交互內(nèi)容。,更多介紹,例子：jQuery toggle()，顯示被隱藏的元素，并隱藏已顯示的元素：$(&quo

22、t;button").click(function(){ $("p").toggle();});,http://www.runoob.com/try/try.php?filename=tryjquery_toggle,Jquery效果,Jquery簡(jiǎn)單動(dòng)畫效果：,更多介紹,例子：jQuery fadeIn() 方法，用于淡入已隱藏的元素。$("button").click(fu

23、nction(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000);});,http://www.runoob.com/try/try.php?filename=tryjquery_fadein,例子：jQuery fadeOut() 方法，用于淡

24、出已隱藏的元素。$("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000);});,http://www.runoob.com/try/try.php?filename=tr

25、yjquery_fadeout,如何查詢jQuery API,jQuery的事件、效果API很多。本文不能盡述。大家也不可能都記住。對(duì)于框架的使用，大家應(yīng)該記住的是自主學(xué)習(xí)式的使用方法：每次遇到具體問(wèn)題，通過(guò)查詢API文檔，來(lái)學(xué)會(huì)使用。百度“jquery API”就可以找到j(luò)Query的API文檔。例如這個(gè)：http://jquery.cuishifeng.cn/,更多介紹,課堂練習(xí),在上一個(gè)課堂練習(xí)的基礎(chǔ)上。將頁(yè)面交互效果修

26、改為：鼠標(biāo)移動(dòng)到哪一行上，哪一行就變成黃色。（當(dāng)鼠標(biāo)離開(kāi)時(shí)，那一行就恢復(fù)白色）提示：請(qǐng)?jiān)趈query API的事件列表中，尋找mouseenter, mouseout API,http://www.runoob.com/try/try.php?filename=tryjquery_sel_even,Javascript學(xué)習(xí)方法,Javascript畢竟是一種編程語(yǔ)言。內(nèi)容較繁雜。不容易一次掌握。但它又是前端面試必考內(nèi)容。如何