總結的web前端的jquery面試題 常見面試題 大牛回答

【點擊領取】阿里雲代金券 | 阿里雲優惠券 |阿里雲優惠碼|雲服務器|阿里雲|阿里雲代金券 – 限時領取1888元阿里雲代金券

【3折購買ECS服務器入口】：promotion.aliyun.com/ntms/act/qw…

一、你在公司是怎麼用jquery的？ 

答：在項目中是怎麼用的是看看你有沒有項目經驗(根據本身的實際狀況來回答) 你用過的選擇器啊，動畫啊，表單啊，ajax事件等  

配置Jquery環境 下載jquery類庫 在jsp頁面引用jquery類庫便可 

 <script type="text/javascript" src="jquery/jquery-1.7.2.min.js"/></script>  

<script> 

$(function(){ }); 

 </script> 

二、你爲何要使用jquery？  

答：由於jQuery是輕量級的框架，大小不到30kb,它有強大的選擇器，出色的DOM操做的封裝，有可靠的事件處理機制(jQuery在處理事件綁定的時候至關的可靠)，完善的ajax(它的ajax封裝的很是的好，不須要考慮複雜瀏覽器的兼容性和XMLHttpRequest對象的建立和使用的問題。) 出色的瀏覽器的兼容性。並且支持鏈式操做，隱式迭代。行爲層和結構層的分離，還支持豐富的插件，jquery的文檔也很是的豐富。 

三、你以爲jquery有哪些好處？ 答案同上

四、你使用jquery遇到過哪些問題，你是怎麼解決的？ 

答：這個答案是開發的，看你是否有相關的項目經驗。 

例：前臺拿不到值，JSON 但是出現的錯誤(多了一個空格等)這編譯是不會報錯的 jquery庫與其餘庫衝突； 

今天在處理一個數據問題時，發現jQuery.ajax()方法返回的值一直有問題，清除緩存後數據無誤，屢次測試後發現返回的值都是以前的值，而且一直未執行url(後臺爲JAVA，設置斷點一直未進入)。在網上查找下,發現是未設置type的緣由。若是沒設置jQuery.ajax的type="Post"，那麼ajax就會默認type="Get"，這就會致使以前數據被緩存起來。加上type="Post"，問題解決！  

五、你知道jquery中的選擇器嗎，請講一下有哪些選擇器？ 

答 ：選擇器大體分爲:基本選擇器，層次選擇器，過濾選擇器，表單選擇器 

六、jquery中的選擇器 和 css中的選擇器有區別嗎？ 

答：jQuery選擇器支持CSS裏的選擇器， 

 jQuery選擇器可用來添加樣式和添加相應的行爲 

 CSS 中的選擇器是隻能添加相應的樣式 

 七、你以爲jquery中的選擇器有什麼優點？ 

答：簡單的寫法 $('ID') 來代替 document.getElementById()函數  

支持CSS1 到CSS3 選擇器 

 完善的處理機制(就算寫錯了id也不會報錯) 

八、你在使用選擇器的時候有有沒有什麼以爲要注意的地方？ 

答: 

一、選擇器中含有".","#","[" 等特殊字符的時候須要進行轉譯 

二、屬性選擇器的引號問題 

三、選擇器中含有空格的注意事項 

九、jquery對象和dom對象是怎樣轉換的？  

答 ：jquery轉DOM對象:jQuery 對象是一個數組對象，能夠經過[index]的豐富獲得相應的DOM對象 還能夠經過get[index]去獲得相應的DOM對象。 

 DOM對象轉jQuery對象:$(DOM對象) 

十、你是如何使用jquery中的ajax的？ 

答: 若是是一些常規的ajax程序的話，使用load(),$.get(),$.post(),就能夠搞定了，通常我會使用的是$.post() 方法。若是須要設定beforeSend(提交前回調函數),error(失敗後處理),success(成功後處理)及complete(請求完成後處理)回調函數等，這個時候我會使用$.ajax() 

十一、你以爲jquery中的ajax好用嗎，爲何？  

答: 好用的。由於jQuery提供了一些平常開發中夙瑤的快捷操做，例 load，ajax，get，post等等，因此使用jQuery開發ajax將變得極其簡單，咱們就能夠集中精力在業務和用戶的體驗上，不須要去理會那些繁瑣的XMLHttpRequest對象了。  

十二、jquery中$.get()提交和$.post()提交有區別嗎？ 

答: 

一、$.get() 方法使用GET方法來進行異步請求的。 $.post() 方法使用POST方法來進行異步請求的。 

二、get請求會將參數跟在URL後進行傳遞，而POST請求則是做爲HTTP消息的實體內容發送給Web服務器的，這種傳遞是對用戶不可見的。 

三、get方式傳輸的數據大小不能超過2KB 而POST要大的多 

四、GET 方式請求的數據會被瀏覽器緩存起來，所以有安全問題。 

1三、jquery中的load方法通常怎麼用的？ 

答：load方法通常在載入遠程HTML代碼並插入到DOM中的時候用 

一般用來從Web服務器上獲取靜態的數據文件。 

 若是要傳遞參數的話，可使用$.get() 或 $.post() 

 1四、在jquery中你是如何去操做樣式的？ 

 答: addClass() 來追加樣式 

 removeClass() 來刪除樣式 

 toggle() 來切換樣式 

1五、簡單的講敘一下jquery是怎麼處理事件的，你用過哪些事件？  

答: 首先去裝載文檔，在頁面家在完畢後，瀏覽器會經過javascript 爲DOM 元素添加事件。 

1六、你使用過jquery中的動畫嗎，是怎樣用的？ 

 答:使用過。 

hide() 和 show() 同時修改多個樣式屬性。像高度，寬度，不透明度。 fadeIn() 和fadeOut() fadeTo() 只改變不透明度 

slideUp() 和 slideDown() slideToggle() 只改變高度 

animate() 屬於自定義動畫的方法. 

1七、你使用過jquery中的插件嗎？ 

答:看我的的實力和經驗來回答了，例如：jQuery_Mobile,jQuery_ui。 

1八、你通常用什麼去提交數據，爲何？ 

 答:通常我會使用的是$.post() 方法。 

若是須要設定beforeSend(提交前回調函數),error(失敗後處理),success(成功後處理)及complete(請求完成後處理)回調函數等，這個時候我會使用$.ajax() 

1九、在jquery中引入css有幾種方式？ 

 答:四種 行內式，內嵌式，導入式，連接式 

20、你在jquery中使用過哪些插入節點的方法，它們的區別是什麼？ 

答:append(),appendTo(),prepend(),prependTo(),after(),insertAfter() before(),insertBefore() 

內添加 

1. append在文檔內添加元素 
2. appendTo()把匹配的元素添加到對象裏 
3. prepend()在元素前添加 
4. prependTo()把匹配的元素添加到對象前 

外添加 

1. after()在元素以後添加 
2. before()在元素以前添加 
3. insertAfter()把匹配元素在對象後添加 
4. insertBefore()把匹配元素在對象前添加 

2一、你使用過包裹節點的方法嗎，包裹節點有方法有什麼好處？  

答: 

1. wrap()把匹配的元素包裹起來 
2. wrapAll()把全部匹配的對象用單個元素包裹 
3. wrapInner()將每個元素的子內容包裹 須要在文檔中插入額外的結構化標記的時候可使用這些包裹的方法，應爲它不會帛畫原始文檔的語義 

2二、jquery中如何來獲取或和設置屬性？ 

答：jQuery中能夠用attr()方法來獲取和設置元素屬性 

 removeAttr() 方法來刪除元素屬性 

2三、如何來設置和獲取HTML 和文本的值？  

答：html()方法 相似於innerHTML屬性 能夠用來讀取或者設置某個元素中的HTML內容注意：html() 能夠用於xhtml文檔，不能用於xml文檔 

Text() 相似於innerText屬性 能夠用來讀取或設置某個元素中文本內容。  

val() 能夠用來設置和獲取元素的值 

2四、你jquery中有哪些方法能夠遍歷節點？  

答 ：children() 取得匹配元素的子元素集合,只考慮子元素不考慮後代元素 next() 取得匹配元素後面緊鄰的同輩元素 

prev() 取得匹配元素前面緊鄰的同輩元素 

siblings() 取得匹配元素先後的全部同輩元素 

closest() 取得最近的匹配元素 

find() 取得匹配元素中的元素集合 包括子代和後代

2五、子元素選擇器和後代選擇器元素有什麼區別？  

答:子代元素是找子節點下的全部元素,後代元素是找子節點或子節點的子節點的元素  

2六、在jquery中能夠替換節點嗎？ 

答：能夠 在jQuery中有二者替換節點的方式replaceWith() 和 replaceAll() 例如：在<p title="hao are you">hao are you</p>替換成<strong>I am fine<strong> $('p').replaceWith('<strong>I am fine</strong>'); 

replaceAll 與replaceWith的用法先後調換一下便可。 

2七、你以爲beforeSend方法有什麼用？ 

答：發送請求前能夠修改XMLHttpRequest對象的函數，在beforeSend中，若是返回false能夠取消本次的Ajax請求。XMLHttpRequest對象是惟一的參數，因此在這個方法裏能夠作驗證 

2八、siblings() 方法 和 $('prev~div')選擇器是同樣的嘛？  

答: $('prev~div') 只能選擇'#prev'元素後面的同輩<div>元素 

而siblings()方法與先後的文職無關，只要是同輩節點就都能匹配。  

2九、你在ajax中使用過JSON嗎，你是如何用的？  

答:使用過，在$.getJSON()方法的時候就是。 

由於 $.getJSON() 就是用於加載JSON文件的 

30、有哪些查詢節點的選擇器？ 

 答：我在公司使用過 

 :first 查詢第一個， :last 查詢最後一個， 

:odd查詢奇數可是索引從0開始 :even 查詢偶數，  

:eq(index)查詢相等的 , :gt(index)查詢大於index的 , 

:lt查詢小於index :header 選取全部的標題等 

3一、nextAll()能替代$('prev~siblindgs')選擇器嗎？ 

答:能。使用nextAll() 和使用$('prev~siblindgs') 是同樣的  

3二、jQuery中有幾種方法能夠來設置和獲取樣式 

 答 ：addClass() 方法，attr() 方法 

3三、$(document).ready()方法和window.onload有什麼區別？

答: 兩個方法有類似的功能，可是在實行時機方面是有區別的。  

1. window.onload方法是在網頁中全部的元素(包括元素的全部關聯文件)徹底加載到瀏覽器後才執行的。 
2. $(document).ready() 方法能夠在DOM載入就緒時就對其進行操縱，並調用執行綁定的函數。 

3四、jQuery是如何處理緩存的？ 

答 ：要處理緩存就是禁用緩存. 

1. 經過$.post() 方法來獲取數據，那麼默認就是禁用緩存的。  

2. 經過$.get()方法 來獲取數據，能夠經過設置時間戳來避免緩存。 

能夠在URL後面加上+(+new Date) 

例 $.get('ajax.xml?'+(+new Date),function () { //內容 });  

3. 經過$.ajax 方法來獲取數據，只要設置cache:false便可。 

3五、$.getScript()方法 和 $.getJson() 方法有什麼區別？ 

答: 

1 $.getScript() 方法能夠直接加載.js文件，而且不須要對javascript文件進行處理，javascript文件會自動執行。 

2 $.getJson() 是用於加載JSON 文件的 ，用法和$.getScript()  

3六、你讀過有關於jQuery的書嗎？ 

答: 《jquery基礎教程》，《jquery實戰》，《鋒利的jquery》，《巧用jquery》，《jQuery用戶界面庫學習指南》等 

3七、$("#msg").text(); 和 $("#msg").text("<b>new content</b>");有什麼區別？ 

答：

1. $("#msg").text() 是 返回id爲msg的元素節點的文本內容 
2. $("#msg").text("<b>new content</b>");是 將「<b>new content</b>」做爲普通文本串寫入id爲msg的元素節點內容中, 頁面顯示粗體的<b>new content</b> 

3八、radio單選組的第二個元素爲當前選中值，該怎麼去取？ 

答 : $('input[name=items]').get(1).checked = true; 

3九、選擇器中 id，class有什麼區別？ 

答：在網頁中 每一個id名稱只能用一次，class能夠容許重複使用  

40、你使用過哪些數據格式，它們各有什麼特色？  

答: HTML格式 ,JSON格式,javascript格式,XML格式

1. HTML片斷提供外部數據通常來講是最簡單的。  
2. 若是數據須要重用，並且其餘應用程序也可能一次受到影響，那麼在性能和文件大小方面具備優點的JSON一般是不錯的選擇。 
3. 而當遠程應用程序未知時，XML則可以爲良好的互操做性提供最可靠的保證。  

4一、jQuery 能作什麼？ 

 答：

1. 獲取頁面的元素 
2. 修改頁面的外觀 
3. 改變頁面大的內容 
4. 響應用戶的頁面操做 
5. 爲頁面添加動態效果 
6. 無需刷新頁面，便可以從服務器獲取信息 
7. 簡化常見的javascript任務 

4二、在ajax中data主要有幾種方式？ 

答 ： 三種，html拼接的，json數組，form表單經serialize()序列化的。  

4三、：jQuery中的hover()和toggle()有什麼區別？  

答：hover()和toggle()都是jQuery中兩個合成事件。 

hover()方法用於模擬光標懸停事件。 

 toggle()方法是連續點擊事件。  

4四、你知道jQuery中的事件冒泡嗎，它是怎麼執行的，何如來中止冒泡事件？ 

答 : 知道, 事件冒泡是從裏面的往外面開始觸發。  

在jQuery中提供了stopPropagation()方法能夠中止冒泡。  

4五、例如 單擊超連接後會自動跳轉，單擊"提交"按鈕後表單會提交等，有時候我想阻止這些默認的行爲，該怎麼辦？ 

答: 能夠用 event.preventDefault() 

 或 在事件處理函數中返回false，即 return false; 

4六、jquery表單提交前有幾種校驗方法？分別爲？？  

答：formData:返回一個數組，能夠經過循環調用來校驗 

jaForm：返回一個jQuery對象，全部須要先轉換成dom對象 

fieldValue：返回一個數組 beforeSend() 

4七、在jquery中你有沒有編寫過插件，插件有什麼好處？你編寫過那些插件？它應該注意那些？ 

答: 插件的好處：對已有的一系列方法或函數的封裝，以便在其餘地方從新利用，方便後期維護和提升開發效率 

插件的分類：封裝對象方法插件 、封裝全局函數插件、選擇器插件注意的地方：  

1.插件的文件名推薦命名爲jquery.[插件名].js，以避免和其餘的javaScript庫插件混 

2.全部的對象方法都應當附加到jQuery.fn對象上，而全部的全局函數都應當附加到jQuery對象自己上 

3.插件應該返回一個jQuery對象，以保證插件的可鏈式操做  

4.避免在插件內部使用$做爲jQuery對象的別名,而應使用完整的jQuery來表示，這樣能夠避免衝突或使用閉包來避免 

5.全部的方法或函數插件，都應當一分好結尾，不然壓縮的時候可能出現問題。在插件頭部加上分號，這樣能夠避免他人的不規範代碼給插件帶來影響 

6.在插件中經過$.extent({})封裝全局函數,選擇器插件，擴展已有的object對象經過$.fn.extend({})封裝對象方法插件  

4八、怎樣給jquery動態附加新的元素?那麼怎樣給新生成的元素綁定事件呢？  

答：jQuery的html()能夠給如今元素附加新的元素 直接在元素還未生成前就綁定確定是無效的，由於所綁定的元素目前根本不存在。 因此咱們能夠經過live和livequery來動態綁定事件

4九、Jquery與jQuery UI 有啥區別？ 

答： *jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。

*jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。 

提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等 

50、jquery 中如何將數組轉化爲json字符串，而後再轉化回來？ 

答：jQuery中沒有提供這個功能，因此你須要先編寫兩個jQuery的擴展： 

$.fn.stringifyArray = function(array) { 

 return JSON.stringify(array) 

 } 

 $.fn.parseArray = function(array) { 

 return JSON.parse(array) 

 } 

 而後調用： 

 $("").stringifyArray(array)

【點擊領取】阿里雲代金券 | 阿里雲優惠券 |阿里雲優惠碼|雲服務器|阿里雲|阿里雲代金券 – 限時領取1888元阿里雲代金券

【3折購買ECS服務器入口】：promotion.aliyun.com/ntms/act/qw…