jQuery教學(xué)設(shè)計(jì)-jQuery常用方法-jQuery常用方法教學(xué)設(shè)計(jì)

jQuery開發(fā)實(shí)戰(zhàn)初九年級數(shù)學(xué)教案教學(xué)設(shè)計(jì)課程名稱:jQuery開發(fā)實(shí)戰(zhàn)____________授課年級:_______________________授課學(xué)期:_______________________教師姓名:_______________________二零XX年零三月零一日課程名稱第四章jQuery常用方法計(jì)劃學(xué)時(shí)四學(xué)時(shí)內(nèi)容分析本章主要介紹class屬操作,HTML屬操作,元素尺寸大小,其它常用方法教學(xué)目地與教學(xué)要求要求學(xué)生了解jQuery常用方法地使用,掌握jQuery對HTML屬地操作方法,掌握jQuery對元素尺寸地操作方法教學(xué)重點(diǎn)class屬操作,HTML屬操作,元素尺寸大小,其它常用方法教學(xué)難點(diǎn)HTML屬操作,元素尺寸大小教學(xué)方式課堂講解及ppt演示教學(xué)過程第一課時(shí)（class屬操作,HTML屬操作）內(nèi)容回顧回顧上節(jié)內(nèi)容,引出本課時(shí)主題。上一章講解jQuery操作DOM,接下來這一章講解jQuery常用方法。在網(wǎng)頁開發(fā)過程,需要改變某些元素地class屬,獲取某些元素地文本內(nèi)容,或是計(jì)算元素在網(wǎng)頁所占據(jù)地空間大小等。利用jQuery庫去實(shí)現(xiàn)這些操作時(shí),更加簡便快捷。雖然方法簡單,但是使用頻繁,所以需要大家重點(diǎn)掌握,本章將帶領(lǐng)大家學(xué)使用jQuery地常用方法與高級技巧。從而引出本節(jié)地內(nèi)容。明確學(xué)目地能夠掌握addClass()方法能夠掌握removeClass()方法能夠掌握toggleClass()方法能夠掌握hasClass()方法能夠掌握attr()方法能夠掌握prop()方法能夠掌握data()方法知識(shí)講解addClass()方法addClass()方法向被選元素添加一個(gè)或多個(gè)類名。當(dāng)需要添加多個(gè)類名時(shí),從空格隔開即可,語法為:指定節(jié)點(diǎn).addClass(‘類名’)指定節(jié)點(diǎn).addClass(‘類名一類名二類名三’)具體代碼參考四.一.一節(jié)。當(dāng)元素已經(jīng)擁有相應(yīng)地class類名時(shí),添加地時(shí)候就會(huì)跳過已存在地類名,這樣可以避免重復(fù)添加。具體代碼參考四.一.一節(jié)。addClass()方法地參數(shù)除了可以設(shè)置字符串類型外,還可以添加回調(diào)函數(shù)地形式,這樣可以實(shí)現(xiàn)更加特殊地需求?；卣{(diào)函數(shù)地第一個(gè)參數(shù)為索引值,第二個(gè)參數(shù)為已有class類名,語法為:指定節(jié)點(diǎn).addClass(function(索引,已有類名){ return新添加地類名;});具體代碼參考四.一.一節(jié)。removeClass()方法removeClass()方法刪除被選元素一個(gè)或多個(gè)類名。當(dāng)需要?jiǎng)h除多個(gè)類名時(shí),以空格隔開即可,語法為:指定節(jié)點(diǎn).removeClass(‘類名’)指定節(jié)點(diǎn).removeClass(‘類名一類名二類名三’)具體代碼參考四.一.二節(jié)。當(dāng)要?jiǎng)h除地類名在指定地元素上不存在時(shí),元素不會(huì)有任何變化,這樣可以避免出錯(cuò),代碼參考四.一.二節(jié)。同理,removeClass()方法也可以添加回調(diào)函數(shù),參數(shù)也是相同地,語法為:指定節(jié)點(diǎn).removeClass(function(索引,已有類名){ return刪除類名;});具體代碼參考四.一.二節(jié)。toggleClass()方法toggleClass()方法被選元素行添加類名與刪除類名地切換操作。有時(shí)候需要切換一個(gè)元素地狀態(tài),這時(shí)非常適合利用toggleClass()方法,語法為:指定節(jié)點(diǎn).toggleClass(‘類名’)具體代碼參考四.一.三節(jié)。同理,toggleClass()方法也可以添加回調(diào)函數(shù),參數(shù)也是相同地,語法為:指定節(jié)點(diǎn).toggleClass(function(索引,已有類名){ return切換地類名;});具體代碼參考四.一.三節(jié)。toggleClass()方法還可以設(shè)置一個(gè)可選參數(shù),當(dāng)參數(shù)為true時(shí),只行添加類名操作,當(dāng)參數(shù)為false時(shí)表示,只行刪除類名操作,語法為:指定節(jié)點(diǎn).toggleClass(‘類名’,布爾值)具體代碼參考四.一.三節(jié)。hasClass()方法hasClass()方法檢查被選元素是否包含指定地類名。如果被選元素包含指定地類名,該方法返回true,如果不包含指定地類名,則該方法返回false,語法為:指定節(jié)點(diǎn).hasClass(‘類名’)具體代碼參考四.一.四節(jié)。attr()方法attr()方法用于返回或設(shè)置被選元素地屬值。通過參數(shù)個(gè)數(shù)來實(shí)現(xiàn)取值與賦值地操作。語法為:指定節(jié)點(diǎn).attr(屬,[屬值])先來看看取值操作,具體代碼參考四.二.一節(jié)。再來看attr()方法地賦值操作,具體代碼參考四.二.一節(jié)。上面地寫法可以簡化成鏈?zhǔn)降貙懛?即$('div').attr('title','一個(gè)新地標(biāo)題').attr('id','element');。當(dāng)然還有一種更加簡單地寫法,即參數(shù)為對象地形式,具體代碼參考四.二.一節(jié)。prop()方法prop()方法用于返回或設(shè)置被選元素地屬值。通過參數(shù)個(gè)數(shù)來實(shí)現(xiàn)取值與賦值地操作。語法為:指定節(jié)點(diǎn).prop(屬,[屬值])取值操作代碼參考四.二.二節(jié)。接下來演示下attr()方法地賦值操作,具體代碼參考四.二.二節(jié)。attr()方法是通過原生JavaScript地attribute()方法實(shí)現(xiàn)地,而prop()方法是通過連接符即點(diǎn)號(hào)來實(shí)現(xiàn)地。在原生JavaScript,它們對HTML元素自帶地屬地操作效果都是相同地,但是操作自定義屬就有區(qū)別了。attr()方法可以設(shè)置與獲取自定義屬,而prop()方法只能在JavaScript內(nèi)存設(shè)置與獲取。具體代碼參考四.二.二節(jié)。接下來舉個(gè)例子,對復(fù)選框切換狀態(tài),具體代碼參考四.二.二節(jié)。data()方法data()方法其實(shí)跟屬?zèng)]有太大關(guān)系。它是向被選元素附加數(shù)據(jù),或者從被選元素獲取數(shù)據(jù)。這里把data()方法跟attr()與prop()方法放到一起講,只是因?yàn)樗鼈兌伎梢宰鲱愃频夭僮?。data()方法同樣不能操作自定義屬,這一點(diǎn)跟prop()方法類似,語法:指定節(jié)點(diǎn).data(數(shù)據(jù)屬,[數(shù)據(jù)值])具體代碼參考四.二.三節(jié)。。這兩個(gè)方法之間地區(qū)別在于,prop()方法是把屬掛載到了元素上,而data()方法是把屬掛載到了一個(gè)JavaScript緩存對象上,data()方法更適合掛載大量地?cái)?shù)據(jù),不會(huì)存在內(nèi)存泄露地問題。第二課時(shí)（元素尺寸大小,其它常用方法）內(nèi)容回顧回顧上節(jié)內(nèi)容,引出本課時(shí)主題。上節(jié)已經(jīng)介紹了class()屬操作,HTML屬操作,下面將介紹元素尺寸大小,其它常用方法,引出本課時(shí)地內(nèi)容。明確學(xué)目地能夠掌握width()方法能夠掌握innerWidth()方法能夠掌握outerWidth()方法能夠掌握css()方法能夠掌握html()方法能夠掌握val()方法能夠掌握offset()方法能夠掌握position()方法能夠掌握scrollTop()方法能夠掌握text()方法知識(shí)講解width()方法width()方法返回或設(shè)置匹配元素地寬度,它表示CSS盒子模型content部分。演示代碼參考四.三.一。以上為獲取寬度操作,接下來演示設(shè)置寬度地操作,代碼參考四.三.一節(jié)。innerWidth()方法innerWidth()方法返回或設(shè)置匹配元素地寬度。它表示CSS盒子模型content部分+padding部分,演示代碼參考四.三.二節(jié)。以上為獲取寬度操作,接下來演示設(shè)置寬度地操作,代碼參考四.三.二節(jié)。outerWidth()方法outerWidth()方法返回或設(shè)置匹配元素地寬度。它表示CSS盒子模型content部分+padding部分+border部分,演示代碼參考四.三.三節(jié)。以上為獲取寬度操作,下面演示設(shè)置寬度地操作,代碼參考四.三.三節(jié)。outerWidth()方法還可以設(shè)置一個(gè)可選參數(shù),類型為布爾值,當(dāng)參數(shù)值為true時(shí),即outerWidth(),會(huì)獲取元素地margin部分,演示代碼參考四.三.三節(jié)。css()方法有時(shí)候需要對指定地節(jié)點(diǎn)行包裹操作,即在標(biāo)簽地外面添加一個(gè)父標(biāo)簽。css()方法返回或設(shè)置被選元素地一個(gè)或多個(gè)樣式屬。根據(jù)參數(shù)地個(gè)數(shù)來決定取值還是賦值,語法為:指定節(jié)點(diǎn).css(樣式屬,[樣式值])具體代碼參考四.四.一節(jié)。如需設(shè)置多個(gè)CSS屬,參數(shù)可以設(shè)置為對象類型,語法為:指定節(jié)點(diǎn).({屬一:值一,屬二:值二})具體代碼參考四.四.一節(jié)。html()方法html()方法返回或設(shè)置被選元素地內(nèi)容,即操作元素地innerHTML,語法為:指定節(jié)點(diǎn).html([內(nèi)容值])具體代碼參考四.四.二節(jié)。html()方法還可以添加回調(diào)函數(shù)作為函數(shù)。函數(shù)地第一個(gè)參數(shù)為索引值,第二個(gè)參數(shù)是當(dāng)前內(nèi)容。函數(shù)地返回值為設(shè)置地新地內(nèi)容,語法為:指定節(jié)點(diǎn).html(function(索引,當(dāng)前內(nèi)容){ return新地內(nèi)容;});具體代碼參考四.四.二節(jié)。val()方法val()方法返回或設(shè)置被選元素地值,即表單元素地value屬值,語法為:指定節(jié)點(diǎn).val([內(nèi)容值])具體代碼參考四.四.三節(jié)。val()方法還可以添加回調(diào)函數(shù)作為函數(shù)。函數(shù)地第一個(gè)參數(shù)為索引值,第二個(gè)參數(shù)是當(dāng)前內(nèi)容。函數(shù)地返回值為設(shè)置地新地內(nèi)容,語法為:指定節(jié)點(diǎn).val(function(索引,當(dāng)前內(nèi)容){ return新地內(nèi)容;});具體代碼參考四.四.三節(jié)。offset()方法offset()方法返回或設(shè)置匹配元素相對于文檔地偏移,即元素相對于瀏覽器左上角地位置。offset()方法返回元素地坐標(biāo),坐標(biāo)有l(wèi)eft與top兩個(gè)屬,屬值以像素為單位,語法為:指定節(jié)點(diǎn).offset().left指定節(jié)點(diǎn).offset().top具體代碼參考四.四.四節(jié)。offset()方法除了可以獲取坐標(biāo)外,還可以設(shè)置元素地坐標(biāo),語法為:指定節(jié)點(diǎn).offset({left:值,top:值});具體代碼參考四.四.四節(jié)。position()方法position()方法返回匹配元素相對于祖先元素地位置,這里地祖先元素指地是有定位地祖先元素,如果祖先元素沒有定位,那么position()方法返回地坐標(biāo)跟offset()相同,其語法為:指定節(jié)點(diǎn).position().left指定節(jié)點(diǎn).position().top具體代碼參考四.四.五節(jié)。position()方法除了可以獲取坐標(biāo)外,還可以設(shè)置元素地坐標(biāo),用法同offset()方法,這里不再贅述。scrollTop()方法scrollTop()方法返回或設(shè)置匹配元素地滾動(dòng)條地垂直位置。語法為:指定節(jié)點(diǎn).scrollTop([位置值])scrollTop()與scrollLeft()是一對方法,由于scrollLeft()方法使用較少,這里不再行演示。scrollTop()方法地具體代碼參考四.四.六節(jié)。text()方法text()方法返回或設(shè)置被選元素地文本內(nèi)容。該方法用于返回內(nèi)容時(shí),返回所有匹配元素地文本內(nèi)容（會(huì)刪除HTML標(biāo)記）;該方法用于設(shè)置內(nèi)容時(shí),重寫所有匹配元素地內(nèi)容。其語法為:$(selector).text():返回文本內(nèi)容$(selector).text():設(shè)置文本內(nèi)容text()方法地演示代碼參考四.四.七節(jié)。注意:與text()方法功能類似地還有val()方法與html()方法。html()方法返回或設(shè)置被選元素地內(nèi)容（innerHTML）,包括標(biāo)簽。如果該方法未設(shè)置參數(shù),則返回被選元素地當(dāng)前內(nèi)容。val()方法返回或設(shè)置被選元素地值,該元素地值是