題目1: jQuery 能做什么?
- 選擇網(wǎng)頁(yè)元素
- 改變結(jié)果集
- 元素的操作:取值和賦值
- 元素的操作:移動(dòng)
- 元素的操作:復(fù)制闽烙、刪除和創(chuàng)建
- 工具方法
- 事件操作
- 特殊效果
- AJAX
題目2: jQuery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別效床?如何轉(zhuǎn)化绵脯?
jQuery對(duì)象為類數(shù)組對(duì)象谦趣,只能使用jQuery對(duì)象的方法和API季研,不能使用DOM原生對(duì)象的方法
同理 DOM原聲對(duì)象只能使用原生對(duì)象的方法和API嫌套,不能使用jQuery對(duì)象的API
$('selector')[i] 加了[i]之后 變成dom原生對(duì)象
$(document.querySelector('selector')) 用$()包括之后 dom對(duì)象變?yōu)閖query對(duì)象
題目3:jQuery中如何綁定事件逆屡?bind、unbind灌危、delegate康二、live、on勇蝙、off都有什么作用沫勿?推薦使用哪種?使用on綁定事件使用事件代理的寫(xiě)法味混?
綁定事件
$('selector').on('event','selector',data,function(){})
- events:一個(gè)或多個(gè)空格分隔的事件類型和可選的命名空間产雹,或僅僅是命名空間,比如"click", "click.hello"翁锡,其中'.hello'是給click事件的event namespaces(命名空間)蔓挖,方便簡(jiǎn)化刪除或觸發(fā)事件
- selector:一個(gè)選擇器字符串,用于過(guò)濾出被選中的元素中能觸發(fā)事件的后代元素馆衔。如果選擇器是 null 或者忽略了該選擇器瘟判,那么被選中的元素總是能觸發(fā)事件,多用于事件代理
- data:當(dāng)一個(gè)事件被觸發(fā)時(shí)角溃,要傳遞給事件處理函數(shù)的event.data
- function:事件被觸發(fā)時(shí)拷获,執(zhí)行的函數(shù)。若該函數(shù)只是要執(zhí)行return false的話减细,那么該參數(shù)位置可以直接簡(jiǎn)寫(xiě)成 false
以下事件綁定的作用
bind()
為一個(gè)元素綁定一個(gè)事件處理程序,在jQuery 3.0中匆瓜,.bind()已被標(biāo)記為棄用。從jQuery 1.7開(kāi)始未蝌,.on() 方法是將事件處理程序綁定到文檔(document)的首選方法驮吱。unbind()
從元素上刪除一個(gè)以前附加事件處理程序。在jQuery 3.0中萧吠,.unbind()已被標(biāo)記為棄用左冬。從jQuery 1.7開(kāi)始,它已經(jīng)被.off()方法取代纸型。所以我們不建議使用該方法拇砰。delegate()
為所有匹配選擇器(selector參數(shù))的元素綁定一個(gè)或多個(gè)事件處理函數(shù)九昧,基于一個(gè)指定的根元素的子集,匹配的元素包括那些目前已經(jīng)匹配到的元素毕匀,也包括那些今后可能匹配到的元素铸鹰。
在jQuery 3.0中,.delegate()已被標(biāo)記為棄用皂岔。從jQuery1.7開(kāi)始蹋笼,它已經(jīng)被.on()方法取代。所以我們不建議使用該方法躁垛。但是剖毯,對(duì)于早期版本,它仍然是使用事件代理(委派)最有效的方式教馆。live()
附加一個(gè)事件處理器到匹配目前選擇器的所有元素逊谋,包括現(xiàn)有的匹配的以及將來(lái)添加的匹配的元素,這個(gè)方法提供了一種手段土铺,將委托的事件處理程序附加到一個(gè)頁(yè)面的document元素胶滋,從而簡(jiǎn)化了在頁(yè)面上動(dòng)態(tài)添加的內(nèi)容上事件處理的使用。
從jQuery1.7開(kāi)始悲敷, .live() 方法已經(jīng)過(guò)時(shí)了究恤。請(qǐng)使用.on()附加事件處理程序。 舊版本的jQuery中用戶后德,應(yīng)優(yōu)先使用.delegate()來(lái)取代.live()部宿。on()
在選定的元素上綁定一個(gè)或多個(gè)事件處理函數(shù),在jQuery 1.7中瓢湃,.on()方法 提供綁定事件處理的所有功能理张。off()
移除一個(gè)事件處理函數(shù)。off() 方法移除用.on()綁定的事件處理程序绵患。
推薦使用哪種雾叭?
對(duì)于jQuery1.7之后,推薦使用.on() .off()進(jìn)行綁定或解綁事件
使用on綁定事件使用事件代理的寫(xiě)法
$('selector').on('event','selector',data,function(){})
如果省略selector或者是null藏雏,那么事件處理程序被稱為直接事件 或者 直接綁定事件 拷况。每次選中的元素觸發(fā)事件時(shí)作煌,就會(huì)執(zhí)行處理程序掘殴,不管它直接綁定在元素上,還是從后代(內(nèi)部)元素冒泡到該元素的
當(dāng)提供selector參數(shù)時(shí)粟誓,事件處理程序是指為委派 事件(愚人碼頭注:通常也有很多人叫它代理事件)奏寨。事件不會(huì)在直接綁定的元素上觸發(fā),但當(dāng)selector參數(shù)選擇器匹配到后代(內(nèi)部元素)的時(shí)候鹰服,事件處理函數(shù)才會(huì)被觸發(fā)病瞳。jQuery 會(huì)從 event target 開(kāi)始向上層元素(例如揽咕,由最內(nèi)層元素到最外層元素)開(kāi)始冒泡,并且在傳播路徑上所有綁定了相同事件的元素若滿足匹配的選擇器套菜,那么這些元素上的事件也會(huì)被觸發(fā)亲善。
題目4:jQuery 如何展示/隱藏元素?
隱藏元素
$('selector').hide(duration, easing, complete)
- duration:動(dòng)畫(huà)持續(xù)多久
- easing:表示過(guò)渡使用哪種緩動(dòng)函數(shù)逗柴,jQuery自身提供"linear" 和 "swing"
- complete:在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)
展示元素
$('selector').show(duration, easing, complete)
用法與隱藏元素相似
題目5: jQuery 動(dòng)畫(huà)如何使用蛹头?
基礎(chǔ)動(dòng)畫(huà)
.hide([duration],[easing],[complete] )
用于隱藏元素,沒(méi)有參數(shù)的時(shí)候等同于直接設(shè)置display屬性為none
duration: Type: Number or String戏溺,一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久渣蜗,默認(rèn)值: "normal", 三種預(yù)定速度的字符串("slow", "normal", 或 "fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如:1000)
easing: Type: String旷祸,一個(gè)字符串耕拷,表示過(guò)渡使用哪種緩動(dòng)函數(shù)。jQuery自身提供"linear" 和 "swing"托享,其他效果可以使用jQuery Easing Plugin插件.show([duration],[easing],[complete] )
顯示匹配元素骚烧,與.hide()方法類似.toggle([duration],[complete] )
顯示或隱藏匹配元素。用法與.hide()相似
自定義動(dòng)畫(huà)
.animate( properties [, duration ] [, easing ] [, complete ] )
properties: 類型: PlainObject闰围,一個(gè)CSS屬性和值的對(duì)象,動(dòng)畫(huà)將根據(jù)這組對(duì)象移動(dòng)止潘。
duration (默認(rèn): 400): 類型: Number or String,一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久辫诅。(愚人碼頭注:默認(rèn)值: "normal"凭戴, 三種預(yù)定速度的字符串("slow", "normal", 或 "fast")或表示動(dòng)畫(huà)時(shí)長(zhǎng)的毫秒數(shù)值(如:1000) )
easing (默認(rèn): swing):類型: String,一個(gè)字符串炕矮,表示過(guò)渡使用哪種緩動(dòng)函數(shù)么夫。(譯者注:jQuery自身提供"linear" 和 "swing")
complete:類型: Function(),在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)肤视。.finish()
停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)档痪,刪除所有排隊(duì)的動(dòng)畫(huà),并完成匹配元素所有的動(dòng)畫(huà)邢滑。
當(dāng).finish()在一個(gè)元素上被調(diào)用腐螟,立即停止當(dāng)前正在運(yùn)行的動(dòng)畫(huà)和所有排隊(duì)的動(dòng)畫(huà)(如果有的話),并且他們的CSS屬性設(shè)置為它們的目標(biāo)值(愚人碼頭注:就是所有動(dòng)畫(huà)的目標(biāo)值)困后。所有排隊(duì)的動(dòng)畫(huà)將被刪除乐纸。.stop()
停止匹配元素當(dāng)前正在運(yùn)行的動(dòng)畫(huà)。
當(dāng)一個(gè)元素調(diào)用.stop()摇予,當(dāng)前正在運(yùn)行的動(dòng)畫(huà)(如果有的話)立即停止汽绢。如果,例如侧戴,一個(gè)元素用.slideUp()隱藏的時(shí)候宁昭,調(diào)用.stop()跌宛,該元素依然會(huì)有一部分是處于顯示狀態(tài)的。由于元素上的動(dòng)畫(huà)尚未執(zhí)行完成积仗,所以動(dòng)畫(huà)完成時(shí)執(zhí)行的回調(diào)函數(shù)是不會(huì)被調(diào)用的疆拘。
如果同一元素調(diào)用多個(gè)動(dòng)畫(huà)方法,尚未被執(zhí)行的動(dòng)畫(huà)被放置在元素的效果隊(duì)列中寂曹。這些動(dòng)畫(huà)不會(huì)開(kāi)始入问,直到第一個(gè)完成。當(dāng)調(diào)用.stop()的時(shí)候稀颁,隊(duì)列中的下一個(gè)動(dòng)畫(huà)立即開(kāi)始芬失。如果clearQueue參數(shù)提供true值,那么在隊(duì)列中的動(dòng)畫(huà)其余被刪除并永遠(yuǎn)不會(huì)運(yùn)行。
漸變動(dòng)畫(huà)
.fadeIn( [duration ][,easing] [, complete ] )
通過(guò)淡入的方式顯示匹配元素匾灶。
duration (默認(rèn): 400): 類型: Number or String棱烂, 一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久。
easing (默認(rèn): swing):類型: String阶女,一個(gè)字符串颊糜,表示過(guò)渡使用哪種緩動(dòng)函數(shù)。(譯者注:jQuery自身提供"linear" 和 "swing")
complete:類型: Function()秃踩,在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)衬鱼。.fadeOut( [duration ] [,easing] [, complete ] )
通過(guò)淡出的方式隱藏匹配元素。
duration (默認(rèn): 400): 類型: Number or String憔杨, 一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久鸟赫。
easing (默認(rèn): swing):類型: String,一個(gè)字符串消别,表示過(guò)渡使用哪種緩動(dòng)函數(shù)抛蚤。(譯者注:jQuery自身提供"linear" 和 "swing")
complete:類型: Function(),在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)寻狂。.fadeTo( duration, opacity [,easing] [, complete ] )
調(diào)整匹配元素的透明度
duration (默認(rèn): 400): 類型: Number or String岁经, 一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久。
easing (默認(rèn): swing):類型: String蛇券,一個(gè)字符串缀壤,表示過(guò)渡使用哪種緩動(dòng)函數(shù)。(譯者注:jQuery自身提供"linear" 和 "swing")
opacity: 類型: Number, 0和1之間的數(shù)字表示目標(biāo)元素的不透明度纠亚。
complete:類型: Function()塘慕,在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)。.fadeToggle( [duration ] [, easing ] [, complete ] )
通過(guò)匹配的元素的不透明度動(dòng)畫(huà)菜枷,來(lái)顯示或隱藏它們苍糠。
duration (默認(rèn): 400): 類型: Number or String叁丧, 一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久啤誊。
easing (默認(rèn): swing):類型: String岳瞭,一個(gè)字符串,表示過(guò)渡使用哪種緩動(dòng)函數(shù)蚊锹。(譯者注:jQuery自身提供"linear" 和 "swing")
complete:類型: Function()瞳筏,在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)。
滑動(dòng)
.slideDown( [duration ] [, easing ] [, complete ] )
用滑動(dòng)動(dòng)畫(huà)顯示一個(gè)匹配元素牡昆,方法將給匹配元素的高度的動(dòng)畫(huà)姚炕,這會(huì)導(dǎo)致頁(yè)面的下面部分滑下去,彌補(bǔ)了顯示的方式
duration (默認(rèn): 400): 類型: Number or String丢烘, 一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久柱宦。
easing (默認(rèn): swing):類型: String,一個(gè)字符串播瞳,表示過(guò)渡使用哪種緩動(dòng)函數(shù)掸刊。(譯者注:jQuery自身提供"linear" 和 "swing")
complete:類型: Function(),在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)赢乓。.slideUp( [duration ] [, easing ] [, complete ] )
用滑動(dòng)動(dòng)畫(huà)隱藏一個(gè)匹配元素忧侧,方法將給匹配元素的高度的動(dòng)畫(huà),這會(huì)導(dǎo)致頁(yè)面的下面部分滑上去牌芋,當(dāng)一個(gè)隱藏動(dòng)畫(huà)后蚓炬,高度值達(dá)到0的時(shí)候,display 樣式屬性被設(shè)置為none躺屁,以確保該元素不再影響頁(yè)面布局肯夏。
duration (默認(rèn): 400): 類型: Number or String, 一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久犀暑。
easing (默認(rèn): swing):類型: String熄捍,一個(gè)字符串,表示過(guò)渡使用哪種緩動(dòng)函數(shù)母怜。(譯者注:jQuery自身提供"linear" 和 "swing")
complete:類型: Function()余耽,在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù).slideToggle( [duration ] [, easing ] [, complete ] )
用滑動(dòng)動(dòng)畫(huà)顯示或隱藏一個(gè)匹配元素,方法將給匹配元素的高度的動(dòng)畫(huà)苹熏,這會(huì)導(dǎo)致頁(yè)面中碟贾,在這個(gè)元素下面的內(nèi)容往下或往上滑。display屬性值保存在jQuery的數(shù)據(jù)緩存中轨域,所以display可以方便以后可以恢復(fù)到其初始值袱耽。
如果一個(gè)元素的display屬性值為inline,然后是隱藏和顯示干发,這個(gè)元素將再次顯示inline朱巨。當(dāng)一個(gè)隱藏動(dòng)畫(huà)后,高度值達(dá)到0的時(shí)候枉长,display 樣式屬性被設(shè)置為none冀续,以確保該元素不再影響頁(yè)面布局琼讽。
duration (默認(rèn): 400): 類型: Number or String, 一個(gè)字符串或者數(shù)字決定動(dòng)畫(huà)將運(yùn)行多久洪唐。
easing (默認(rèn): swing):類型: String钻蹬,一個(gè)字符串,表示過(guò)渡使用哪種緩動(dòng)函數(shù)凭需。(譯者注:jQuery自身提供"linear" 和 "swing")
complete:類型: Function()问欠,在動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)
題目6:如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容?如何設(shè)置和獲取元素內(nèi)部文本粒蜈?
$('selector').html() 不傳參顺献,獲取元素內(nèi)部HTML
$('selector').html('innerHtml') 傳參,設(shè)置元素內(nèi)部HTML
$('selector').text() 不傳參枯怖,獲取元素內(nèi)部HTML
$('selector').text('innerHtml') 傳參滚澜,設(shè)置元素內(nèi)部HTML
題目7:如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容?如何設(shè)置和獲取元素屬性嫁怀?
$('selector').val() 不傳參设捐,獲取用戶輸入或者選擇的內(nèi)容
$('selector').val('inputValue') 傳參,輸入或者選擇的內(nèi)容
$('selector').attr('attribute') 獲取元素屬性的值
$('selector').attr('attribute','value') 將元素屬性的值設(shè)置為bbb
題目8: 使用 jQuery實(shí)現(xiàn)如下效果
題目9:. 使用 jQuery 實(shí)現(xiàn)如下效果
題目10:實(shí)現(xiàn)如下效果
題目11: 模仿視頻6塘淑,完成 左右切換的 Tab 效果
題目11鏈接
請(qǐng)老師幫我看看題目11動(dòng)畫(huà)為什么不連續(xù)萝招,謝謝