12 jquery編程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

22、t;button").click(function(){ $("p").toggle();});,http://www.runoob.com/try/try.php?filename=tryjquery_toggle,Jquery效果,Jquery簡單動畫效果：,更多介紹,例子：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很多。本文不能盡述。大家也不可能都記住。對于框架的使用，大家應(yīng)該記住的是自主學(xué)習(xí)式的使用方法：每次遇到具體問題，通過查詢API文檔，來學(xué)會使用。百度“jquery API”就可以找到j(luò)Query的API文檔。例如這個：http://jquery.cuishifeng.cn/,更多介紹,課堂練習(xí),在上一個課堂練習(xí)的基礎(chǔ)上。將頁面交互效果修

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