Web前端的jquery面試題

1 你在公司是怎麼用jquery的?

答:在項目中是怎麼用的是看看你有沒有項目經驗(根據自己的實際情況來回答) 你用過的選擇器啊,動畫啊,表單啊,ajax事件等

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

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

<script>

$(function(){ });

</script>

2 你爲什麼要使用jquery?

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

3 你覺得jquery有哪些好處? 答案同上

4  你使用jquery遇到過哪些問題,你是怎麼解決的?

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

例:前臺拿不到值,JSON 可是出現的錯誤(多了一個空格等)這編譯是不會報錯的 jquery庫與其他庫衝突;

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

5  你知道jquery中的選擇器嗎,請講一下有哪些選擇器?

 :選擇器大致分爲:基本選擇器,層次選擇器,過濾選擇器,表單選擇器

6  jquery中的選擇器 和 css中的選擇器有區別嗎?

答:jQuery選擇器支持CSS裏的選擇器,

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

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

7  你覺得jquery中的選擇器有什麼優勢?

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

支持CSS1 到CSS3 選擇器

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

8  你在使用選擇器的時候有有沒有什麼覺得要注意的地方?

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

2 屬性選擇器的引號問題

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

9  jquery對象和dom對象是怎樣轉換的?

 jquery轉DOM對象:jQuery 對象是一個數組對象,可以通過[index]的豐富得到相應的DOM對象

還可以通過get[index]去得到相應的DOM對象。

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

10  你是如何使用jquery中的ajax的?

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

11  你覺得jquery中的ajax好用嗎,爲什麼?

: 好用的。因爲jQuery提供了一些日常開發中夙瑤的快捷操作,例 load,ajax,get,post等等,所以使用jQuery開發ajax將變得極其簡單,我們就可以集中精力在業務和用戶的體驗上,不需要去理會那些繁瑣的XMLHttpRequest對象了。

12 jquery中$.get()提交和$.post()提交有區別嗎?

: 1 $.get() 方法使用GET方法來進行異步請求的。   

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

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

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

4 GET 方式請求的數據會被瀏覽器緩存起來,因此有安全問題。

13  jquery中的load方法一般怎麼用的?

答:load方法一般在載入遠程HTML代碼並插入到DOM中的時候用

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

如果要傳遞參數的話,可以使用$.get() 或 $.post()

14  在jquery中你是如何去操作樣式的?

: addClass() 來追加樣式

removeClass() 來刪除樣式

toggle() 來切換樣式

15  簡單的講敘一下jquery是怎麼處理事件的,你用過哪些事件?

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

16  你使用過jquery中的動畫嗎,是怎樣用的?

:使用過。

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

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

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

17  你使用過jquery中的插件嗎?

:看個人的實力和經驗來回答了,例如:jQuery_Mobile,jQuery_ui。

18  你一般用什麼去提交數據,爲什麼?

:一般我會使用的是$.post() 方法。

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

19  在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()把匹配元素在對象前添加

21  你使用過包裹節點的方法嗎,包裹節點有方法有什麼好處?

: 1.wrap()把匹配的元素包裹起來

    2.wrapAll()把所有匹配的對象用單個元素包裹

3.wrapInner()將每一個元素的子內容包裹

需要在文檔中插入額外的結構化標記的時候可以使用這些包裹的方法,應爲它不會帛畫原始文檔的語義

22  jquery中如何來獲取或和設置屬性?

答:jQuery中可以用attr()方法來獲取和設置元素屬性

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

23  如何來設置和獲取HTML 和文本的值?

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

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

val() 可以用來設置和獲取元素的值

24  你jquery中有哪些方法可以遍歷節點?

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

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

 siblings() 取得匹配元素前後的所有同輩元素

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

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

25 子元素選擇器和後代選擇器元素有什麼區別?

:子代元素是找子節點下的所有元素,後代元素是找子節點或子節點的子節點的元素

26 在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的用法前後調換一下即可。

27 你覺得beforeSend方法有什麼用?

答:發送請求前可以修改XMLHttpRequest對象的函數,在beforeSend中,如果返回false可以取消本次的Ajax請求。XMLHttpRequest對象是唯一的參數,所以在這個方法裏可以做驗證

28 siblings() 方法 和 $('prev~div')選擇器是一樣的嘛?

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

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

29 你在ajax中使用過JSON嗎,你是如何用的?

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

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

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

答:我在公司使用過

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

:odd查詢奇數但是索引從0開始 :even 查詢偶數,

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

:lt查詢小於index :header 選取所有的標題等

31 nextAll()能替代$('prev~siblindgs')選擇器嗎?

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

32 jQuery中有幾種方法可以來設置和獲取樣式

 addClass() 方法,attr() 方法

33 $(document).ready()方法和window.onload有什麼區別?

: 兩個方法有相似的功能,但是在實行時機方面是有區別的。

1 window.onload方法是在網頁中所有的元素(包括元素的所有關聯文件)完全加載到瀏覽器後才執行的。

2 $(document).ready() 方法可以在DOM載入就緒時就對其進行操縱,並調用執行綁定的函數。

34 jQuery是如何處理緩存的?

 :要處理緩存就是禁用緩存.

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

2 通過$.get()方法 來獲取數據,可以通過設置時間戳來避免緩存。

可以在URL後面加上+(+new Date)

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

3 通過$.ajax 方法來獲取數據,只要設置cache:false即可。

35 $.getScript()方法 和 $.getJson() 方法有什麼區別?

: 1 $.getScript() 方法可以直接加載.js文件,並且不需要對javascript文件進行處理,javascript文件會自動執行。

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

36 你讀過有關於jQuery的書嗎?

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

37 $("#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>

38 radio單選組的第二個元素爲當前選中值,該怎麼去取?

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

39 選擇器中 id,class有什麼區別?

答:在網頁中 每個id名稱只能用一次,class可以允許重複使用

40 你使用過哪些數據格式,它們各有什麼特點?

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

1 HTML片段提供外部數據一般來說是最簡單的。

2 如果數據需要重用,而且其他應用程序也可能一次受到影響,那麼在性能和文件大小方面具有優勢的JSON通常是不錯的選擇。

3 而當遠程應用程序未知時,XML則能夠爲良好的互操作性提供最可靠的保證。

41 jQuery 能做什麼?

答:1 獲取頁面的元素

2 修改頁面的外觀

3 改變頁面大的內容

4 響應用戶的頁面操作

5 爲頁面添加動態效果

6 無需刷新頁面,即可以從服務器獲取信息

7 簡化常見的javascript任務

42 在ajax中data主要有幾種方式?

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

43 :jQuery中的hover()和toggle()有什麼區別?

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

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

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

44 你知道jQuery中的事件冒泡嗎,它是怎麼執行的,何如來停止冒泡事件

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

jQuery中提供了stopPropagation()方法可以停止冒泡。

45 例如 單擊超鏈接後會自動跳轉,單擊"提交"按鈕後表單會提交等,有時候我想阻止這些默認的行爲,該怎麼辦?

: 可以用 event.preventDefault()

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

46.jquery表單提交前有幾種校驗方法?分別爲??

formData:返回一個數組,可以通過循環調用來校驗

jaForm:返回一個jQuery對象,所有需要先轉換成dom對象

fieldValue:返回一個數組 beforeSend()

47.在jquery中你有沒有編寫過插件,插件有什麼好處?你編寫過那些插件?它應該注意那些?

: 插件的好處:對已有的一系列方法或函數的封裝,以便在其他地方重新利用,方便後期維護和提高開發效率

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

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

2.所有的對象方法都應當附加到jQuery.fn對象上,而所有的全局函數都應當附加到jQuery對象本身上

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

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

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

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

48.怎樣給jquery動態附加新的元素?那麼怎樣給新生成的元素綁定事件呢?

jQuery的html()可以給現在元素附加新的元素

直接在元素還未生成前就綁定肯定是無效的,因爲所綁定的元素目前根本不存在。

所以我們可以通過live和livequery來動態綁定事件

49.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)

 

發佈了18 篇原創文章 · 獲贊 18 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章