2011-04-22 139 views
10

以下jQuery代碼片段的最終結果是否相同?jQuery文檔準備功能

片段1:

$(function() { alert('test!'); }); 

片段2:

$(document).ready(function() { alert('test!'); }); 

換句話說,是$(function(){})只是$(document).ready(function() { });速記?

我問的原因是因爲我們看到一些使用jQuery和jQuery UI構建的小應用程序的一些奇怪問題。偶爾,通過單擊按鈕執行表單提交操作時,瀏覽器窗口將會凍結。我們仍然可以使用底層瀏覽器窗口(啓動彈出窗口的窗口),直到我們在那裏執行一些操作。用戶只能繼續強制關閉瀏覽器(顯然,Internet Explorer)。我們懷疑這與Acrobat PDF插件有關,但我只是在這裏查看所有角度,因爲我發現​​似乎表現出類似的行爲。

+5

是他們是等價的。請參閱此鏈接以供參考http://api.jquery.com/ready/ – dmarucco 2011-04-22 09:42:18

+1

@dmarucco,這應該是一個答案。 – 2011-04-22 09:44:08

+0

@dmarucco:如果您將其添加爲答案,我會批准它。 – tmbrggmn 2011-04-22 10:00:34

回答

9

所有這三個如下語法是等價的:

$(document).ready(handler) 
$().ready(handler) (this is not recommended) 
$(handler) 

走樣jQuery的命名空間

在使用其他JavaScript庫,我們不妨致電$ .noConflict(),以避免命名空間的困難。當這個函數被調用時,$快捷方式不再可用,迫使我們每次通常寫$都寫jQuery。但是,傳遞給.ready()方法的處理程序可以接受一個參數,該參數傳遞給全局jQuery對象。這意味着我們可以修改我們的。就緒()處理範圍內的對象,而不影響其他代碼:

jQuery(document).ready(function($) { 
    // Code using $ as usual goes here. 
}); 
3

$(function(){})$(document).ready(function() { })是相同的。

3

是的,這是相同的。但第一個通常用於jQuery容易。

$(function() { 
    alert('test!'); 
}); 
1

下面的代碼也工作

$(document).ready(function(){ 
    alert("success"); 
}); 

OR

$(function(){ 
    alert("succes"); 
}); 
1

是:

$(document).ready(function() { 
    /* code */ 
}); 

...和:

$(function() { 
    /* code */ 
}); 

......實際上是相同的,後者通常被稱爲前者的簡寫。

如果你想知道爲什麼他們產生相同的結果,它與jQuery的構造 -the jQuery()功能,別名爲$()做 - 及其允許的輸入。

構造函數記錄在api.jquery.com/jquery/,其兩個相關選項概述如下。


jQuery(selector [, context ])

接受一個包含CSS選擇,然後將其用於匹配一組元素的字符串。

返回一個jQuery對象。

這上面的選項是書寫時,你是如何調用jQuery的構造:

$(document).ready(function() { /* code */ }); 

document對象被選中,用於構建jQuery object。當DOM完全加載時,該jQuery對象調用ready()內的回調(匿名函數)。


jQuery(callback)

綁定一種功能,當DOM加載完成後執行。

返回一個jQuery對象。

上面這個選項是書寫時,你是如何調用jQuery的構造:

$(function() { /* code */ }); 

回調函數(匿名函數)來構建一個jQuery對象,而當DOM完全加載,它被調用。