• jQuery Video Tutorials

jQuery 面試題

上一頁
下一頁

親愛的讀者們，這些jQuery 面試題專為幫助您熟悉面試中可能遇到的jQuery相關問題而設計。根據我的經驗，優秀的面試官很少會預先設定具體的題目，通常會從一些基本概念開始，然後根據您的回答和進一步的討論展開。

jQuery 是一個快速、簡潔的 JavaScript 庫，由 John Resig 於 2006 年建立，其口號是 - 少寫程式碼，多做事情。jQuery 簡化了 HTML 文件遍歷、事件處理、動畫和 Ajax 互動，從而加快了 Web 開發速度。jQuery 是一個旨在透過編寫更少程式碼來簡化各種任務的 JavaScript 工具包。

以下是 jQuery 支援的重要核心功能列表：

  • DOM 操作 - jQuery 使選擇 DOM 元素、遍歷它們以及使用名為 Sizzle 的跨瀏覽器開源選擇器引擎修改其內容變得容易。

  • 事件處理 - jQuery 提供了一種優雅的方式來捕獲各種事件，例如使用者點選連結，而無需在 HTML 程式碼本身中新增事件處理程式。

  • AJAX 支援 - jQuery 可以幫助您使用 AJAX 技術開發響應迅速且功能豐富的網站。

  • 動畫 - jQuery 附帶大量內建動畫效果，您可以在網站中使用。

  • 輕量級 - jQuery 是一個非常輕量級的庫 - 大約 19KB（壓縮和 gzip 壓縮）。

  • 跨瀏覽器支援 - jQuery 具有跨瀏覽器支援，可在 IE 6.0+、FF 2.0+、Safari 3.0+、Chrome 和 Opera 9.0+ 中良好執行。

  • 最新技術 - jQuery 支援 CSS3 選擇器和基本的 XPath 語法。

使用 $(document).ready() 函式。其中的所有內容將在 DOM 載入完畢且頁面內容載入之前載入。

JavaScript 很好地支援物件的概念。您可以使用物件字面量建立物件，如下所示：

var emp = {
   name: "Zara",
   age: 10
};

您可以使用點表示法編寫和讀取物件的屬性，如下所示：

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

您可以使用陣列字面量定義陣列，如下所示：

var x = [];
var y = [1, 2, 3, 4, 5];

陣列具有一個 length 屬性，可用於迭代。我們可以按如下方式讀取陣列的元素：

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

命名函式在定義時具有名稱。可以使用 function 關鍵字定義命名函式，如下所示：

function named(){
   // do some stuff here
}

JavaScript 中的函式可以是命名函式或匿名函式。

匿名函式的定義方式與普通函式類似，但它沒有名稱。

可以！匿名函式可以賦值給變數。

可以！匿名函式可以作為引數傳遞給另一個函式。

JavaScript 變數 arguments 表示傳遞給函式的引數。

使用 typeof 運算子，我們可以獲取傳遞給函式的引數型別。例如：

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

使用 arguments.length 屬性，我們可以獲取傳遞給函式的引數總數。例如：

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

arguments 物件具有一個 callee 屬性，它引用您所在的函式。例如：

function func() {
   return arguments.callee; 
}

func();                // ==> func

JavaScript 中著名的關鍵字 this 始終指向當前上下文。

變數的作用域是程式中定義它的區域。JavaScript 變數只有兩種作用域。

  • 全域性變數 - 全域性變數具有全域性作用域，這意味著它在 JavaScript 程式碼的任何地方都是可見的。

  • 區域性變數 - 區域性變數僅在其定義的函式內可見。函式引數始終是該函式的區域性變數。

區域性變數優先於同名全域性變數。

回撥函式是一個普通的 JavaScript 函式，作為引數或選項傳遞給某些方法。一些回撥函式只是事件，呼叫它們是為了給使用者一個機會在觸發特定狀態時做出反應。

每當從某個內部作用域訪問在當前作用域之外定義的變數時，就會建立閉包。

以下示例顯示了變數 counter 如何在 create、increment 和 print 函式內可見，但在它們外部不可見：

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
  
      print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

charAt() 方法返回指定索引處的字元。

concat() 方法返回指定索引處的字元。

forEach() 方法為陣列中的每個元素呼叫一個函式。

indexOf() 方法返回在呼叫 String 物件中指定值的第一次出現的索引，如果未找到則返回 -1。

length() 方法返回字串的長度。

pop() 方法從陣列中刪除最後一個元素並返回該元素。

push() 方法將一個或多個元素新增到陣列的末尾並返回陣列的新長度。

reverse() 方法反轉陣列元素的順序 - 第一個元素變成最後一個，最後一個元素變成第一個。

sort() 方法對陣列的元素進行排序。

substr() 方法返回從指定位置開始，透過指定字元數的字串中的字元。

toLowerCase() 方法返回轉換為小寫的呼叫字串值。

toUpperCase() 方法返回轉換為大寫的呼叫字串值。

toString() 方法返回數字值的字串表示形式。

jQuery 選擇器是一個函式，它使用表示式根據給定的條件從基於 DOM 的元素中查詢匹配的元素。簡單來說，選擇器用於使用 jQuery 選擇一個或多個 HTML 元素。選擇元素後，我們就可以對所選元素執行各種操作。jQuery 選擇器以美元符號和括號開頭 - $()。

工廠函式 $() 是 jQuery() 函式的同義詞。因此，如果您正在使用任何其他 JavaScript 庫，其中 $ 符號與其他內容衝突，則可以將 $ 符號替換為 jQuery 名稱，並且可以使用函式 jQuery() 代替 $()。

$('tag-name') 選擇文件中所有型別為 tag-name 的元素。例如，$('p') 選擇文件中的所有段落 <p>。

$('#some-id') 選擇文件中 ID 為 some-id 的單個元素。

$('.some-class') 選擇文件中所有類為 some-class 的元素。

$('*') 選擇 DOM 中所有可用的元素。

$('E, F, G') 選擇指定選擇器 E、F 或 G 的所有組合結果，其中選擇器可以是任何有效的 jQuery 選擇器。

attr() 方法可以用於從匹配集合中的第一個元素獲取屬性的值。

attr(name, value) 方法可以用於使用傳遞的值將命名屬性設定到包裝集中的所有元素上。

addClass( classes ) 方法可以用於將定義的樣式表應用於所有匹配的元素。可以使用空格分隔多個類。

removeAttr( name ) 方法可以用於從每個匹配的元素中刪除屬性。

hasClass( class ) 方法如果指定的類至少存在於匹配元素集中，則返回 true。

removeClass(class) 方法刪除匹配元素集中所有或指定的類。

toggleClass(class) 方法在類不存在時新增它，存在時刪除它。

html() 方法獲取第一個匹配元素的 HTML 內容 (innerHTML)。

html( val ) 方法設定每個匹配元素的 HTML 內容。

text( ) 方法獲取所有匹配元素的組合文字內容。

text( val ) 設定所有匹配元素的文字內容。

val( ) 方法獲取第一個匹配元素的輸入值。

val(val) 方法如果在 `` 元素上呼叫，則設定每個匹配元素的 value 屬性；如果在 `