前端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"); 
  });