web前端面試題-jQuery篇（持續更新...）

1，JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？

jquery源碼封裝在一個匿名函數的自執行環境中，有助於防止變量的全局污染，而後經過傳入window對象參數，可使window對象做爲局部變量使用，好處是當jquery中訪問window對象的時候，就不用將做用域鏈退回到頂層做用域了，從而能夠更快的訪問window對象。一樣，傳入undefined參數，能夠縮短查找undefined時的做用域鏈。

(function( window, undefined ) {
 
         //用一個函數域包起來，就是所謂的沙箱
 
         //在這裏邊var定義的變量，屬於這個函數域內的局部變量，避免污染全局
 
         //把當前沙箱須要的外部變量經過函數參數引入進來
 
         //只要保證參數對內提供的接口的一致性，你還能夠隨意替換傳進來的這個參數
 
        window.jQuery = window.$ = jQuery;
 
})( window );

jquery將一些原型屬性和方法封裝在了jquery.prototype中，爲了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法。

有一些數組或對象的方法常常能使用到，jQuery將其保存爲局部變量以提升訪問速度。

jquery實現的鏈式調用能夠節約代碼，所返回的都是同一個對象，能夠提升代碼效率。

jquery的優點就是鏈式操做，隱式迭代

2，jQuery.fn的init方法返回的this指的是什麼對象？爲何要返回this？

返回的this指的就是當前操做後的jquery對象，爲了實現jquery的鏈式操做

3，jquery中如何將數組轉化爲json字符串，而後再轉化回來？

使用jquery全局方法$.parseJSON這個方法

4，jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？

jQuery中的$.extend淺拷貝，拷貝對象A時，對象B將拷貝A的全部字段，若是字段是內存地址，B將拷貝地址，若果字段是基元類型，B將複製其值。它的缺點是若是你改變了對象B所指向的內存地址，你同時也改變了對象A指向這個地址的字段。
$.extend(a,b)
jQuery中的$.extend深拷貝，這種方式會徹底拷貝全部數據，優勢是B與A不會相互依賴（A,B徹底脫離關聯）， 缺點是拷貝的速度更慢，代價更大。
$.extend(true,a,b)

5，jquery.extend 與 jquery.fn.extend的區別？

jQuery.extend(object);　它是爲jQuery類添加類方法，能夠理解爲添加靜態方法。如：

jQuery.extend({
   min: function(a, b) { return a < b ? a : b; },
   max: function(a, b) { return a > b ? a : b; 
 });
 jQuery.min(2,3); //  2 
 jQuery.max(4,5); //  5

jQuery.extend(target, object1, [objectN])用一個或多個其餘對象來擴展一個對象，返回被擴展的對象。

var settings = { validate: false, limit: 5, name: "foo" }; 
 var options = { validate: true, name: "bar" }; 
 jQuery.extend(settings, options);

結果：settings == { validate: true, limit: 5, name: "bar" }

jQuery.fn.extend(object);

$.fn是什麼?

$.fn是指jQuery的命名空間，fn上的成員(方法function及屬性property)，會對jQuery實例每個有效。

查看jQuery代碼，就不難發現。

jQuery.fn = jQuery.prototype = {

init: function( selector, context ) {//....

};

原來 jQuery.fn = jQuery.prototype.

因此，它是對jQuery.prototype進得擴展，就是爲jQuery類添加「成員函數」。jQuery類的實例可使用這個「成員函數」。

jQuery.fn.extend(object); 擴展jQuery對象方法

jQuery.extend 擴展jQuery全局方法

6，jQuery 的隊列是如何實現的？隊列能夠用在哪些地方？

jQuery核心中, 有一組隊列控制方法, 這組方法由queue()/dequeue()/clearQueue()三個方法組成, 它對須要連續按序執行的函數的控制能夠說是簡明自如, 主要應用於animate ()方法, ajax以及其餘要按時間順序執行的事件中.

var _slideFun = [
  function() {
    $('.one').delay(500).animate({
     top: '+=270px'
    },500, _takeOne);
  },
  function() {
    $('.two').delay(300).animate({
     top: '+=270px'
    },500, _takeOne);
  }
 ];
 $('#demo').queue('slideList', _slideFun);
 var _takeOne = function() {
   $('#demo').dequeue('slideList');
 };
 _takeOne();

7，談一下Jquery中的bind(),live(),delegate(),on()的區別？

jquery中bind(),live(),delegate()都是基於on實現的，
on是封裝了一個兼容的事件綁定方法，在選擇元素上綁定一個或多個事件的事件處理函數
bind(type,[data],fn) 爲每一個匹配元素的特定事件綁定事件處理函數
live(type,[data],fn) 給全部匹配的元素附加一個事件處理函數，即便這個元素是之後再添加進來的
delegate(selector,[type],[data],fn) 指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數
差異：
.bind()是直接綁定在元素上
.live()則是經過冒泡的方式來綁定到元素上的。更適合列表類型的，綁定到document DOM節點上。和.bind()的優點是支持動態數據。
.delegate()則是更精確的小範圍使用事件代理，性能優於.live()
.on()則是最新的1.9版本整合了以前的三種方式的新事件綁定機制

8，JQuery一個對象能夠同時綁定多個事件，這是如何實現的？

jquery中事件綁定的函數中傳遞多個事件參數，執行事件的時候判斷執行事件的類型

9，針對 jQuery性能的優化方法？

*基於Class的選擇性的性能相對於Id選擇器開銷很大，由於需遍歷全部DOM元素。

*頻繁操做的DOM，先緩存起來再操做。用Jquery的鏈式調用更好。

好比：var str=$("a").attr("href"); 
 *for (var i = size; i < arr.length; i++) {}

for 循環每一次循環都查找了數組 (arr) 的.length 屬性，在開始循環的時候設置一個變量來存儲這個數字，可讓循環跑得更快：

for (var i = size, length = arr.length; i < length; i++) {}

10，Jquery與jQuery UI 有啥區別？

(1) jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。 (2) jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等。 (3) jQuery自己注重於後臺，沒有漂亮的界面，而jQuery UI則補充了前者的不足，他提供了華麗的展現界面，令人更容易接受。既有強大的後臺，又有華麗的前臺。jQuery UI是jQuery插件，只不過專指由jQuery官方維護的UI方向的插件。