jQuery選擇器_Dom操作_樣式_事件處理_動畫

1. jQuery 能做什么?

jQuery 是一個高效鼎兽、精簡并且功能豐富的 JavaScript 工具庫答姥。它提供的 API 易于使用且兼容眾多瀏覽器,這讓諸如 HTML 文檔遍歷和操作谚咬、事件處理鹦付、動畫和 Ajax 操作更加簡單。

2. jQuery 對象和 DOM 原生對象有什么區(qū)別择卦?如何轉(zhuǎn)化敲长?

  • 區(qū)別:
    DOM對象 :W3C標(biāo)準(zhǔn)用于操作文檔的API郎嫁。具體點(diǎn)來說就是指 HTML 文本中的所有被標(biāo)簽標(biāo)記的東西 ,在js里可以用 getElementById 等傳統(tǒng)的方法獲得的對象祈噪,擁有原生對象的屬性和方法泽铛。
    jQuery對象:將DOM原生對象進(jìn)行封裝后得到的類數(shù)組對象,可以使用jq對象的方法和屬性
  • 轉(zhuǎn)化:
    • jquery提供了兩種方法將一個jquery對象轉(zhuǎn)換成一個DOM對象辑鲤,[index]和. get(index)
      var $v =$("#v") ; //jQuery對象 
      var v=$v[0]; //DOM對象 
      
    • 使用 $(DOM對象)就可以將DOM對象轉(zhuǎn)化為jQuery對象

3. jQuery中如何綁定事件盔腔?bind、unbind月褥、delegate铲觉、live、on吓坚、off都有什么作用撵幽?推薦使用哪種?使用on綁定事件使用事件代理的寫法礁击?

  • 綁定事件:一般使用on: $(XX).on( events [,selector ] [,data ], handler(eventObject) )這是1.7版本后統(tǒng)一的寫法盐杂。
  • .bind()為一個元素綁定一個事件處理程序。
  • .unbind()從元素上刪除一個以前附加事件處理程序哆窿。
  • .delegate()
    為所有匹配選擇器(selector參數(shù))的元素綁定一個或多個事件處理函數(shù)链烈,基于一個指定的根元素的子集,匹配的元素包括那些目前已經(jīng)匹配到的元素挚躯,也包括那些今后可能匹配到的元素
$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
})
  • .live() 附加一個事件處理器到匹配目前選擇器的所有元素强衡,現(xiàn)在和未來。
  • .on() 在選定的元素上綁定一個或多個事件處理函數(shù)
  • .off() 移除一個事件處理函數(shù)码荔。

4. jQuery 如何展示/隱藏元素漩勤?

  • .hide()隱藏匹配的元素
  • .show() 顯示匹配
  • .toggle()顯示或隱藏匹配元素的元素 通過改變CSS的display屬性,匹配的元素將被立即顯示或隱藏缩搅,沒有動畫越败。如果元素是最初顯示,它會被隱藏硼瓣,如果隱藏的究飞,它會顯示出來

5. jQuery 動畫如何使用?

  • . 基本特效
    .hide(),.show(),.toggle()

  • 自定義
    .animate()根據(jù)一組 CSS 屬性堂鲤,執(zhí)行自定義動畫

    $("#block").animate({
      width: "70%",
      opacity: 0.4,
      marginLeft: "0.6in",
      fontSize: "3em",
      borderWidth: "10px"
    }, 1500 )
    

    所有用于動畫的屬性必須是數(shù)字的亿傅,除非另有說明;這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能瘟栖。(例如葵擎,width, height或者left可以執(zhí)行動畫,但background-color不能慢宗,除非使用jQuery.Color()插件坪蚁。)屬性值的單位像素(px),除非另有說明奔穿。單位em和 %需要指定使用。
    .clearQueue()從列隊中移除所有未執(zhí)行的項
    當(dāng).clearQueue()方法被訪問的時候敏晤,所有在這個列隊中未執(zhí)行的函數(shù)將被移除
    .delay() 設(shè)置一個延時來推遲執(zhí)行隊列中后續(xù)的項
    .dequeue()執(zhí)行匹配元素隊列的下一個函數(shù)
    當(dāng).dequeue()被調(diào)用的時候贱田,列隊中的下一個函數(shù)將從這個列隊中被移除,然后再執(zhí)行嘴脾。這個執(zhí)行的函數(shù)中也應(yīng)當(dāng)直接或間接的包含 .dequeue()語句男摧,這樣才能繼續(xù)執(zhí)行隊列中的其它函數(shù),所以,這個序列可以繼續(xù)译打。
    .finish() 停止當(dāng)前正在運(yùn)行的動畫耗拓,刪除所有排隊的動畫,并完成匹配元素所有的動畫
    jQuery.fx.interval 這個屬性可以設(shè)置動畫每秒運(yùn)行幀數(shù)奏司。默認(rèn)是13毫秒乔询。該屬性值越小,在速度較快的瀏覽器中(例如韵洋,Chrome)竿刁,動畫執(zhí)行的越流暢,但是會影響程序的性能并且占用更多的 CPU 資源搪缨。
    .queue() 顯示在匹配的元素上的已經(jīng)執(zhí)行的函數(shù)列隊食拜。在匹配元素上操作已經(jīng)附加函數(shù)的列表
    .stop() 當(dāng)一個元素調(diào)用.stop(),當(dāng)前正在運(yùn)行的動畫(如果有的話)立即停止

  • 漸變
    .fadeIn()通過淡入的方式顯示匹配元素
    fadeOut()通過淡出的方式隱藏匹配元素
    fadeTo()調(diào)整匹配元素的透明度
    fadeToggle()通過匹配的元素的不透明度動畫副编,來顯示或隱藏它們

  • 滑動
    .slideDown()用滑動動畫顯示一個匹配元素负甸。
    .slideToggle()用滑動動畫顯示或隱藏一個匹配元素。
    .slideUp()用滑動動畫隱藏一個匹配元素痹届。

6. 如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容呻待?如何設(shè)置和獲取元素內(nèi)部文本?

  • 設(shè)置元素內(nèi)部 HTML 內(nèi)容$('div').html('\<h1\>Hello world\</h1\>')
  • 獲取元素內(nèi)部 HTML 內(nèi)容var $content = $('div').html()
  • 設(shè)置元素內(nèi)部文本$('div').text('Hello world')
  • 獲取元素內(nèi)部文本var $title = $('h1').text()

7:如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容短纵?如何設(shè)置和獲取元素屬性带污?

  • 設(shè)置表單用戶輸入或者選擇的內(nèi)容$('#username").val('textarea')
  • 獲取表單用戶輸入或者選擇的內(nèi)容var $username = $('#username").val()
  • 設(shè)置元素屬性$("div").attr("color","#fff") || $('div').prop('color','red')
  • 獲取元素屬性$("div").attr("color") || $('div').prop('color')

8. 使用 jQuery實現(xiàn)如下效果 demo

預(yù)覽- http://js.jirengu.com/puqiz/2/edit

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

預(yù)覽- http://js.jirengu.com/zarut/4/edit?html,output

10. 實現(xiàn)如下效果 demo

預(yù)覽- http://js.jirengu.com/pogan/1/edit?output

11.完成 左右切換的 Tab 效果

無動畫效果預(yù)覽- http://js.jirengu.com/zibew/1/edit?html,css,js,output
tab 上下滑動預(yù)覽- http://js.jirengu.com/tubox/1/edit?html,css,js,output
tab 左右滑動預(yù)覽- http://js.jirengu.com/robov/1/edit?html,css,js,output

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市香到,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌报破,老刑警劉巖悠就,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異充易,居然都是意外死亡梗脾,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進(jìn)店門盹靴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來炸茧,“玉大人瑞妇,你說我怎么就攤上這事∷蠊冢” “怎么了辕狰?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長控漠。 經(jīng)常有香客問我蔓倍,道長,這世上最難降的妖魔是什么盐捷? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任偶翅,我火速辦了婚禮,結(jié)果婚禮上碉渡,老公的妹妹穿的比我還像新娘聚谁。我一直安慰自己,他們只是感情好滞诺,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布形导。 她就那樣靜靜地躺著,像睡著了一般铭段。 火紅的嫁衣襯著肌膚如雪骤宣。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天序愚,我揣著相機(jī)與錄音憔披,去河邊找鬼。 笑死爸吮,一個胖子當(dāng)著我的面吹牛芬膝,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播形娇,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼锰霜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了桐早?” 一聲冷哼從身側(cè)響起癣缅,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎哄酝,沒想到半個月后友存,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡陶衅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年屡立,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片搀军。...
    茶點(diǎn)故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡膨俐,死狀恐怖勇皇,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情焚刺,我是刑警寧澤敛摘,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站檩坚,受9級特大地震影響着撩,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜匾委,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一拖叙、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧赂乐,春花似錦薯鳍、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至浅役,卻和暖如春斩松,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背觉既。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工惧盹, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人瞪讼。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓钧椰,卻偏偏與公主長得像,于是被迫代替她去往敵國和親符欠。 傳聞我的和親對象是個殘疾皇子嫡霞,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評論 2 349

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