jQuery 能做什么？

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
jQuery是一個快速，小巧，功能豐富的 JavaScript 庫。 它使諸如 HTML 文檔遍歷和操縱，事件處理，動畫和 Ajax 等事情變得簡單得多，而且易于使用的 API 可以在多種瀏覽器中使用。

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

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

• 區(qū)別

  • jQuery 對象是通過對 DOM 對象封裝后產生的對象，jQuery 對象只能使用 jQuery 里面的方法，不能使用 DOM 中的方法
  • DOM 對象是 JavaScript 固有的對象，DOM 對象可以使用 JavaScript 原生方法，不可以使用 jQuery 中的方法

• 轉換

  • jQuery 對象轉換為 DOM 對象可以通過類數組下標的獲取方式或者 get 方法獲取指定 index 的 DOM 對象。

    $('div')[2];
    $('div').eq(2);
    $('div')get();
    

  • DOM 對象轉換為 jQuery 對象可以使用 $()將 DOM 對象包裹起來既可以獲取到一個 jQuery 對象

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

• jQuery 中 通過 on 方法綁定事件，通過 off 方法卸載事件

  • bind 為一個元素綁定一個事件處理程序
  • unbind 從元素上刪除一個以前附加事件處理程序
  • delegate 為所有匹配選擇器（selector參數）的元素綁定一個或多個事件處理函數，基于一個指定的根元素的子集，匹配的元素包括那些目前已經匹配到的元素，也包括那些今后可能匹配到的元素
  • live 附加一個事件處理器到匹配目前選擇器的所有元素，現在和未來
  • on 在選定的元素上綁定一個或多個事件處理函數
  • off 移除一個事件處理函數

• 推薦使用on 方法綁定事件， off 方法卸載事件

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

  $('.box ul').on('click', 'li', function(){
    // Do something
  })
  

jQuery 如何展示/隱藏元素？

• 通過設置 CSS 來實現

  var $h1 = $('h1');
  $h1.css('display','none')
  

• 通過設置 class 來實現

  // CSS 部分
  .class {
    display: none;
  }
  // JS 部分
  var $h1 = $('h1');
  $h1.addClass('class');
  $h1.removeClass('class');
  

• 通過 jQuery 動畫來實現

  var $h1 = $('h1');
  $h1.hide();  // 隱藏
  $h1.show();  // 顯示
  $h1.toggle(); // 切換隱藏/顯示
  

jQuery 動畫如何使用？

• 四個參數

  • duration 動畫持續(xù)時長，單位毫秒，默認400ms；
  • easing 過渡使用哪種緩動函數，jQuery 自身提供 linear 和 swing；
  • complete 在動畫完成時執(zhí)行的函數；
  • opacity 不透明度，1為不透明，0為完全透明；

• 基礎用法

  • 顯示元素
    .show([duration ] [, easing ] [, complete ])
  • 隱藏元素
    .hide([duration ] [, easing ] [, complete ])
  • 切換隱藏或顯示
    .toggle([duration ] [,easing ] [,complete ])

• 漸變

  • 淡入顯示
    .fadeIn( [duration ] [, easing ] [, complete ] )

  • 淡出隱藏
    .fadeOut( [duration ] [, easing ] [, complete ] )

  • 調整匹配元素的透明度，方法通過匹配元素的不透明度做動畫效果
    .fadeTo( duration, opacity [, easing ] [, complete ] )

  • 通過匹配的元素的不透明度動畫，來顯示或隱藏它們，方法執(zhí)行匹配元素的不透明度動畫。當被可見元素調用時，元素不透明度一旦達到0，display 樣式屬性設置為 none ，所以元素不再影響頁面的布局。
    .fadeToggle( [duration ] [, easing ] [, complete ] )

• 滑動

  • 用滑動動畫顯示一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑下去，彌補了顯示的方式
    .slideDown( [duration ] [, easing ] [, complete ] )
  • 用滑動動畫隱藏一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面的下面部分滑上去，當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為 none，以確保該元素不再影響頁面布局。
    .slideUp( [duration ] [, easing ] [, complete ] )
  • 用滑動動畫顯示或隱藏一個匹配元素
    .slideToggle( [duration ] [, easing ] [, complete ] )

    • 用滑動動畫顯示或隱藏一個匹配元素，方法將給匹配元素的高度的動畫，這會導致頁面中，在這個元素下面的內容往下或往上滑。display屬性值保存在jQuery的數據緩存中，所以display可以方便以后可以恢復到其初始值。

    • 如果一個元素的display屬性值為inline，然后是隱藏和顯示，這個元素將再次顯示inline。當一個隱藏動畫后，高度值達到0的時候，display 樣式屬性被設置為none，以確保該元素不再影響頁面布局。

• 自定義動畫
  .animate( properties [, duration ] [, easing ] [, complete ] )
properties 是一個 CSS 屬性和值的對象,動畫將根據這組對象移動。
  例子：

  $('#clickme').click(function() {
    $('#book').animate({
      opacity: 0.25,
      left: '+=50',
      height: 'toggle'
    }, 5000, function() {
      // Animation complete.
    });
  });
  

• 停止動畫

  • 清除動畫隊列中未執(zhí)行的動畫
    .clearQueue( [queueName ] )
  • 停止當前動畫，并清除動畫隊列中所有未完成的動畫,最終展示動畫隊列最后一幀的最終狀態(tài)
    .finish( [queue ] )
  • 停止當前正在運行的動畫
    .stop( [clearQueue ] [, jumpToEnd ] )
    • clearQueue(default: false)
    • jumpToEnd(default: false)

如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本？

• 設置和獲取內部 HTML 內容
  .html([string])
  這是一個讀寫兩用的方法，用于獲取/修改元素的 innerHTML

  1. 當沒有傳遞參數的時候，返回元素的 innerHTML
  2. 當傳遞了一個 string 參數的時候，修改元素的 innerHTML 為參數值

   $('div').html();
   $('div').html(`123`);
  

• 設置和獲取元素內部文本
  .text([string])
  這是一個讀寫兩用的方法，用于獲取/修改元素的 innerText

  1. 當沒有傳遞參數的時候，返回元素的 innerText
  2. 當傳遞了一個 string 參數的時候，修改元素的 innerText 為參數值

   $('div').text();
   $('div').text(`123`);
  

如何設置和獲取表單用戶輸入或者選擇的內容？如何設置和獲取元素屬性？

• 設置和獲取表單用戶輸入或者選擇的內容
  .val([value])
  這是一個讀寫雙用的方法，用來處理 input 的 value，當方法沒有參數的時候返回 input 的 value 值，當傳遞了一個參數的時候，方法修改 input 的 value 值為參數值

  $('input').val()
  $('input').val()
  

• 設置和獲取元素屬性

  • 獲取元素特定屬性的值
    .attr(attributeName)

  • 為元素屬性賦值
    .attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )

  • 為匹配的元素集合中的每個元素中移除一個屬性（attribute）
    .removeAttr()

題目8

點擊查看

題目9

點擊查看

題目10

點擊查看

題目11

點擊查看