前端jQuery面試題有哪些

這篇文章主要介紹了前端jQuery面試題有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1、jquery的優點

• jQuery 是輕量級的框架，大小不到 30kb；

• 它有強大的選擇器，出色的 DOM 操作的封裝，有可靠的事件處理機制；

• 完善的 ajax，出色的瀏覽器的兼容性；

• 而且支持鏈式操作，隱式迭代。

• 行為層和結構層的分離，還支持豐富的插件，jquery 的文檔也非常的豐富。

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

• 基本選擇器：直接根據 id、CSS 類名、元素名返回匹配的 DOM 元素。

• 層次選擇器：也叫做路徑選擇器，可以根據路徑層次來選擇相應的 DOM 元素。parent > child，prev + next ，prev ~ siblings

• 表單選擇器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；

• 過濾選擇器：在前面的基礎上過濾相關條件，得到匹配的 DOM 元素。基本過濾器選擇器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt內容過濾器選擇器： :contains ，:empty ，:has ，:parent可見性過濾器選擇器：:hidden ，:visible屬性過濾器選擇器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value]        ，[attribute*=value]子元素過濾器選擇器：:nth-child ，:first-child ，:last-child ，:only-child表單過濾器選擇器：:enabled ，:disabled ，:checked ，:selected

3、 jQuery 中$(this) 和 this 關鍵詞有何不同？

• $(this) 返回一個 jQuery 對象，你可以對它調用多個 jQuery 方法，比如用 text() 獲取文本，用val() 獲取值等等。

• this 代表當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。你不能對它調用 jQuery 方法，直到它被 $() 函數包裹，例如 $(this)。

4、$(document).ready()方法和window.onload有什么區別？

• window.onload 方法是是頁面所有元素都加載完畢，包括圖片等所有元素。只能執行一次。

• $(document).ready() 方法是DOM結構繪制完畢后就執行，不必等到加載完畢。 意思就是 DOM 樹加載完畢，就執行，不必等到頁面中圖片或其他外部文件都加載完畢。并且可以寫多個 .ready。

• 所以$(document).ready的執行時間要早于 window.onload

6、jquery中的選擇器 和 css 中的選擇器有區別嗎？

• jQuery 選擇器支持 CSS 里的選擇器，

• jQuery 選擇器可用來添加樣式和添加相應的行為

• CSS 中的選擇器是只能添加相應的樣式

7、操作樣式的常用方法

• addClass() 添加樣式

• removeClass() 刪除樣式

• toggle() 切換樣式

8、jquery中如何來獲取或和設置屬性？

• jQuery 中可以用 attr()方法來獲取和設置元素屬性

• 用 removeAttr() 方法來刪除元素屬性

9、jquery中遍歷節點的常用方法

• children() 獲取子元素,只考慮子元素不考慮后代元素

• next() 獲取下一個緊鄰的兄弟元素

• prev() 獲取上一個緊鄰的兄弟元素

• siblings() 獲取當前元素的所有兄弟元素（除了自己）

• parents() 獲取當前元素的所有祖先元素。

• find() 取得匹配元素中的元素集合 包括子代和后代

10、jQuery中的hover()和toggle()有什么區別？

• hover(fn1,fn2)： 一個模仿懸停事件（鼠標移動到一個對象上面及移出這個對象）的方法。當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。
  

  //當鼠標放在表格的某行上時將class置為over，離開時置為out。
  $("tr").hover(function(){    
      $(this).addClass("over");
  },              
  function(){    
      $(this).addClass("out"); 
  });

• toggle(evenFn,oddFn): 每次點擊時切換要調用的函數。如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數。隨后的每次點擊都重復對這兩個函數的輪番調用。
  

  //每次點擊時輪換添加和刪除名為selected的class。
  $("p").toggle(function(){   
      $(this).addClass("selected");   
  },function(){   
      $(this).removeClass("selected"); 
  });

感謝你能夠認真閱讀完這篇文章，希望小編分享的“前端jQuery面試題有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!