最常見的 20 個 jQuery 面試問題及答案


JavaScript 是客戶端腳本的標準語言宪郊,而 jQuery 使得編寫 JavaScript 更加簡單嘱朽。你可以只用寫幾行的jQuery 代碼就能實現(xiàn)更多的東西. 它是最常被用到的 JavaScript 庫之一润讥,并且現(xiàn)在已經(jīng)很少有不用jQuery 而使用原生 JavaScript 的新項目了该押。


1.jQuery 庫中的$()是什么?


$()函數(shù)是 jQuery() 函數(shù)的別稱往衷,乍一看這很怪異钞翔,還使 jQuery 代碼晦澀難懂严卖。一旦你適應了席舍,你會愛上它的簡潔。$() 函數(shù)用于將任何對象包裹成 jQuery 對象哮笆,接著你就被允許調(diào)用定義在 jQuery 對象上的多個不同方法来颤。你甚至可以將一個選擇器字符串傳入$() 函數(shù),它會返回一個包含所有匹配的 DOM 元素數(shù)組的 jQuery 對象稠肘。這個問題我已經(jīng)見過好幾次被提及福铅,盡管它非常基礎项阴,它經(jīng)常被用來區(qū)分一個開發(fā)人員是否了解 jQuery滑黔。


2.網(wǎng)頁上有5個<div>元素,如何使用 jQuery來選擇它們?


另一個重要的 jQuery 問題是基于選擇器的略荡。jQuery 支持不同類型的選擇器庵佣,例如 ID 選擇器、class 選擇器汛兜、標簽選擇器巴粪。鑒于這個問題沒提到 ID 和 class,你可以用標簽選擇器來選擇所有的 div 元素粥谬。jQuery 代碼:$("div")肛根,這樣會返回一個包含所有 5 個 div 標簽的 jQuery 對象。


3.jQuery 里的 ID 選擇器和 class 選擇器有何不同漏策?


如果你用過 CSS派哲,你也許就知道 ID 選擇器和 class 選擇器之間的差異,jQuery 也同樣如此哟玷。ID 選擇器使用 ID 來選擇元素狮辽,比如 #element1,而 class 選擇器使用 CSS class 來選擇元素巢寡。當你只需要選擇一個元素時喉脖,使用 ID 選擇器,而如果你想要選擇一組具有相同 CSS class 的元素抑月,就要用 class 選擇器树叽。在面試過程中,你有很大幾率會被要求使用 ID 選擇器和 class 選擇器來寫代碼谦絮。下面的 jQuery 代碼使用了 ID 選擇器和 class 選擇器:

$('#LoginTextBox')  // Returns element wrapped as jQuery object with id='LoginTextBox'
$('.active') // Returns all elements with CSS class active.

正如你所見题诵,從語法角度來說,ID 選擇器和 class 選擇器的另一個不同之處是层皱,前者用字符”#”而后者用字符”.”性锭。


4.如何在點擊一個按鈕時使用 jQuery 隱藏一個圖片?


這是一個事件處理問題叫胖。jQuery為按鈕點擊之類的事件提供了很好的支持草冈。你可以通過以下代碼去隱藏一個通過ID或class定位到的圖片。你需要知道如何為按鈕設置事件并執(zhí)行hide() 方法瓮增,代碼如下所示:

$('#ButtonToClick').click(function(){
    $('#ImageToHide').hide();
});

我喜歡這個問題怎棱,因為很貼近實際使用,代碼也不復雜绷跑。


5.$(document).ready() 是個什么函數(shù)拳恋?為什么要用它?


這個問題很重要砸捏,并且常常被問到谬运。 ready() 函數(shù)用于在文檔進入ready狀態(tài)時執(zhí)行代碼隙赁。當DOM 完全加載(例如HTML被完全解析DOM樹構建完成時),jQuery允許你執(zhí)行代碼梆暖。使用$(document).ready()的最大好處在于它適用于所有瀏覽器鸳谜,jQuery幫你解決了跨瀏覽器的難題。需要進一步了解的用戶可以點擊 answer鏈接查看詳細討論式廷。


6.JavaScript window.onload 事件和 jQuery ready 函數(shù)有何不同咐扭?


這個問答是緊接著上一個的。JavaScript window.onload 事件和 jQuery ready 函數(shù)之間的主要區(qū)別是滑废,前者除了要等待 DOM 被創(chuàng)建還要等到包括大型圖片蝗肪、音頻、視頻在內(nèi)的所有外部資源都完全加載蠕趁。如果加載圖片和媒體內(nèi)容花費了大量時間薛闪,用戶就會感受到定義在 window.onload 事件上的代碼在執(zhí)行時有明顯的延遲

另一方面俺陋,jQuery ready() 函數(shù)只需對 DOM 樹的等待豁延,而無需對圖像或外部資源加載的等待,從而執(zhí)行起來更快腊状。

使用 jQuery $(document).ready() 的另一個優(yōu)勢是你可以在網(wǎng)頁里多次使用它诱咏,瀏覽器會按它們在 HTML 頁面里出現(xiàn)的順序執(zhí)行它們,相反對于 onload 技術而言缴挖,只能在單一函數(shù)里使用袋狞。鑒于這個好處,用 jQuery ready() 函數(shù)比用 JavaScript window.onload 事件要更好些映屋。


7.如何找到所有 HTML select 標簽的選中項苟鸯?


這是面試里比較棘手的 jQuery 問題之一。這是個基礎的問題棚点,但是別期望每個 jQuery 初學者都知道它早处。你能用下面的 jQuery 選擇器獲取所有具備multiple=true<select >標簽的選中項:

$('[name=NameOfSelectedTag] :selected')

這段代碼結(jié)合使用了屬性選擇器和:selected選擇器壤蚜,結(jié)果只返回被選中的選項绵咱。你可按需修改它,比如用 id 屬性而不是 name 屬性來獲取<select>標簽瓜挽。


8.jQuery 里的 each() 是什么函數(shù)颁股?你是如何使用它的么库?


each() 函數(shù)就像是 Java 里的一個 Iterator傻丝,它允許你遍歷一個元素集合甘有。你可以傳一個函數(shù)給 each() 方法,被調(diào)用的 jQuery 對象會在其每個元素上執(zhí)行傳入的函數(shù)葡缰。有時這個問題會緊接著上面一個問題亏掀,舉個例子忱反,如何在 alert 框里顯示所有選中項。我們可以用上面的選擇器代碼找出所有選中項滤愕,然后我們在 alert 框中用 each() 方法來一個個打印它們温算,代碼如下:

 $('[name=NameOfSelectedTag] :selected').each(function(selected) {
     alert($(selected).text());
 });

其中 text() 方法返回選項的文本。


9.你是如何將一個 HTML 元素添加到 DOM 樹中的间影?


可以用 jQuery 方法 appendTo() 將一個 HTML 元素添加到 DOM 樹中注竿。這是 jQuery 提供的眾多操控 DOM 的方法中的一個。你可以通過 appendTo() 方法在指定的 DOM 元素末尾添加一個現(xiàn)存的元素或者一個新的 HTML 元素魂贬。


10.你能用 jQuery 代碼選擇所有在段落內(nèi)部的超鏈接嗎巩割?


這是另一個關于選擇器的 jQuery 面試題。就像其他問題那樣付燥,只需一行 jQuery 代碼就能搞定宣谈。你可以使用下面這個 jQuery 代碼片段來選擇所有嵌套在段落(<p>標簽)內(nèi)部的超鏈接(<a>標簽)……


11.$(this) 和 this 關鍵字在 jQuery 中有何不同?


這對于很多 jQuery 初學者來說是一個棘手的問題键科,其實是個簡單的問題闻丑。$(this) 返回一個 jQuery 對象,你可以對它調(diào)用多個 jQuery 方法勋颖,比如用 text() 獲取文本嗦嗡,用val() 獲取值等等。而 this 代表當前元素饭玲,它是 JavaScript 關鍵詞中的一個酸钦,表示上下文中的當前 DOM 元素。你不能對它調(diào)用 jQuery 方法咱枉,直到它被 $() 函數(shù)包裹卑硫,例如 $(this)。


12.你如何使用jQuery來提取一個HTML 標記的屬性 例如. 鏈接的href?


attr() 方法被用來提取任意一個HTML元素的一個屬性的值. 你首先需要利用jQuery選擇及選取到所有的鏈接或者一個特定的鏈接蚕断,然后你可以應用attr()方法來獲得他們的href屬性的值欢伏。下面的代碼會找到頁面中所有的鏈接并返回href值:

 $('a').each(function(){
    alert($(this).attr('href'));
 });

13.你如何使用jQuery設置一個屬性值?


前面這個問題之后額外的一個后續(xù)問題是,attr()方法和jQuery中的其它方法一樣亿乳,能力不止一樣. 如果你在調(diào)用attr()的同時帶上一個值 例如. attr(name, value), 這里name是屬性的名稱硝拧,value是屬性的新值。


14.jQuery中 detach() 和 remove() 方法的區(qū)別是什么?


盡管detach()remove()方法都被用來移除一個DOM元素, 兩者之間的主要不同在于detach()會保持對過去被解除元素的跟蹤, 因此它可以被取消解除, 而remove()方法則會保持過去被移除對象的引用. 你也還可以看看用來向DOM中添加元素的appendTo()方法.


15.你如何利用jQuery來向一個元素中添加和移除CSS類?


通過利用addClass()removeClass() 這兩個 jQuery 方法葛假。動態(tài)的改變元素的class屬性可以很簡單例如. 使用類“.active"來標記它們的未激活和激活狀態(tài)障陶,等等.


16.使用 CDN 加載 jQuery 庫的主要優(yōu)勢是什么 ?


這是一個稍微高級點兒的jQuery問題。好吧聊训,除了報錯節(jié)省服務器帶寬以及更快的下載速度這許多的好處之外, 最重要的是抱究,如果瀏覽器已經(jīng)從同一個CDN下載類相同的 jQuery 版本, 那么它就不會再去下載它一次. 因此今時今日,許多公共的網(wǎng)站都將jQuery用于用戶交互和動畫, 如果瀏覽器已經(jīng)有了下載好的jQuery庫带斑,網(wǎng)站就能有非常好的展示機會鼓寺。


17.jQuery.get() 和 jQuery.ajax() 方法之間的區(qū)別是什么?


ajax() 方法更強大勋拟,更具可配置性, 讓你可以指定等待多久,以及如何處理錯誤妈候。get() 方法是一個只獲取一些數(shù)據(jù)的專門化方法敢靡。


18.jQuery 中的方法鏈是什么?使用方法鏈有什么好處苦银?


方法鏈是對一個方法返回的結(jié)果調(diào)用另一個方法啸胧,這使得代碼簡潔明了,同時由于只對 DOM 進行了一輪查找幔虏,性能方面更加出色吓揪。


19.你要是在一個 jQuery 事件處理程序里返回了 false 會怎樣?


這通常用于阻止事件向上冒泡所计。


20.哪種方式更高效:document.getElementbyId("myId") 還是 $("#myId")柠辞?


第一種,因為它document.getElementbyId("myId")直接調(diào)用了 JavaScript 引擎主胧。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末叭首,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子踪栋,更是在濱河造成了極大的恐慌焙格,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,000評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件夷都,死亡現(xiàn)場離奇詭異眷唉,居然都是意外死亡,警方通過查閱死者的電腦和手機囤官,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,745評論 3 399
  • 文/潘曉璐 我一進店門冬阳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人党饮,你說我怎么就攤上這事肝陪。” “怎么了刑顺?”我有些...
    開封第一講書人閱讀 168,561評論 0 360
  • 文/不壞的土叔 我叫張陵氯窍,是天一觀的道長。 經(jīng)常有香客問我蹲堂,道長狼讨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,782評論 1 298
  • 正文 為了忘掉前任柒竞,我火速辦了婚禮政供,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己鲫骗,他們只是感情好,可當我...
    茶點故事閱讀 68,798評論 6 397
  • 文/花漫 我一把揭開白布踩晶。 她就那樣靜靜地躺著执泰,像睡著了一般。 火紅的嫁衣襯著肌膚如雪渡蜻。 梳的紋絲不亂的頭發(fā)上术吝,一...
    開封第一講書人閱讀 52,394評論 1 310
  • 那天,我揣著相機與錄音茸苇,去河邊找鬼排苍。 笑死,一個胖子當著我的面吹牛学密,可吹牛的內(nèi)容都是我干的淘衙。 我是一名探鬼主播,決...
    沈念sama閱讀 40,952評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼腻暮,長吁一口氣:“原來是場噩夢啊……” “哼彤守!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起哭靖,我...
    開封第一講書人閱讀 39,852評論 0 276
  • 序言:老撾萬榮一對情侶失蹤具垫,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后试幽,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體筝蚕,經(jīng)...
    沈念sama閱讀 46,409評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,483評論 3 341
  • 正文 我和宋清朗相戀三年铺坞,在試婚紗的時候發(fā)現(xiàn)自己被綠了起宽。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,615評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡济榨,死狀恐怖燎含,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情腿短,我是刑警寧澤屏箍,帶...
    沈念sama閱讀 36,303評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站橘忱,受9級特大地震影響赴魁,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜钝诚,卻給世界環(huán)境...
    茶點故事閱讀 41,979評論 3 334
  • 文/蒙蒙 一颖御、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦潘拱、人聲如沸疹鳄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,470評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽瘪弓。三九已至,卻和暖如春禽最,著一層夾襖步出監(jiān)牢的瞬間腺怯,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,571評論 1 272
  • 我被黑心中介騙來泰國打工川无, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留呛占,地道東北人。 一個月前我還...
    沈念sama閱讀 49,041評論 3 377
  • 正文 我出身青樓懦趋,卻偏偏與公主長得像晾虑,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子仅叫,可洞房花燭夜當晚...
    茶點故事閱讀 45,630評論 2 359

推薦閱讀更多精彩內(nèi)容