實(shí)訓(xùn)項(xiàng)目u2-6jquery和ajax授課初識(shí)jquery

1、jQuery和AJAX第三單元 課程體系課程體系圖本門課程目標(biāo)學(xué)完本門課程后，你能夠：使用jQuery選取和操作網(wǎng)頁(yè)元素掌握jQuery的常用事件利用jQuery實(shí)現(xiàn)動(dòng)畫特效認(rèn)識(shí)AJAX技術(shù)掌握jQuery快速實(shí)現(xiàn)AJAX功能初識(shí)jQuery第三單元 jQuery和AJAX本課任務(wù)任務(wù)1：編寫第一個(gè)jQuery程序任務(wù)2：點(diǎn)擊圖片并為其添加邊框任務(wù)3：制作子菜單任務(wù)4：制作非緣勿擾頁(yè)面特效任務(wù)5：獲取選擇的愛好學(xué)完本次課程后，你能夠： 了解jQuery的實(shí)質(zhì)是什么掌握jQuery環(huán)境的搭建掌握jQuery選取網(wǎng)頁(yè)元素的不同方法 本課目標(biāo)JavaScript核心語(yǔ)法變量、數(shù)據(jù)類型、數(shù)組、運(yùn)算符自

2、定義函數(shù)、邏輯控制語(yǔ)句、注釋、語(yǔ)法約定內(nèi)置對(duì)象String、Date、Array、Math、RegExp常用函數(shù)parseInt()、parseFloat()、isNaN()alert()、prompt()BOM模型window、history、location、document對(duì)象相關(guān)課程回顧初識(shí)jQuery實(shí)現(xiàn)隔行變色效果，只需一句關(guān)鍵代碼 示例$(tr:even).not(:first).css(background, #eee); 演示示例：隔行換色jQuery簡(jiǎn)介jQuery由美國(guó)人John Resig于2006年創(chuàng)建jQuery是目前最流行的JavaScript程序庫(kù)，它是對(duì)Jav

3、aScript對(duì)象和函數(shù)的封裝它的設(shè)計(jì)思想是 write less, do morejQuery的優(yōu)勢(shì)強(qiáng)大的選擇器出色的DOM封裝可靠的事件處理機(jī)制出色的瀏覽器兼容性使用隱式迭代簡(jiǎn)化編程豐富的插件支持體積小，壓縮后只有100KB左右獲取jQuery進(jìn)入jQuery官網(wǎng)： 點(diǎn)擊此處下載jQuery庫(kù)文件jQuery庫(kù)分開發(fā)版和發(fā)布版在頁(yè)面中引入jQueryjQuery語(yǔ)法結(jié)構(gòu)工廠函數(shù) $()：將DOM對(duì)象轉(zhuǎn)化為jQuery對(duì)象選擇器 selector：獲取需要操作的DOM元素方法 action()：jQuery中提供的方法，包括綁定事件處理的方法 語(yǔ)法$(selector).action();

4、$(#current).addClass(current); / id選擇$(input).addClass(current); / 標(biāo)簽選擇$(.current).addClass(other); / class類名選擇 示例 演示示例：第一個(gè)jQuery程序課堂練習(xí)需求說明配置jQuery開發(fā)環(huán)境打開頁(yè)面時(shí)，彈出窗口，提示信息為“我編寫的第一個(gè)jQuery程序！”完成時(shí)間：5分鐘 演示示例：?jiǎn)柎鹦Чn堂練習(xí)需求說明點(diǎn)擊頁(yè)面中的圖片后，圖片外圍加上邊框（1px solid #ccc）要求使用.css()和.addClass()兩種方法實(shí)現(xiàn)完成時(shí)間：10分鐘共性問題集中講解jQuery代碼風(fēng)格

5、“$”等同于“jQuery”$(document).ready() 等同于 jQuery(document).ready() $(selector).action(); 方法舉例操作連綴書寫$(h2).css(background-color, #CCFFFF).next().css(display, block);$(document).ready()$(document).ready()與window.onload類似，但也有區(qū)別DOM對(duì)象和jQuery對(duì)象DOM對(duì)象：直接使用JavaScript獲取的節(jié)點(diǎn)對(duì)象jQuery對(duì)象：使用jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象，它能夠使用jQue

6、ry中的方法 DOM對(duì)象和jQuery對(duì)象分別擁有一套獨(dú)立的方法，不能混用var objDOM=document.getElementById(title); var objHTML=objDOM.innerHTML; $(#title).html( );等同于document.getElementById(title).innerHTML; 提示jQuery對(duì)象轉(zhuǎn)DOM對(duì)象jQuery對(duì)象是一個(gè)類似數(shù)組的對(duì)象，可以通過index的方法得到相應(yīng)的DOM對(duì)象通過get(index)方法得到相應(yīng)的DOM對(duì)象var $txtName = $ (.txtName); /jQuery對(duì)象var txtN

7、ame = $txtName0; /DOM對(duì)象 var $txtName = $(.txtName); /jQuery對(duì)象var txtName = $txtName.get(0); /DOM對(duì)象DOM對(duì)象轉(zhuǎn)jQuery對(duì)象 使用$()函數(shù)進(jìn)行轉(zhuǎn)化：$(DOM對(duì)象)var txtName = document.getElementById(txtName); /DOM對(duì)象var $txtName = $(txtName); /jQuery對(duì)象1、jQuery對(duì)象命名一般約定以$開頭2、常使用 $(this)來(lái)獲取觸發(fā)該事件的當(dāng)前 jQuery 對(duì)象 注意需求說明單擊“新手指南”顯示其下的子菜單

8、使用addClass()為ul列表設(shè)置字體大小為14px，加粗體，列表項(xiàng)之間的行間距為24px （font-size、font-weight、line-height）課堂練習(xí)完成時(shí)間：10分鐘共性問題集中講解小結(jié)jQuery的基本語(yǔ)法結(jié)構(gòu)是什么？$(document).ready()與window.onload有什么區(qū)別？如何實(shí)現(xiàn)DOM對(duì)象和jQuery對(duì)象間的轉(zhuǎn)化？提問jQuery選擇器jQuery選擇器類似于CSS選擇器，用來(lái)選取網(wǎng)頁(yè)中的元素獲取并設(shè)置網(wǎng)頁(yè)中所有元素的背景h3為選擇器語(yǔ)法，必須放在$()中$(h3)返回jQuery對(duì)象$(h3).css(background,#09F);j

9、Query選擇器分類jQuery選擇器功能強(qiáng)大，種類也很多，分類如下：類CSS選擇器基本選擇器層次選擇器屬性選擇器過濾選擇器基本過濾選擇器可見性過濾選擇器表單選擇器內(nèi)容過濾器 基本選擇器需求說明點(diǎn)擊顯示效果，根據(jù)不同的選擇器類型來(lái)選擇DOM元素，并采用 css() 方法改變它們的樣式課堂演示 演示示例：基本選擇器層次選擇器層次選擇器通過DOM 元素之間的層次關(guān)系來(lái)獲取元素* next()需求說明點(diǎn)擊標(biāo)題，使用層級(jí)選擇器選擇不同的元素使得其背景色為藍(lán)色 課堂演示 演示示例：層次選擇器屬性選擇器2-1屬性選擇器通過HTML元素的屬性來(lái)選擇元素屬性選擇器2-2需求說明點(diǎn)擊標(biāo)題，使用屬性選擇器選擇不同

10、的元素使得其背景色為藍(lán)色 課堂演示 演示示例：屬性選擇器課堂練習(xí)需求說明 使用標(biāo)簽選擇器設(shè)置，點(diǎn)擊“非緣勿擾”，設(shè)置元素字體顏色（#FF0099）；使用類選擇器和層次選擇器，點(diǎn)擊“導(dǎo)演”，使導(dǎo)演名字體加粗；.css(font-weight,bold)使用屬性選擇器獲取“收藏”元素（通過alt屬性），單擊它后彈出對(duì)話框(您已收藏成功！)。完成時(shí)間：15分鐘共性問題集中講解過濾選擇器過濾選擇器通過特定的過濾規(guī)則來(lái)篩選元素語(yǔ)法特點(diǎn)是使用“:”，如使用$(li:first)來(lái)選取第一個(gè)li元素主要分類如下：基本過濾選擇器可見性過濾選擇器基本過濾選擇器3-1基本過濾選擇器可以選取第一個(gè)元素、最后一個(gè)元素

11、、索引為偶數(shù)或奇數(shù)的元素 演示示例：基本過濾選擇器基本過濾選擇器3-2基本過濾選擇器可以根據(jù)索引的值選取元素 演示示例：基本過濾選擇器基本過濾選擇器3-3基本過濾選擇器還支持一些特殊的選擇方式 演示示例：基本過濾選擇器可見性過濾選擇器可見性過濾選擇器可以通過元素顯示狀態(tài)來(lái)選取元素$(p:hidden).show();$(p:visible).hide();課堂練習(xí)需求說明 繼續(xù)修改“非緣勿擾”頁(yè)面使用ID選擇器、層次選擇器、基本過濾器，點(diǎn)擊“標(biāo)簽”元素時(shí)，設(shè)置奇數(shù)標(biāo)簽的背景顏色（#E0F8EA）完成時(shí)間：10分鐘共性問題集中講解表單中根據(jù)不同類型的表單元素進(jìn)行選取表單選擇器 演示示例：表單選擇器根據(jù)內(nèi)容來(lái)選取元素內(nèi)容過濾器 演示示例：內(nèi)容過濾器課堂練習(xí)需求說明點(diǎn)擊“查看我選擇的愛好”按鈕，在下方顯示已選擇的愛好要求使用jQuery選擇器的方式選取元素完成時(shí)間：10分鐘共性問題集中講解特殊符號(hào)的轉(zhuǎn)義選擇器中的特殊符號(hào)需要轉(zhuǎn)義，在如下HTML代碼中aacc$(#id#a);$(#id2);$(#id#a);$(#id2); 獲取這兩個(gè)元素的選擇器：選擇器中的空格選擇器的書寫規(guī)范很嚴(yán)格，多一個(gè)空格或少一個(gè)空格，都會(huì)影響選擇器的效果var $t_a = $(.test :hidden); /帶空格的jQuery選擇器va