進(jìn)階14 jQuery 基礎(chǔ)

題目1: jQuery 能做什么?

  • 選擇網(wǎng)頁元素
  • 改變結(jié)果集
  • 元素的操作:取值和賦值
  • 元素的操作:移動
  • 元素的操作:復(fù)制、刪除和創(chuàng)建
  • 工具方法
  • 事件操作
  • 特殊效果
  • AJAX

題目2: jQuery 對象和 DOM 原生對象有什么區(qū)別?如何轉(zhuǎn)化?

jQuery對象為類數(shù)組對象,只能使用jQuery對象的方法和API,不能使用DOM原生對象的方法
同理 DOM原聲對象只能使用原生對象的方法和API,不能使用jQuery對象的API

$('selector')[i] 加了[i]之后 變成dom原生對象

$(document.querySelector('selector')) 用$()包括之后 dom對象變?yōu)閖query對象

題目3:jQuery中如何綁定事件?bind、unbind、delegate、live、on、off都有什么作用?推薦使用哪種?使用on綁定事件使用事件代理的寫法?

綁定事件

$('selector').on('event','selector',data,function(){})

  • events:一個或多個空格分隔的事件類型和可選的命名空間,或僅僅是命名空間,比如"click", "click.hello",其中'.hello'是給click事件的event namespaces(命名空間),方便簡化刪除或觸發(fā)事件
  • selector:一個選擇器字符串,用于過濾出被選中的元素中能觸發(fā)事件的后代元素。如果選擇器是 null 或者忽略了該選擇器,那么被選中的元素總是能觸發(fā)事件,多用于事件代理
  • data:當(dāng)一個事件被觸發(fā)時,要傳遞給事件處理函數(shù)的event.data
  • function:事件被觸發(fā)時,執(zhí)行的函數(shù)。若該函數(shù)只是要執(zhí)行return false的話,那么該參數(shù)位置可以直接簡寫成 false

以下事件綁定的作用

  • bind()
    為一個元素綁定一個事件處理程序,在jQuery 3.0中,.bind()已被標(biāo)記為棄用。從jQuery 1.7開始,.on() 方法是將事件處理程序綁定到文檔(document)的首選方法。

  • unbind()
    從元素上刪除一個以前附加事件處理程序。在jQuery 3.0中,.unbind()已被標(biāo)記為棄用。從jQuery 1.7開始,它已經(jīng)被.off()方法取代。所以我們不建議使用該方法。

  • delegate()
    為所有匹配選擇器(selector參數(shù))的元素綁定一個或多個事件處理函數(shù),基于一個指定的根元素的子集,匹配的元素包括那些目前已經(jīng)匹配到的元素,也包括那些今后可能匹配到的元素。
    在jQuery 3.0中,.delegate()已被標(biāo)記為棄用。從jQuery1.7開始,它已經(jīng)被.on()方法取代。所以我們不建議使用該方法。但是,對于早期版本,它仍然是使用事件代理(委派)最有效的方式。

  • live()
    附加一個事件處理器到匹配目前選擇器的所有元素,包括現(xiàn)有的匹配的以及將來添加的匹配的元素,這個方法提供了一種手段,將委托的事件處理程序附加到一個頁面的document元素,從而簡化了在頁面上動態(tài)添加的內(nèi)容上事件處理的使用。
    從jQuery1.7開始, .live() 方法已經(jīng)過時了。請使用.on()附加事件處理程序。 舊版本的jQuery中用戶,應(yīng)優(yōu)先使用.delegate()來取代.live()。

  • on()
    在選定的元素上綁定一個或多個事件處理函數(shù),在jQuery 1.7中,.on()方法 提供綁定事件處理的所有功能。

  • off()
    移除一個事件處理函數(shù)。off() 方法移除用.on()綁定的事件處理程序。

推薦使用哪種?

對于jQuery1.7之后,推薦使用.on() .off()進(jìn)行綁定或解綁事件

使用on綁定事件使用事件代理的寫法

$('selector').on('event','selector',data,function(){})

如果省略selector或者是null,那么事件處理程序被稱為直接事件 或者 直接綁定事件 。每次選中的元素觸發(fā)事件時,就會執(zhí)行處理程序,不管它直接綁定在元素上,還是從后代(內(nèi)部)元素冒泡到該元素的

當(dāng)提供selector參數(shù)時,事件處理程序是指為委派 事件(愚人碼頭注:通常也有很多人叫它代理事件)。事件不會在直接綁定的元素上觸發(fā),但當(dāng)selector參數(shù)選擇器匹配到后代(內(nèi)部元素)的時候,事件處理函數(shù)才會被觸發(fā)。jQuery 會從 event target 開始向上層元素(例如,由最內(nèi)層元素到最外層元素)開始冒泡,并且在傳播路徑上所有綁定了相同事件的元素若滿足匹配的選擇器,那么這些元素上的事件也會被觸發(fā)。

題目4:jQuery 如何展示/隱藏元素?

隱藏元素

$('selector').hide(duration, easing, complete)

  • duration:動畫持續(xù)多久
  • easing:表示過渡使用哪種緩動函數(shù),jQuery自身提供"linear" 和 "swing"
  • complete:在動畫完成時執(zhí)行的函數(shù)

展示元素

$('selector').show(duration, easing, complete)
用法與隱藏元素相似

題目5: jQuery 動畫如何使用?

基礎(chǔ)動畫

  • .hide([duration],[easing],[complete] )
    用于隱藏元素,沒有參數(shù)的時候等同于直接設(shè)置display屬性為none
    duration: Type: Number or String,一個字符串或者數(shù)字決定動畫將運行多久,默認(rèn)值: "normal", 三種預(yù)定速度的字符串("slow", "normal", 或 "fast")或表示動畫時長的毫秒數(shù)值(如:1000)
    easing: Type: String,一個字符串,表示過渡使用哪種緩動函數(shù)。jQuery自身提供"linear" 和 "swing",其他效果可以使用jQuery Easing Plugin插件

  • .show([duration],[easing],[complete] )
    顯示匹配元素,與.hide()方法類似

  • .toggle([duration],[complete] )
    顯示或隱藏匹配元素。用法與.hide()相似

自定義動畫

  • .animate( properties [, duration ] [, easing ] [, complete ] )
    properties: 類型: PlainObject,一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動。
    duration (默認(rèn): 400): 類型: Number or String,一個字符串或者數(shù)字決定動畫將運行多久。(愚人碼頭注:默認(rèn)值: "normal", 三種預(yù)定速度的字符串("slow", "normal", 或 "fast")或表示動畫時長的毫秒數(shù)值(如:1000) )
    easing (默認(rèn): swing):類型: String,一個字符串,表示過渡使用哪種緩動函數(shù)。(譯者注:jQuery自身提供"linear" 和 "swing")
    complete:類型: Function(),在動畫完成時執(zhí)行的函數(shù)。

  • .finish()
    停止當(dāng)前正在運行的動畫,刪除所有排隊的動畫,并完成匹配元素所有的動畫。
    當(dāng).finish()在一個元素上被調(diào)用,立即停止當(dāng)前正在運行的動畫和所有排隊的動畫(如果有的話),并且他們的CSS屬性設(shè)置為它們的目標(biāo)值(愚人碼頭注:就是所有動畫的目標(biāo)值)。所有排隊的動畫將被刪除。

  • .stop()
    停止匹配元素當(dāng)前正在運行的動畫。

當(dāng)一個元素調(diào)用.stop(),當(dāng)前正在運行的動畫(如果有的話)立即停止。如果,例如,一個元素用.slideUp()隱藏的時候,調(diào)用.stop(),該元素依然會有一部分是處于顯示狀態(tài)的。由于元素上的動畫尚未執(zhí)行完成,所以動畫完成時執(zhí)行的回調(diào)函數(shù)是不會被調(diào)用的。

如果同一元素調(diào)用多個動畫方法,尚未被執(zhí)行的動畫被放置在元素的效果隊列中。這些動畫不會開始,直到第一個完成。當(dāng)調(diào)用.stop()的時候,隊列中的下一個動畫立即開始。如果clearQueue參數(shù)提供true值,那么在隊列中的動畫其余被刪除并永遠(yuǎn)不會運行。

漸變動畫

  • .fadeIn( [duration ][,easing] [, complete ] )
    通過淡入的方式顯示匹配元素。
    duration (默認(rèn): 400): 類型: Number or String, 一個字符串或者數(shù)字決定動畫將運行多久。
    easing (默認(rèn): swing):類型: String,一個字符串,表示過渡使用哪種緩動函數(shù)。(譯者注:jQuery自身提供"linear" 和 "swing")
    complete:類型: Function(),在動畫完成時執(zhí)行的函數(shù)。

  • .fadeOut( [duration ] [,easing] [, complete ] )
    通過淡出的方式隱藏匹配元素。
    duration (默認(rèn): 400): 類型: Number or String, 一個字符串或者數(shù)字決定動畫將運行多久。
    easing (默認(rèn): swing):類型: String,一個字符串,表示過渡使用哪種緩動函數(shù)。(譯者注:jQuery自身提供"linear" 和 "swing")
    complete:類型: Function(),在動畫完成時執(zhí)行的函數(shù)。

  • .fadeTo( duration, opacity [,easing] [, complete ] )
    調(diào)整匹配元素的透明度
    duration (默認(rèn): 400): 類型: Number or String, 一個字符串或者數(shù)字決定動畫將運行多久。
    easing (默認(rèn): swing):類型: String,一個字符串,表示過渡使用哪種緩動函數(shù)。(譯者注:jQuery自身提供"linear" 和 "swing")
    opacity: 類型: Number, 0和1之間的數(shù)字表示目標(biāo)元素的不透明度。
    complete:類型: Function(),在動畫完成時執(zhí)行的函數(shù)。

  • .fadeToggle( [duration ] [, easing ] [, complete ] )
    通過匹配的元素的不透明度動畫,來顯示或隱藏它們。
    duration (默認(rèn): 400): 類型: Number or String, 一個字符串或者數(shù)字決定動畫將運行多久。
    easing (默認(rèn): swing):類型: String,一個字符串,表示過渡使用哪種緩動函數(shù)。(譯者注:jQuery自身提供"linear" 和 "swing")
    complete:類型: Function(),在動畫完成時執(zhí)行的函數(shù)。

滑動

  • .slideDown( [duration ] [, easing ] [, complete ] )
    用滑動動畫顯示一個匹配元素,方法將給匹配元素的高度的動畫,這會導(dǎo)致頁面的下面部分滑下去,彌補了顯示的方式
    duration (默認(rèn): 400): 類型: Number or String, 一個字符串或者數(shù)字決定動畫將運行多久。
    easing (默認(rèn): swing):類型: String,一個字符串,表示過渡使用哪種緩動函數(shù)。(譯者注:jQuery自身提供"linear" 和 "swing")
    complete:類型: Function(),在動畫完成時執(zhí)行的函數(shù)。

  • .slideUp( [duration ] [, easing ] [, complete ] )
    用滑動動畫隱藏一個匹配元素,方法將給匹配元素的高度的動畫,這會導(dǎo)致頁面的下面部分滑上去,當(dāng)一個隱藏動畫后,高度值達(dá)到0的時候,display 樣式屬性被設(shè)置為none,以確保該元素不再影響頁面布局。
    duration (默認(rèn): 400): 類型: Number or String, 一個字符串或者數(shù)字決定動畫將運行多久。
    easing (默認(rèn): swing):類型: String,一個字符串,表示過渡使用哪種緩動函數(shù)。(譯者注:jQuery自身提供"linear" 和 "swing")
    complete:類型: Function(),在動畫完成時執(zhí)行的函數(shù)

  • .slideToggle( [duration ] [, easing ] [, complete ] )
    用滑動動畫顯示或隱藏一個匹配元素,方法將給匹配元素的高度的動畫,這會導(dǎo)致頁面中,在這個元素下面的內(nèi)容往下或往上滑。display屬性值保存在jQuery的數(shù)據(jù)緩存中,所以display可以方便以后可以恢復(fù)到其初始值。
    如果一個元素的display屬性值為inline,然后是隱藏和顯示,這個元素將再次顯示inline。當(dāng)一個隱藏動畫后,高度值達(dá)到0的時候,display 樣式屬性被設(shè)置為none,以確保該元素不再影響頁面布局。
    duration (默認(rèn): 400): 類型: Number or String, 一個字符串或者數(shù)字決定動畫將運行多久。
    easing (默認(rèn): swing):類型: String,一個字符串,表示過渡使用哪種緩動函數(shù)。(譯者注:jQuery自身提供"linear" 和 "swing")
    complete:類型: Function(),在動畫完成時執(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實現(xiàn)如下效果

題目8鏈接

題目9:. 使用 jQuery 實現(xiàn)如下效果

題目9鏈接

題目10:實現(xiàn)如下效果

題目10鏈接

題目11: 模仿視頻6,完成 左右切換的 Tab 效果

題目11鏈接
請老師幫我看看題目11動畫為什么不連續(xù),謝謝

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,565評論 6 539
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,115評論 3 423
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 177,577評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,514評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 72,234評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,621評論 1 326
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,641評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,822評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,380評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,128評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,319評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,879評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,548評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,970評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,229評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,048評論 3 397
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 48,285評論 2 376

推薦閱讀更多精彩內(nèi)容

  • 1、 jQuery 能做什么? jquery是一個豐富的js庫,內(nèi)部對js的很多復(fù)雜的方法進(jìn)行了封裝和加工,比如j...
    zh_yang閱讀 1,414評論 6 13
  • 題目1: jQuery 能做什么? jQuery的核心功能主要有下列幾個: 方便快捷獲取DOM元素: 如果使用純J...
  • 題目1:jQuery 能做什么? jQuery是一個豐富的js庫, 內(nèi)部對js的很多復(fù)雜的方法進(jìn)行了封裝和加工, ...
    cctosuper閱讀 241評論 0 0
  • (續(xù)jQuery基礎(chǔ)(2)) 四、動畫篇 第1章 動畫基礎(chǔ)隱藏和顯示 (1)隱藏元素的hide方法 讓頁面上的元素...
    凜0_0閱讀 462評論 0 6
  • My SubmissionsDifficulty: EasyContributors: Admin Calcula...
    番茄曉蛋閱讀 204評論 0 1