jQuery相關知識點1

標籤：方便   事件冒泡   跳轉   select   基本選取器   post方法   樣式   靜態   多媒體   

1--jQuery庫中的$()是：

$()函數是jQuery()函數的簡稱。$()函數用於將任何對象包裹成jQuery對象，然後可以調用定義在jQuery對象上的多個不同方法。甚至可以將一個選取器字串傳入$()函數，則會返回一個包含所有匹配的dom元素數組的jQuery對象。

 

2—點擊按鈕時隱藏圖片

$(“.button1”).click(function(){

  $(“.image1”).hide();

})

 

3--$(document).ready()是個什麼函數？為什麼要用它

Ready()函數用於在文檔進入ready狀態時執行代碼。當dom完全載入，jQuery允許你執行代碼。使用$(document).ready()的最大好處在於它適用於所有瀏覽器，避免了跨瀏覽器的難題。

 

4—JavaScript window.load事件和jQuery ready函數的區別

²  JavaScript window.load事件要等待dom被建立，還要等待包括大型圖片、音頻、視頻在內的所有外部資源完全載入。如果載入圖片和多媒體內容花費了大量時間，使用者則會感受到定義在window.load事件上的代碼在執行上有明顯的延遲。Onload只能在單一函數裡使用。

²  jQuery ready()函數只需對dom的等待，而無需對映像或外部資源載入的等待，從而執行更快。jQuery ready函數可以在網頁裡多次使用它，瀏覽器會按它們在html頁面裡出現的順序執行它們。

 

5—jQuery裡的each()是什麼函數？如何使用？

Each()函數，用來遍曆集合中的元素。傳一個函數給each()方法，被調用的jQuery對象會在其每個元素上執行傳入的函數。

$(‘[name=NameOfSelectedTag] :selected‘).each(function(selected) {

    alert($(selected).text());

});

 

6—如何將一個html元素添加到dom樹中的？

通過appendTo()方法在指定的dom元素末尾添加一個現存的元素或者一個新的html元素。

 

7—利用jQuery選擇所有在段落內部的超連結？

 

 

8--$(this)和this關鍵字在jQuery中的區別

$(this)返回一個jQuery對象，可以對其調用多個jQuery方法，如用text()擷取文本，用val()擷取值。而this代表當前元素，表示上下文中的當前dom元素，不能對其調用jQuery方法，除非它被$()函數包裹。

 

9--jQuery中有哪幾種類型的選取器？

基本選取器：直接根據id、css類名、元素名返回匹配的dom元素。

層次選取器：也叫做直接選取器，可以根據路徑層次來選擇相應的DOM元素。

過濾選取器：在前面的基礎上過濾相關條件，得到匹配的dom元素。

 

10—使用jQuery將頁面上的所有元素邊框設定為2px寬的虛線

$(“*”).css(“border”,”2px dotted red”);

 

11—通過jQuery實現點擊按鈕彈出一個對話方塊？

<input id=”inputField” type=”text” size=”12” />

 

$(document).ready(function(){

  $(“#button1”).click(function(){

   Alert($(“#inputField”).attr(“value”));

});

});

 

12--jQuery中的Delegate()函數有什麼作用？

回答：delegate()會在以下兩個情況下使用到：

(1)如果你有一個父元素，需要給其下的子項目添加事件，這時你可以使用delegate()了，代碼如下：

$("ul").delegate("li", "click", function(){

$(this).hide();

});

(2)當元素在當前頁面中不可用時，可以使用delegate()

 

13—jQuery編碼和解碼URL

encodeURIComponent(url)

decodeURIComponent(url)

 

14--如何用jQuery禁用瀏覽器的前進後退按鈕？

$(document).ready(function() {

     window.history.forward(1);  //OR

     window.history.forward(-1);

});

 

15—為什麼使用jQuery

jQuery是輕量級架構，有強大的選取器，出色的dom操作的封裝，可靠的事件處理機制，完善的ajax，出色的瀏覽器安全色性，而且支援鏈式操作，隱式迭代。行為層和結構層分離，支援豐富的外掛程式，文檔也非常豐富。

 

16—jquery和css兩者選取器的不同

jQuery選取器支援css裡的選取器。可以用來添加樣式和相應的行為；css選取器只能添加樣式。

 

17—jQuery對象和dom對象是怎麼樣轉換的

jQuery轉dom對象：jQuery對象是一個數組對象，可以通過[index]的豐富得到相應的dom對象，還可以通過get[index]得到相應的dom對象。

Dom對象轉jQuery對象：$(DOM對象)

 

18—jquery中$.get()提交和$.post()提交的區別

$.get()方法使用GET方法進行非同步請求；$.post()方法使用POST方法進行非同步請求。

Get請求會將參賽跟在URL後進行傳遞；post請求則是作為http訊息的實體內容發送給web伺服器，這種傳遞對使用者是不可見的。

Get方式傳遞的資料量要比post小。

Get方式請求的資料會被瀏覽器緩衝起來，引起安全問題。

 

19—jQuery中的load方法的一般使用

load方法一般在載入遠程html代碼並插入到dom中的時候用，通常用來從伺服器擷取靜態資料檔案。如果要傳參的話，可以使用$.get()或$.post()

 

20—在jQuery中如何操作樣式

addClass()追加樣式、removeClass()刪除樣式、toggle()轉場樣式

 

21—jQuery是如何處理事件的

先載入文檔，當頁面載入完畢後，瀏覽器會通過JavaScript為dom元素添加事件。

 

22—jQuery中的動畫

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

showUp()和slideDown()、slideToggle()只改變高度。

animate()屬於自訂動畫的方法

 

23—jquery外掛程式

 

 

24—一般用什麼提交資料，為什麼

$.post()方法

如果需要設定beforeSend(提交前回呼函數)，error(失敗後處理),success(成功後處理) ，complete(請求完成後處理)回呼函數等，這個時候選擇$.ajax()

 

25—jQuery中引入css有幾種方式

行內式、內嵌式、匯入式、連結式

26—jQuery實現動態添加和刪除表格行？

 

 

27—jQuery中實現插入節點的方法及它們間的區別

append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()

大致分為內部追加和外部追加

append()表示向每個元素內部追加內容；appendTo()表示將所有的元素追加到指定的元素中。

 

28—包裹節點的方法及好處

wrapAll()、wrap()、wrapInner()

 

29—jQuery如何擷取和設定屬性？

attr()方法可以擷取和設定元素屬性

removeAttr()方法刪除元素屬性

 

30—jQuery中哪些方法可以遍曆節點

children():取得匹配元素的子項目集合，只考慮子項目不考慮後代元素

next():取得匹配元素後面緊鄰的同輩元素

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

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

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

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

 

31—子項目選取器和後代元素選取器的區別

子項目：子節點下的所有元素

後代元素：子節點或子節點的子節點中的元素

 

32—beforeSend方法的作用

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

 

33—在ajax中如何使用json

$.getJSON()用於載入json檔案

 

34—有哪些查詢節點的選取器？

:first查詢第一個 

:last 查詢最後一個

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

:even 查詢偶數

:eq(index)  查詢相等的

:gt(index)  查詢大於index的

:lt(index) 查詢小於index的

:header    選取所有的標題

 

35—nextAll()和$(‘prev~siblings’)等價

 

36—jQuery有幾種方法可以設定和擷取樣式

addClass()、attr()

 

37—jQuery是如何處理緩衝的？

要處理緩衝即是禁用緩衝。

通過$.post()方法擷取資料，那麼預設就是禁用緩衝的。

通過$.get()方法擷取資料，可以通過設定時間戳記來避免緩衝。可以在URL後面加上+(+new Date)例$.get(‘ajax.xml?’+new Date),function(){});

通過ajax方法來擷取資料，只要設定cache:false即可

 

 

38--$.getScript()方法和$.getJson()方法的區別

$.getScript():可以直接載入js檔案，且不需要對js檔案進行處理，js檔案會自動執行

$.getJson():用於載入json檔案

 

39--

$(“#msg”).text()：返回id為msg的元素節點的常值內容

$(“#msg”).text(“<b>new content</b>”)：將<b>new content</b>作為普通文本串寫入id為msg的元素節點內容中，頁面顯示粗體的<b>new content</b>。

 

40—radio單選框組的第二個元素為當前選中值，該怎麼去取

    $(‘input[name=items]’).get(1).checked=true;

 

41—選取器中的id、class的區別

Id：每個id名稱只能用一次

Class：可以重複使用

 

42—使用過哪些資料格式及其特點

Html格式：提供外部資料

Json格式：需要重用的資料

XML格式：當遠程應用程式未知時，XML能夠為良好的互通性提供最可靠的保證。

43—jQuery能做什麼

擷取頁面的元素、修改頁面的外觀、改變頁面的內容、響應使用者的頁面操作、為頁面添加動態效果、無需重新整理頁面，即可以從伺服器擷取資訊、簡化常見的JavaScript任務。

 

44—在ajax中data主要有幾種方式？

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

 

45—jQuery中的hover（）和toggle()的區別

hover()、toggle()都是jQuery中的兩個合成事件。前者用於類比游標懸停事件，後者用於連續點擊事件。

 

46—jQuery中的事件冒泡是怎麼執行的，如何阻止事件冒泡

事件冒泡就是從裡面往外面觸發。在jQuery中提供了stopPropagation()方法可以停止冒泡事件。

 

47--例如 單擊超連結後會自動跳轉，單擊"提交"按鈕後表單會提交等，有時候我想阻止這些預設的行為，該怎麼辦？

 可以用 event.preventDefault()或在事件處理函數中返回false，即 return false;

48--jquery表單提交前有幾種校正方法？分別為？？

a) formData:返回一個數組，可以通過迴圈調用來校正

b) jaForm：返回一個jQuery對象，所有需要先轉換成dom對象

c) fieldValue：返回一個數組beforeSend()

 

49--在jquery中你有沒有編寫過外掛程式，外掛程式有什麼好處？你編寫過那些外掛程式？它應該注意那些？

a)  外掛程式的好處：對已有的一系列方法或函數的封裝，以便在其他地方重新利用，方便後期維護和提高開發效率

b)  外掛程式的分類：封裝對象方法外掛程式 、封裝全域函數外掛程式、選取器外掛程式

b) 注意的地方：

i. 1.外掛程式的檔案名稱推薦命名為jquery.[外掛程式名].js，以免和其他的javaScript庫外掛程式混淆

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

iii. 3.外掛程式應該返回一個jQuery對象，以保證外掛程式的可鏈式操作

iv. 4.避免在外掛程式內部使用$作為jQuery對象的別名,而應使用完整的jQuery來表示，這樣可以避免衝突或使用閉包來避免

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

vi. 6.在外掛程式中通過$.extent({})封裝全域函數,選取器外掛程式，擴充已有的object對象通過$.fn.extend({})封裝對象方法外掛程式

 

50--jQuery 中的方法鏈是什嗎？使用方法鏈有什麼好處？

方法鏈是對一個方法返回的結果調用另一個方法，這使得代碼簡潔明了，同時由於只對 DOM 進行了一輪尋找，效能方面更加出色。

 

jQuery相關知識點1