前端jQuery面試題

1、jquery的優(yōu)點

• jQuery 是輕量級的框架，大小不到 30kb；
• 它有強大的選擇器，出色的 DOM 操作的封裝，有可靠的事件處理機制；
• 完善的 ajax，出色的瀏覽器的兼容性；
• 而且支持鏈?zhǔn)讲僮?，隱式迭代。
• 行為層和結(jié)構(gòu)層的分離，還支持豐富的插件，jquery 的文檔也非常的豐富。

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

• 基本選擇器：直接根據(jù) id、CSS 類名、元素名返回匹配的 DOM 元素。
• 層次選擇器：也叫做路徑選擇器，可以根據(jù)路徑層次來選擇相應(yīng)的 DOM 元素。parent > child，prev + next ，prev ~ siblings
• 表單選擇器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；
• 過濾選擇器：在前面的基礎(chǔ)上過濾相關(guān)條件，得到匹配的 DOM 元素?；具^濾器選擇器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt內(nèi)容過濾器選擇器： :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 關(guān)鍵詞有何不同？

• $(this) 返回一個 jQuery 對象，你可以對它調(diào)用多個 jQuery 方法，比如用 text() 獲取文本，用val() 獲取值等等。
• this 代表當(dāng)前元素，它是 JavaScript 關(guān)鍵詞中的一個，表示上下文中的當(dāng)前 DOM 元素。你不能對它調(diào)用 jQuery 方法，直到它被 $() 函數(shù)包裹，例如 $(this)。

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

• window.onload 方法是是頁面所有元素都加載完畢，包括圖片等所有元素。只能執(zhí)行一次。
• $(document).ready() 方法是DOM結(jié)構(gòu)繪制完畢后就執(zhí)行，不必等到加載完畢。 意思就是 DOM 樹加載完畢，就執(zhí)行，不必等到頁面中圖片或其他外部文件都加載完畢。并且可以寫多個 .ready。
• 所以$(document).ready的執(zhí)行時間要早于 window.onload

6、jquery中的選擇器 和 css 中的選擇器有區(qū)別嗎？

• jQuery 選擇器支持 CSS 里的選擇器，
• jQuery 選擇器可用來添加樣式和添加相應(yīng)的行為
• CSS 中的選擇器是只能添加相應(yīng)的樣式

7、操作樣式的常用方法

• ?addClass()? 添加樣式
• ?removeClass()? 刪除樣式
• ?toggle()? 切換樣式

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

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

9、jquery中遍歷節(jié)點的常用方法

• ?children()? 獲取子元素,只考慮子元素不考慮后代元素
• ?next()? 獲取下一個緊鄰的兄弟元素
• ?prev() ?獲取上一個緊鄰的兄弟元素
• ?siblings()? 獲取當(dāng)前元素的所有兄弟元素（除了自己）
• ?parents()? 獲取當(dāng)前元素的所有祖先元素。
• ?find() ?取得匹配元素中的元素集合 包括子代和后代

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

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

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

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

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

推薦好課：jQuery微課、jQuery入門實戰(zhàn)