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

jQuery 能做什么?

  • 就其核心特性而言伯襟,jQuery能夠滿足下列需求囊骤。
    • 取得文檔中的元素晃择。jQuery為準確地獲取需要檢查或操縱的文檔元素,提供了可靠而富有效率的選擇符機制也物。
    • 修改頁面的外觀宫屠。jQeury有較好的瀏覽器兼容性。
    • 改變文檔的內(nèi)容滑蚯±缩澹可以改變文本、插入或翻轉(zhuǎn)圖像告材、列表重新排序坤次,甚至對HTML文檔的整個結(jié)構(gòu)都能重寫和擴充——所有這些只需一個簡單易用的API。
    • 響應(yīng)用戶的交互操作斥赋。jQuery提供了截獲形形色色的頁面事件(比如用戶單擊某個鏈接)的適當方式缰猴。
    • 為頁面添加動態(tài)效果。jQuery中內(nèi)置的一批淡入疤剑、擦除之類的效果洛波,以及制作新效果的工具包,為此提供了便利骚露。
    • 無需刷新頁面從服務(wù)器獲取信息蹬挤。便利的Ajax函數(shù)。
    • 簡化常見的JavaScript任務(wù)棘幸。jQuery也改進了對基本的JavaScript數(shù)據(jù)結(jié)構(gòu)的操作(例如迭代和數(shù)組操作等)焰扳。

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

  • jQuery對象是jQuery在DOM原生對象的基礎(chǔ)上進行封裝吨悍,使其能夠調(diào)用jQuery的方法扫茅。

  • jQuery對象轉(zhuǎn)換為DOM對象:

    1.
    var $tab = $('.tab')
    $tab[0]  // <ul>...</ul>
    
    2.
    var $tab = $('.tab')
    $tab.get(0)  // <ul>...</ul>
    
  • DOM對象轉(zhuǎn)換為jQuery對象:

    var tab = document.querySelector('.tab')
    var $tab = $(tab)
    

jQuery中如何綁定事件?bind育瓜、unbind葫隙、delegate、live躏仇、on恋脚、off都有什么作用?推薦使用哪種焰手?使用on綁定事件使用事件代理的寫法糟描?

  • bind:為一個元素綁定一個事件處理程序。

  • unbind:從元素上刪除一個以前附加事件處理程序书妻。

  • delegate:為所有匹配選擇器(selector參數(shù))的元素綁定一個或多個事件處理函數(shù)船响,基于一個指定的根元素的子集,匹配的元素包括那些目前已經(jīng)匹配到的元素躲履,也包括那些今后可能匹配到的元素见间。

  • live:附加一個事件處理器到匹配目前選擇器的所有元素,現(xiàn)在和未來工猜。

  • on:在選定的元素上綁定一個或多個事件處理函數(shù)米诉。

  • off() 方法移除用.on()綁定的事件處理程序。

  • 從jQuery 1.7開始域慷,.on() 方法是將事件處理程序綁定到文檔(document)的首選方法荒辕。示例:

    $('.class').on('click', function(){...})
    事件代理寫法:
    <ul>
      <li>1</li>
      <li>2</li>
      <li>2</li>
      <li>2</li>
    </ul>
    <input type="text">
    $('ul').on('click', 'li', function() {
      var value = $(this).text()
      $('input').val(value)
    })
    

jQuery 如何展示/隱藏元素汗销?

  • 1.給元素換class犹褒,來實現(xiàn)隱藏元素,前提是換的class樣式定義好了隱藏屬性弛针。
  • 2.通過jquery的css方法 / attr方法叠骑,設(shè)置css屬性。
  • 3.通過jquery的show()削茁、hide()方法宙枷,設(shè)置元素隱藏。
  • 4.通過jquery的toggle()方法茧跋,切換 hide() 和 show() 方法慰丛。

jQuery 動畫如何使用?

  • animate()方法根據(jù)一組 CSS 屬性瘾杭,執(zhí)行自定義動畫诅病。示例:

    <div id="clickme">
      Click here
    </div>
    ![](book.png)
    
    // 同時對透明度,左偏移值和高度應(yīng)用動畫:
    $('#clickme').click(function() {
      $('#book').animate({
        opacity: 0.25,
        left: '+=50',
        height: '+=50'
      }, 5000);
    });
    

如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容?如何設(shè)置和獲取元素內(nèi)部文本贤笆?

  • html()方法獲取集合中第一個匹配元素的HTML內(nèi)容 或 設(shè)置每一個匹配元素的html內(nèi)容蝇棉。示例:

    <div class="demo-container">
      <div class="demo-box">Demonstration Box</div>
    </div>
    
    // 設(shè)置內(nèi)容
    $('div.demo-container')
    .html('<p>All new content. <em>You bet!</em></p>');
    // 獲取內(nèi)容
    $('div.demo-container')
    .html('');
    
  • text()方法得到匹配元素集合中每個元素的文本內(nèi)容結(jié)合,包括他們的后代芥永,或設(shè)置匹配元素集合中每個元素的文本內(nèi)容為指定的文本內(nèi)容篡殷。示例:

    <p>Test Paragraph.</p>
    <script>
      // 添加文本
      $("p").text("<b>Some</b> new text.");
    
      // 獲取文本
      $("p").text();
    </script>
    

如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容?如何設(shè)置和獲取元素屬性埋涧?

  • val()方法獲取匹配的元素集合中第一個元素的當前值或設(shè)置匹配的元素集合中每個元素的值板辽。示例:

    <input id="ipt1" type="text" value="some text"/>
    <input id="ipt2" type="text" value="some text"/>
    <p></p>
    <script>
        $("#ipt1").keyup(function () {
          var value = $(this).val();
          $("#ipt2").val(value);
        });
    </script>
    
  • attr()方法獲取匹配的元素集合中的第一個元素的屬性的值 或 設(shè)置每一個匹配元素的一個或多個屬性。示例:

    <p>
      Once there was a 
      <em title="huge, gigantic">large</em> dinosaur...
    </p>
    <script>
    var title = $("em").attr("title");
    $("em").attr("title", "gg");
    </script>
    

使用 jQuery實現(xiàn)二級菜單

使用 jQuery tab切換效果

實現(xiàn)添加圖片效果

tab滑動效果

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末飞袋,一起剝皮案震驚了整個濱河市戳气,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌巧鸭,老刑警劉巖瓶您,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異纲仍,居然都是意外死亡呀袱,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進店門郑叠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來夜赵,“玉大人,你說我怎么就攤上這事乡革】苌” “怎么了?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵沸版,是天一觀的道長嘁傀。 經(jīng)常有香客問我,道長视粮,這世上最難降的妖魔是什么细办? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮蕾殴,結(jié)果婚禮上笑撞,老公的妹妹穿的比我還像新娘。我一直安慰自己钓觉,他們只是感情好茴肥,可當我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著荡灾,像睡著了一般瓤狐。 火紅的嫁衣襯著肌膚如雪堕虹。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天芬首,我揣著相機與錄音赴捞,去河邊找鬼。 笑死郁稍,一個胖子當著我的面吹牛赦政,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播耀怜,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼恢着,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了财破?” 一聲冷哼從身側(cè)響起掰派,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎左痢,沒想到半個月后靡羡,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡俊性,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年耙旦,在試婚紗的時候發(fā)現(xiàn)自己被綠了赐劣。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片筋帖。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡酗电,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出典徊,到底是詐尸還是另有隱情杭煎,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布卒落,位于F島的核電站羡铲,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏导绷。R本人自食惡果不足惜犀勒,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一屎飘、第九天 我趴在偏房一處隱蔽的房頂上張望妥曲。 院中可真熱鬧,春花似錦钦购、人聲如沸檐盟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽葵萎。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間羡忘,已是汗流浹背谎痢。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留卷雕,地道東北人节猿。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像漫雕,于是被迫代替她去往敵國和親滨嘱。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,514評論 2 348

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