jquery面試題

1.jQuery 庫中的 $() 是什麼？

$() 函數是 jQuery() 函數的別稱， $() 函數用於將任何對象包裹成 jQuery 對象，接着你就被容許調用定義在 jQuery 對象上的多個不一樣方法。你甚至能夠將一個選擇器字符串傳入 $() 函數，它會返回一個包含全部匹配的 DOM 元素數組的 jQuery 對象。

2、網頁上有 5 個 <div> 元素，如何使用 jQuery來選擇它們？

3、jQuery 裏的 ID 選擇器和 class 選擇器有何不一樣？

ID 選擇器使用 ID 來選擇元素，好比 #element1，而 class 選擇器使用 CSS class 來選擇元素。當你只須要選擇一個元素時，使用 ID 選擇器，而若是你想要選擇一組具備相同 CSS class 的元素，就要用 class 選擇器。

從語法角度來講，ID 選擇器和 class 選擇器的另外一個不一樣之處是，前者用字符」#」然後者用字符」.」

$('#LoginTextBox')  // Returns element wrapped as jQuery object with id='LoginTextBox'

$('.active') // Returns all elements with CSS class active.

4、如何在點擊一個按鈕時使用 jQuery 隱藏一個圖片？

$('#ButtonToClick').click(function(){

     $('#ImageToHide').hide();

});

5、$(document).ready() 是個什麼函數？爲何要用它？

文檔就緒函數，當DOM 徹底加載（例如HTML被徹底解析DOM樹構建完成時）後執行，並適用全部瀏覽器。

6、JavaScript window.onload 事件和 jQuery ready 函數有何不一樣？

JavaScript window.onload 事件和 jQuery ready 函數之間的主要區別是，前者除了要等待 DOM 被建立還要等到包括大型圖片、音頻、視頻在內的全部外部資源都徹底加載。若是加載圖片和媒體內容花費了大量時間，用戶就會感覺到定義在 window.onload 事件上的代碼在執行時有明顯的延遲。

另外一方面，jQuery ready() 函數只需對 DOM 樹的等待，而無需對圖像或外部資源加載的等待，從而執行起來更快。使用 jQuery $(document).ready() 的另外一個優點是你能夠在網頁裏屢次使用它，瀏覽器會按它們在 HTML 頁面裏出現的順序執行它們，相反對於 onload 技術而言，只能在單一函數裏使用。鑑於這個好處，用 jQuery ready() 函數比用 JavaScript window.onload 事件要更好些。

7、如何找到全部 HTML select 標籤的選中項？

$('[name=NameOfSelectedTag] :selected')

8、jQuery 裏的 each() 是什麼函數？你是如何使用它的？

遍歷函數，能夠遍歷一個集合

9、你是如何將一個 HTML 元素添加到 DOM 樹中的？

文檔操做函數，如appendTo等

10、你能用 jQuery 代碼選擇全部在段落內部的超連接嗎？

11、$(this) 和 this 關鍵字在 jQuery 中有何不一樣？

$(this) 返回一個 jQuery 對象，你能夠對它調用多個 jQuery 方法，好比用 text() 獲取文本，用val() 獲取值等等。而 this 表明當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。你不能對它調用 jQuery 方法，直到它被 $() 函數包裹，例如 $(this)。

12、你如何使用jQuery來提取一個HTML 標記的屬性 例如. 連接的href?

attr() 方法

13、你如何使用jQuery設置一個屬性值?

attr(name, value)

14、jQuery中 detach() 和 remove() 方法的區別是什麼?

儘管 detach() 和 remove() 方法都被用來移除一個DOM元素, 二者之間的主要不一樣在於 detach() 會保持對過去被解除元素的跟蹤, 所以它能夠被取消解除, 而 remove() 方法則會保持過去被移除對象的引用.

15、你如何利用jQuery來向一個元素中添加和移除CSS類?

addClass() 和 removeClass()

16、使用 CDN 加載 jQuery 庫的主要優點是什麼 ?

節省服務器帶寬以及更快的下載速度這許多的好處以外, 最重要的是，若是瀏覽器已經從同一個CDN下載類相同的 jQuery 版本, 那麼它就不會再去下載它一次. 所以今時今日，許多公共的網站都將jQuery用於用戶交互和動畫, 若是瀏覽器已經有了下載好的jQuery庫，網站就能有很是好的展現機會。

17、jQuery.get() 和 jQuery.ajax() 方法之間的區別是什麼?

ajax() 方法更強大，更具可配置性, 讓你能夠指定等待多久，以及如何處理錯誤。get() 方法是一個只獲取一些數據的專門化方法。

18、jQuery 中的方法鏈是什麼？使用方法鏈有什麼好處？

法鏈是對一個方法返回的結果調用另外一個方法，這使得代碼簡潔明瞭，同時因爲只對 DOM 進行了一輪查找，性能方面更加出色。

19、你要是在一個 jQuery 事件處理程序裏返回了 false 會怎樣？

這一般用於阻止事件向上冒泡。

20、哪一種方式更高效：document.getElementbyId("myId") 仍是 $("#myId")？

第一種，由於它直接調用了 JavaScript 引擎。

21、jQuery中有哪幾種類型的選擇器？

22、請使用jQuery將頁面上的全部元素邊框設置爲2px寬的虛線？

<script language="javascript" type="text/javascript">

         $("*").css("border", "2px dotted red");

</script>

23、當CDN上的jQuery文件不可用時，該怎麼辦？

爲了節省帶寬和腳本引用的穩定性，咱們會使用CDN上的jQuery文件，例如google的jquery cdn服務。可是若是這些CDN上的jQuery服務不可用，咱們還能夠經過如下代碼來切換到本地服務器的jQuery版本：

<script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js "></script>

 

<script type='text/javascript'>//<!--[CDATA[

 

if (typeof jQuery == 'undefined') {

 

document.write(unescape("%3Cscript src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));

 

}//]]-->

 

</script>

 

24、jQuery中的Delegate()函數有什麼做用？

回答：delegate()會在如下兩個狀況下使用到：

 

1、若是你有一個父元素，須要給其下的子元素添加事件，這時你可使用delegate()了，代碼以下：

 

$("ul").delegate("li", "click", function(){

 

$(this).hide();

 

});

2、當元素在當前頁面中不可用時，可使用delegate()

25、怎樣用jQuery編碼和解碼URL？

encodeURIComponent(url) and decodeURIComponent(url)

26、如何用jQuery禁用瀏覽器的前進後退按鈕？

<script type="text/javascript" language="javascript">

 

$(document).ready(function() {

 

     window.history.forward(1);

     //OR

     window.history.forward(-1);

 

});

 

</script>

 

 

27、如何修改jQuery默認編碼（例如默認UTF-8改爲改GB2312）：

$.ajaxSetup({

     ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"}

});

 

28、JavaScript中的做用域與變量聲明提高？

JavaScript的做用域只有兩種：全局做用域和局部做用域，局部做用域是按照函數來區分的。在JavaScript中沒有塊級做用域，函數是js中惟一擁有自身做用域的結構。

聲明的提高：

當前做用域內的聲明都會提高到做用域的最前面，包括變量和函數的聲明。

好比：

(function(){

  var a = "1";

   var f = function(){};

   var b = "2";

   var c = "3";

})();

聲明會被提高爲：

(function(){

  var a,f,b,c;

  a = "1";

  f = function(){};

  b = "2";

  c = "3";

})();

注意函數表達式並無被提高，這也是函數表達式與函數聲明的區別。進一步看兩者的區別：

(function(){

  //var f1,function f2(){}; //hoisting,被隱式提高的聲明

 

  f1(); //ReferenceError: f1 is not defined

  f2();

 

  var f1 = function(){};

  function f2(){}

})();

 

 

29、如何編寫高性能的Javascript？

1、讓代碼簡潔：一些簡略的表達方式也會產生很好的優化。好比x=x+1;在不影響功能的狀況下能夠簡寫爲x++;

2、變量名方法名儘可能在不影響語意的狀況下簡單，好比定義數組的長度能夠取名爲：ArrLen而不須要取爲ArrayLength。

3、關於JS的循環，循環是一種經常使用的流程控制。JS提供了三種循環：for(;;)、while()、for(in)。在這三種循環中for(in)的效率最差，由於它須要查詢Hash鍵，所以應儘可能少用for(in)循環，for(;;)、while()循環的性能基本持平。固然，推薦使用for循環，若是循環變量遞增或遞減，不要單獨對循環變量賦值，而應該使用嵌套的++或–運算符。

4、若是須要遍歷數組，應該先緩存數組長度，將數組長度放入局部變量中，避免屢次查詢數組長度。由於咱們經常要根據字符串、數組的長度進行循環，而一般這個長度是不變的，好比每次查詢a.length，就要額外進行一個操做，而預先把var len=a.length，則就少了一次查詢。

5、儘可能選用局部變量而不是全局變量。局部變量的訪問速度要比全局變量的訪問速度更快，由於全局變量實際上是window對象的成員，而局部變量是放在函數的棧裏的。

6、儘可能少使用eval。每次使用eval須要消耗大量時間，這時候使用JS所支持的閉包能夠實現函數模板。

7、減小對象查找。由於JavaScript的解釋性，因此a.b.c.d.e，須要進行至少4次查詢操做，先檢查a再檢查a中的b，再檢查b中的c，如此往下。因此若是這樣的表達式重複出現，只要可能，應該儘可能少出現這樣的表達式，能夠利用局部變量，把它放入一個臨時的地方進行查詢。

8、字符串鏈接。若是是追加字符串，最好使用s+=anotherStr操做，而不是要使用s=s+anotherStr。若是要鏈接多個字符串，應該少使用+=，如s+=a;s+=b;s+=c;應該寫成s+=a + b + c； 而若是是收集字符串，好比屢次對同一個字符串進行+=操做的話，最好使用一個緩存。怎麼用呢？使用JavaScript數組來收集，最後使用join方法鏈接起來，以下

var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");

30、那些操做會形成內存泄漏？

http://www.jb51.net/article/37685.htm

 

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

this指向的是jQuery.fn的實例對象

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

$.parseJSON

 

$.fn.stringify = function() {

   return JSON.stringify(this);

}

使用：$(array).stringify();

 

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

Query中的$.extend淺拷貝，拷貝對象A時，對象B將拷貝A的全部字段，若是字段是內存地址，B將拷貝地址，若果字段是基元類型，B將複製其值。它的缺點是若是你改變了對象B所指向的內存地址，你同時也改變了對象A指向這個地址的字段。

   jQuery中的$.extend深拷貝，這種方式會徹底拷貝全部數據，優勢是B與A不會相互依賴（A,B徹底脫離關聯）， 缺點是拷貝的速度更慢，代價更大。

$.extend(true,a,b)用法

 

34、jquery.extend 與 jquery.fn.extend的區別？

jQuery.extend(object); 爲擴展jQuery類自己.爲類添加新的方法。

jQuery.fn.extend(object);給jQuery對象添加方法。

 

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

經過函數：queue()、dequeue（）以及clearQueue（）實現隊列的操做。

主要使用場景：對於一系列須要按次序運行的函數特別有用。特別animate動畫，ajax，以及timeout等須要必定時間的函數

 

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

bind(type,[data],fn) 爲每一個匹配元素的特定事件綁定事件處理函數

live(type,[data],fn) 給全部匹配的元素附加一個事件處理函數，即便這個元素是之後再添加進來的

delegate(selector,[type],[data],fn) 指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數

on(events,[selector],[data],fn) 在選擇元素上綁定一個或多個事件的事件處理函數

 

差異：

 

.bind()是直接綁定在元素上

.live()則是經過冒泡的方式來綁定到元素上的。更適合列表類型的，綁定到document DOM節點上。和.bind()的優點是支持動態數據。

.delegate()則是更精確的小範圍使用事件代理，性能優於.live()

.on()則是最新的1.9版本整合了以前的三種方式的新事件綁定機制

 

 

37、jQuery 是經過哪一個方法和 Sizzle 選擇器結合的？

Sizzle，做爲一個獨立全新的選擇器引擎，出如今jQuery 1.3版本以後，並被John Resig做爲一個開源的項目，能夠用於其餘框架：Mool, Dojo，YUI等。

jQuery.fn.find()進入Sizzle

38、針對 jQuery性能的優化方法？

http://www.frontopen.com/1077.html

*基於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++) {}