$(function(){}); 行う?


208

時々私は関数を作り、後でその関数を呼び出します。

例:

function example { alert('example'); }
example(); // <-- Then call it later

どういうわけか、いくつかの関数を呼び出すことができません。私はそれらの関数を内部で呼び出さなければなりません:

$(function() { });

何を$(function() {});(function() { });意味、及びこれらの違い/目的は何ですか?

回答:


308
$(function() { ... });

jQueryの省略形です

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

(特に)ページのすべてのDOM要素を使用する準備ができたら、関数を確実に呼び出すように設計されています。

しかし、私はそれがあなたが抱えている問題ではないと思います-「どういうわけか、いくつかの関数は呼び出せず、内部でそれらの関数を呼び出さなければならない」という意味を明確にできますか?おそらく、期待どおりに機能していないものを示すコードを投稿しますか?

編集:質問をもう一度読んでください。ページの読み込みが完了する前に関数が実行されているため、正しく実行されない可能性があります。$(function)に置くと、実際に修正されます!


2
$(function(){});の場合 はすでに$(document).ready()にありますか?
jwchang

関数は$(function()なしでは機能しませんが、すでに$(document)ready()にあります
jwchang

良い質問!jQueryがあなたが正しい場所にいることを知っているので、私はそれがうまくいくと信じていますが、それは確かに無関係です。.ready()内にいる場合は、通常どおり関数を呼び出すことができます。うまくいかない場合は、サンプルを投稿するか、さらに良い方法として、jsfiddle.netを試してみてください。
Russ Clarke、

4
@JeongWooChangそうやってください(function () { ... })();()関数を呼び出すには、追加する必要があります。
–ŠimeVidas、2011

3
「経験豊富な開発者はの省略形$()を使用する$( document ).ready()場合があります。jQueryの経験がない人が見る可能性があるコードを記述している場合は、長い形式を使用するのが最善です。」- learn.jquery.com
thdoan

15

以下は、jQuery関数呼び出しです。

$(...);

これが「jQuery関数」です。$は関数であり、$(...)その関数を呼び出していますか?

指定した最初のパラメーターは次のとおりです。

function() {}

パラメータは指定した$関数であり、DOMの読み込みが完了すると、指定されたメソッドが呼び出されます。



5

JavaScriptとjQueryメソッドを混同していると思います。バニラまたはプレーンJavascriptは次のようなものです。

function example() {
}

その性質の関数はいつでもどこでも呼び出すことができます。

jQuery(Javascriptに基づいて構築されたライブラリ)には、通常、呼び出される前にDOMを完全にレンダリングする必要がある組み込み関数があります。これが完了するときの構文は次のとおりです。

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

そのため、通常、「」$または「」という接頭辞が付いたjQuery関数は、jQueryそのメソッド内から呼び出されます。

$(document).ready(function() {        
    // Assign all list items on the page to be the  color red.  
    //      This does not work until AFTER the entire DOM is "ready", hence the $(document).ready()
    $('li').css('color', 'red');   
});

そのブロックの疑似コードは次のとおりです。

ドキュメントオブジェクトモデルの$(document)準備ができたら.ready()、次の関数を呼び出しますfunction() { }。その関数で<li>、ページ上のすべてのを確認$('li')し、jQueryメソッド.CSS()を使用してCSSプロパティ「color」を値「red」に設定します.css('color', 'red');


2

これはのショートカット$(document).ready()であり、ブラウザがページの読み込みを完了したときに実行されます(つまり、「DOMが使用可能な場合」)。http://www.learningjquery.com/2006/09/introducing-document-readyを参照してくださいexample()ブラウザがページの読み込みを完了する前に呼び出しを行おうとすると、機能しない場合があります。


1
「ページの読み込みが完了しました」は不正確で誤解を招くものです。
Yahel
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.