App下載

前端jQuery面試題

猿友 2021-01-27 14:33:46 瀏覽數(shù) (6877)
反饋

1、jquery的優(yōu)點(diǎn)

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

2、jQuery中有哪幾種類(lèi)型的選擇器？

  • 基本選擇器：直接根據(jù) id、CSS 類(lèi)名、元素名返回匹配的 DOM 元素。
  • 層次選擇器：也叫做路徑選擇器，可以根據(jù)路徑層次來(lái)選擇相應(yīng)的 DOM 元素。parent > child，prev + next ，prev ~ siblings
  • 表單選擇器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；
  • 過(guò)濾選擇器：在前面的基礎(chǔ)上過(guò)濾相關(guān)條件，得到匹配的 DOM 元素?；具^(guò)濾器選擇器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt內(nèi)容過(guò)濾器選擇器： :contains ，:empty ，:has ，:parent可見(jiàn)性過(guò)濾器選擇器：:hidden ，:visible屬性過(guò)濾器選擇器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]子元素過(guò)濾器選擇器：:nth-child ，:first-child ，:last-child ，:only-child表單過(guò)濾器選擇器：:enabled ，:disabled ，:checked ，:selected

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

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

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

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

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

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

7、操作樣式的常用方法

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

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

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

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

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

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

  • hover(fn1,fn2)： 一個(gè)模仿懸停事件（鼠標(biāo)移動(dòng)到一個(gè)對(duì)象上面及移出這個(gè)對(duì)象）的方法。當(dāng)鼠標(biāo)移動(dòng)到一個(gè)匹配的元素上面時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)。當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)。 
    //當(dāng)鼠標(biāo)放在表格的某行上時(shí)將class置為over，離開(kāi)時(shí)置為out。
$("tr").hover(function(){    
    $(this).addClass("over");
},              
function(){    
    $(this).addClass("out"); 
});
  • toggle(evenFn,oddFn): 每次點(diǎn)擊時(shí)切換要調(diào)用的函數(shù)。如果點(diǎn)擊了一個(gè)匹配的元素，則觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)再次點(diǎn)擊同一元素時(shí)，則觸發(fā)指定的第二個(gè)函數(shù)。隨后的每次點(diǎn)擊都重復(fù)對(duì)這兩個(gè)函數(shù)的輪番調(diào)用。 
    //每次點(diǎn)擊時(shí)輪換添加和刪除名為selected的class。
$("p").toggle(function(){   
    $(this).addClass("selected");   
},function(){   
    $(this).removeClass("selected"); 
});

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


jQuery

0 人點(diǎn)贊