$(function() {}) について

jQueryの学習の際、参考書などでおまじない的な表現をされることのある「$(function() {})」について改めて確認してみます。

サンプルコード

まずは簡単なサンプルで動作を試してみます。
head内でjQuery本体を読み込んだ上で、同じくhead内で下記scriptを記述します。

$(function() {
  $('.contents').css('background', 'aqua');
});

次にbodyの終了タグの直前に下記scriptを記述します。

$(function() {
  $('.contents').css('color', 'red');
});

最後にbody内に操作対象の.contentsを配置します。

<div class="contents">コンテンツ</div>

この場合、どちらの操作も問題なく適用されています。
$(function() {})を使った場合のデモページ

次に先ほどの例からおまじないの$(function() {})を外してみます。

$('.contents').css('background', 'aqua');

$('.contents').css('color', 'red');

この場合はhead内の操作が適用されませんでした。
$(function() {})を使わなかった場合のデモページ

$(function() {}) について

$(function() {}) は元々 $(document).ready(function() {}); の短縮系で、使用することでDOMの読み込み完了後に実行されるようになります。
以前にJavaScriptの実行タイミングの記事を投稿していますが、その中の DOMContentLoaded と挙動としては近いです。

前述のデモでhead内の操作が適用されなくなったのは、操作対象の.contentsより前に記述があるためで、こういった記述順による問題を $(function() {}) を使うことで解消できます。

ちなみに前に挙げた $(document).ready(function() {}); の他にも $(function() {}) と同じ処理になる記法はいくつかありますが、jQuery 3.0以降では $(function() {}) のみが推奨で、それ以外は($(document).ready(function() {}); も含めて)非推奨となっているようです。