首頁 > 文章 > web前端 > jQuery中的方法有哪些?jQuery中常用的方法（附程式碼）

jQuery中的方法有哪些?jQuery中常用的方法（附程式碼）

不言原創: 2018-08-13 13:36:491643瀏覽

這篇文章帶給大家的內容是關於jQuery中的方法有哪些?jQuery中常用的方法（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

.each()

遍歷一個jQuery對象，為每個匹配元素執行一個函數

$(&#39;p&#39;).each(function(idx,node){
  $(node).text(idx + &#39;:&#39; + &#39;hello&#39;)
})

$.extend()

jQuery.extend([deep,] target [, object1 ] [, objectN ] )
把多個物件合併，把所有的屬性加到第一個物件上

當我們提供兩個或多個物件給$.extend()，物件的所有屬性都會加入目標物件（target參數）。
如果只有一個參數提供給$.extend()，這表示目標參數被省略。在這種情況下，jQuery物件本身被預設為目標物件。這樣，我們可以在jQuery的命名空間下加入新的功能。這對於外掛程式開發者希望在 jQuery 中新增函數時是很有用的。即{}為預設屬性，使用者向裡面設定屬性，覆寫預設的屬性，沒有設定的即使用預設屬性。

var object = $.extend({}, object1, object2)
var object1 = {  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97
}var object2 = {  banana: { price: 200 },  durian: 100
}
// 将obj2合并到obj1上的案例
$.extend( object1, object2 )

.clone()

.clone()方法深度複製所有符合的元素集合，包括所有符合元素、符合元素的下級元素、文字節點。
通常我們將頁面上一個元素插入到DOM裡另一個地方，它會被從舊地方移走，類似剪切的效果。

例如：

<div class="container">    
<div class="hello">Hello</div>    
<div class="world">World</div></div>
$(&#39;.hello&#39;).appendTo(&#39;.world&#39;);<div class="container">  <div class="world">
    World    <div class="hello">Hello</div>  </div></div>

如果需要的是複製而不是剪切，可以像下面這樣寫程式碼：

$(&#39;.hello&#39;).clone().appendTo(&#39;.world&#39;)

.index()

從在給定集合中尋找特定元素 index下標

沒參數傳回第一個元素index
如果參數是DOM對像或jQuery對象，則傳回參數在集合中的index
#如果參數是選擇器，傳回第一個匹配元素index，沒有找到回傳-1

$(&#39;p&#39;).eq(2).index()  //2
$(&#39;.ok&#39;).index(&#39;p&#39;)  //获取p标签中的.ok的下标

.ready()

#相當於原生JS的document.onDOMContentLoaded
當DOM準備好時，指定一個函數來執行。

例如執行的程式碼需要在元素載入之後才能使用時，（例如，取得圖片的大小需要在圖片被載入完後才行），就需要將這樣的程式碼放到 load 事件中。

下面兩個寫法都是等同的

$(document).ready(function(){
})

$(function(){
})

範例

$(function(){    console.log(&#39;ready&#39;)
})

window.onload 和$(document).ready

開發中我們常常需要給一些元素的事件綁定處理函數。但問題是，如果那個元素還沒有被載入到頁面上，但是綁定事件已經執行完了，是沒有效果的。這兩個事件大致就是用來避免這樣一種情況，將綁定的函數放在這兩個事件的回呼中，保證能在頁面的某些元素加載完畢之後再綁定事件的函數。那window.onload 和 $(document).ready 有什麼差別？ document.onDOMContentLoaded 呢?

window.onload 和 $(document).ready 有什麼不同？

執行時間不同

window.onload必須等到頁面內包含圖片的所有元素載入完畢後才能執行。
$(document).ready()是 DOM結構繪製完畢後就執行，不必等到所有頁面元素載入完畢。

兩個方法重複執行的不同

window.onload不能同時寫多個，如果有多個window.onload方法，只會執行最後一個
$(document). ready()可以同時編寫多個，而且都可以執行。
如果兩個方法都寫了，那麼$(document).ready()是比window.onload要先執行的。

簡化寫法

window.onload沒有簡化寫法
$(document).ready(function(){})可以簡寫成$(function(){})

document.onDOMContentLoaded呢?

document.onDOMContentLoaded相當於jQuery 當中的.ready()。當初始的 HTML 文件被完全載入和解析完成之後，DOMContentLoaded 事件被觸發，而無需等待樣式表、圖像和子框架的完成載入。

jQuery文件介紹中有一段解釋這兩個不是同一個功能

#翻譯

ready()方法提供了一種方法，可以在頁面的DOM文檔物件模型變得可以安全操作時立即執行JavaScript程式碼。這通常是在使用者查看或與頁面互動之前執行所需任務的好時機，例如添加事件處理程序和初始化插件。當透過對此方法的連續呼叫添加多個函數時，它們在DOM準備好並按照添加順序運行。在jQuery 3.0中，jQuery確保在一個處理程序中發生異常不會阻止隨後新增的處理程序執行。

大多數瀏覽器以 DOMContentLoaded 事件的形式提供了類似的功能。然而，jQuery的 .ready() 方法有一個重要且有用的不同之處：如果DOM準備好了，瀏覽器在程式碼呼叫 .ready(handler) 之前就載入了 DOMContentLoaded ，那麼函數處理程序仍然會被執行。相反，在事件觸發後新增的DOMContentLoaded 事件偵聽器從未執行。

所以document.onDOMContentLoaded並不等同於jQuery中的.ready()，只能說是類似的方法。