JavaScript 是客戶端腳本的標(biāo)準(zhǔn)語言,而 jQuery 使得編寫 JavaScript 更加簡單粗合。你可以只用寫幾行的jQuery 代碼就能實(shí)現(xiàn)更多的東西. 它是最常被用到的 JavaScript 庫之一箕宙,并且現(xiàn)在已經(jīng)很少有不用jQuery 而使用原生 JavaScript 的新項(xiàng)目了。這對于作為一個 Java web 開發(fā)者的你而言意味著你會在一場Java web開發(fā)面試中發(fā)現(xiàn)許多jQuery的面試問題.
早些時候,絕大部分都是 HTTP, HTML, CSS 以及 JavaScript,但最近開始锦爵,除了 JavaScript 基礎(chǔ)之外,人們也希望知道你是否熟悉 jQuery奥裸。這16個jQuery的問題是為web開發(fā)者準(zhǔn)備的,且也能夠非常方便你在參加一次電話或者視頻一輪的面試之前糾正一些關(guān)鍵的概念沪袭。如果你是 jQuery 新手湾宙,那么它也能夠幫助你更加好的理解基礎(chǔ)知識,并激勵你去發(fā)現(xiàn)更多東西
1. jQuery 庫中的 $() 是什么冈绊?(答案如下
$() 函數(shù)是 jQuery() 函數(shù)的別稱侠鳄,乍一看這很怪異,還使 jQuery 代碼晦澀難懂死宣。一旦你適應(yīng)了伟恶,你會愛上它的簡潔。$() 函數(shù)用于將任何對象包裹成 jQuery 對象毅该,接著你就被允許調(diào)用定義在 jQuery 對象上的多個不同方法博秫。你甚至可以將一個選擇器字符串傳入 $() 函數(shù),它會返回一個包含所有匹配的 DOM 元素?cái)?shù)組的 jQuery 對象眶掌。這個問題我已經(jīng)見過好幾次被提及挡育,盡管它非常基礎(chǔ)朴爬,它經(jīng)常被用來區(qū)分一個開發(fā)人員是否了解 jQuery即寒。
2. 網(wǎng)頁上有 5 個 <div> 元素,如何使用 jQuery來選擇它們?(答案)
另一個重要的 jQuery 問題是基于選擇器的母赵。jQuery 支持不同類型的選擇器逸爵,例如 ID 選擇器、class 選擇器凹嘲、標(biāo)簽選擇器师倔。鑒于這個問題沒提到 ID 和 class,你可以用標(biāo)簽選擇器來選擇所有的 div 元素施绎。jQuery 代碼:$("div")溯革,這樣會返回一個包含所有 5 個 div 標(biāo)簽的 jQuery 對象。
3. jQuery 里的 ID 選擇器和 class 選擇器有何不同谷醉?(答案)
如果你用過 CSS致稀,你也許就知道 ID 選擇器和 class 選擇器之間的差異,jQuery 也同樣如此俱尼。ID 選擇器使用 ID 來選擇元素抖单,比如 #element1,而 class 選擇器使用 CSS class 來選擇元素遇八。當(dāng)你只需要選擇一個元素時矛绘,使用 ID 選擇器,(//歡迎加入全棧開發(fā)交流圈一起學(xué)習(xí)交流:{{864305860:0}})而如果你想要選擇一組具有相同 CSS class 的元素刃永,就要用 class 選擇器货矮。在面試過程中,你有很大幾率會被要求使用 ID 選擇器和 class 選擇器來寫代碼斯够。下面的 jQuery 代碼使用了 ID 選擇器和 class 選擇器:
正如你所見囚玫,從語法角度來說,ID 選擇器和 class 選擇器的另一個不同之處是读规,前者用字符”#”而后者用字符”.”抓督。更詳細(xì)的分析和討論參見上面的答案鏈接。
4. 如何在點(diǎn)擊一個按鈕時使用 jQuery 隱藏一個圖片束亏?
這是一個事件處理問題铃在。jQuery為按鈕點(diǎn)擊之類的事件提供了很好的支持。你可以通過以下代碼去隱藏一個通過ID或class定位到的圖片碍遍。你需要知道如何為按鈕設(shè)置事件并執(zhí)行hide() 方法定铜,代碼如下所示:
5. $(document).ready() 是個什么函數(shù)?為什么要用它雀久?(answer)
這個問題很重要宿稀,并且常常被問到。 ready() 函數(shù)用于在文檔進(jìn)入ready狀態(tài)時執(zhí)行代碼赖捌。當(dāng)DOM 完全加載(例如HTML被完全解析DOM樹構(gòu)建完成時)祝沸,jQuery允許你執(zhí)行代碼矮烹。使用$(document).ready()的最大好處在于它適用于所有瀏覽器,jQuery幫你解決了跨瀏覽器的難題罩锐。需要進(jìn)一步了解的用戶可以點(diǎn)擊 answer鏈接查看詳細(xì)討論奉狈。
6. JavaScript window.onload 事件和 jQuery ready 函數(shù)有何不同?(答案)
這個問答是緊接著上一個的涩惑。JavaScript window.onload 事件和 jQuery ready 函數(shù)之間的主要區(qū)別是仁期,前者除了要等待 DOM 被創(chuàng)建還要等到包括大型圖片、音頻竭恬、視頻在內(nèi)的所有外部資源都完全加載跛蛋。如果加載圖片和媒體內(nèi)容花費(fèi)了大量時間,用戶就會感受到定義在 window.onload 事件上的代碼在執(zhí)行時有明顯的延遲痊硕。
另一方面赊级,jQuery ready() 函數(shù)只需對 DOM 樹的等待,而無需對圖像或外部資源加載的等待岔绸,從而執(zhí)行起來更快理逊。使用 jQuery $(document).ready() 的另一個優(yōu)勢是你可以在網(wǎng)頁里多次使用它,瀏覽器會按它們在 HTML 頁面里出現(xiàn)的順序執(zhí)行它們盒揉,相反對于 onload 技術(shù)而言晋被,只能在單一函數(shù)里使用。鑒于這個好處刚盈,用 jQuery ready() 函數(shù)比用 JavaScript window.onload 事件要更好些羡洛。
7. 如何找到所有 HTML select 標(biāo)簽的選中項(xiàng)?(答案如下)
這是面試?yán)锉容^棘手的 jQuery 問題之一藕漱。這是個基礎(chǔ)的問題翘县,但是別期望每個 jQuery 初學(xué)者都知道它。你能用下面的 jQuery 選擇器獲取所有具備 multiple=true 的 標(biāo)簽的選中項(xiàng):
這段代碼結(jié)合使用了屬性選擇器和 :selected 選擇器谴分,結(jié)果只返回被選中的選項(xiàng)。你可按需修改它镀脂,比如用 id 屬性而不是 name 屬性來獲取 <select> 標(biāo)簽牺蹄。
8. jQuery 里的 each() 是什么函數(shù)?你是如何使用它的薄翅?(答案如下)
each() 函數(shù)就像是 Java 里的一個 Iterator沙兰,它允許你遍歷一個元素集合。你可以傳一個函數(shù)給 each() 方法翘魄,被調(diào)用的 jQuery 對象會在其每個元素上執(zhí)行傳入的函數(shù)鼎天。有時這個問題會緊接著上面一個問題,舉個例子暑竟,如何在 alert 框里顯示所有選中項(xiàng)斋射。我們可以用上面的選擇器代碼找出所有選中項(xiàng),然后我們在 alert 框中用 each() 方法來一個個打印它們,代碼如下:
9. 你是如何將一個 HTML 元素添加到 DOM 樹中的罗岖?(答案如下)
你可以用 jQuery 方法 appendTo() 將一個 HTML 元素添加到 DOM 樹中涧至。這是 jQuery 提供的眾多操控 DOM 的方法中的一個。你可以通過 appendTo() 方法在指定的 DOM 元素末尾添加一個現(xiàn)存的元素或者一個新的 HTML 元素桑包。
10. 你能用 jQuery 代碼選擇所有在段落內(nèi)部的超鏈接嗎南蓬?
這是另一個關(guān)于選擇器的 jQuery 面試題。就像其他問題那樣哑了,只需一行 jQuery 代碼就能搞定赘方。你可以使用下面這個 jQuery 代碼片段來選擇所有嵌套在段落(
標(biāo)簽)內(nèi)部的超鏈接(標(biāo)簽)
最后:“相信有很多想學(xué)前端的小伙伴,今年年初我花了一個月整理了一份最適合2018年學(xué)習(xí)的web前端干貨弱左,從最基礎(chǔ)的HTML+CSS+JS到移動端HTML5等都有整理窄陡,送給每一位前端小伙伴,53763科贬,1707這里是小白聚集地泳梆,歡迎初學(xué)和進(jìn)階中的小伙伴“裾疲”
祝大家早日學(xué)有所成优妙,拿到滿意offer,快速升職加薪憎账,走上人生巔峰套硼。