jQuery 能做什么？

• 就其核心特性而言，jQuery能夠滿(mǎn)足下列需求。
  • 取得文檔中的元素。jQuery為準(zhǔn)確地獲取需要檢查或操縱的文檔元素，提供了可靠而富有效率的選擇符機(jī)制。
  • 修改頁(yè)面的外觀。jQeury有較好的瀏覽器兼容性。
  • 改變文檔的內(nèi)容?？梢愿淖兾谋尽⒉迦牖蚍D(zhuǎn)圖像、列表重新排序，甚至對(duì)HTML文檔的整個(gè)結(jié)構(gòu)都能重寫(xiě)和擴(kuò)充——所有這些只需一個(gè)簡(jiǎn)單易用的API。
  • 響應(yīng)用戶(hù)的交互操作。jQuery提供了截獲形形色色的頁(yè)面事件（比如用戶(hù)單擊某個(gè)鏈接）的適當(dāng)方式。
  • 為頁(yè)面添加動(dòng)態(tài)效果。jQuery中內(nèi)置的一批淡入、擦除之類(lèi)的效果，以及制作新效果的工具包，為此提供了便利。
  • 無(wú)需刷新頁(yè)面從服務(wù)器獲取信息。便利的Ajax函數(shù)。
  • 簡(jiǎn)化常見(jiàn)的JavaScript任務(wù)。jQuery也改進(jìn)了對(duì)基本的JavaScript數(shù)據(jù)結(jié)構(gòu)的操作（例如迭代和數(shù)組操作等）。

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

• jQuery對(duì)象是jQuery在DOM原生對(duì)象的基礎(chǔ)上進(jìn)行封裝，使其能夠調(diào)用jQuery的方法。

• jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象：

  1.
  var $tab = $('.tab')
  $tab[0]  // <ul>...</ul>
  
  2.
  var $tab = $('.tab')
  $tab.get(0)  // <ul>...</ul>
  

• DOM對(duì)象轉(zhuǎn)換為jQuery對(duì)象：

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

jQuery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫(xiě)法？

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

• unbind:從元素上刪除一個(gè)以前附加事件處理程序。

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

• live:附加一個(gè)事件處理器到匹配目前選擇器的所有元素，現(xiàn)在和未來(lái)。

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

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

• 從jQuery 1.7開(kāi)始，.on() 方法是將事件處理程序綁定到文檔（document）的首選方法。示例：

  $('.class').on('click', function(){...})
  事件代理寫(xiě)法：
  <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.給元素?fù)Qclass，來(lái)實(shí)現(xiàn)隱藏元素，前提是換的class樣式定義好了隱藏屬性。
• 2.通過(guò)jquery的css方法 / attr方法，設(shè)置css屬性。
• 3.通過(guò)jquery的show()、hide()方法，設(shè)置元素隱藏。
• 4.通過(guò)jquery的toggle()方法，切換 hide() 和 show() 方法。

jQuery 動(dòng)畫(huà)如何使用？

• animate()方法根據(jù)一組 CSS 屬性，執(zhí)行自定義動(dòng)畫(huà)。示例：

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

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

• html()方法獲取集合中第一個(gè)匹配元素的HTML內(nèi)容 或 設(shè)置每一個(gè)匹配元素的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()方法得到匹配元素集合中每個(gè)元素的文本內(nèi)容結(jié)合，包括他們的后代，或設(shè)置匹配元素集合中每個(gè)元素的文本內(nèi)容為指定的文本內(nèi)容。示例：

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

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

• val()方法獲取匹配的元素集合中第一個(gè)元素的當(dāng)前值或設(shè)置匹配的元素集合中每個(gè)元素的值。示例：

  <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()方法獲取匹配的元素集合中的第一個(gè)元素的屬性的值 或 設(shè)置每一個(gè)匹配元素的一個(gè)或多個(gè)屬性。示例：

  <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實(shí)現(xiàn)二級(jí)菜單

使用 jQuery tab切換效果

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

tab滑動(dòng)效果