今日の人気記事

  1. GoogleにホストされているjQueryファイルの読み込み
  2. CDNにホストされているjQueryファイルの読み込み
  3. jQueryファイルの読み込み
  4. .click() 関数 - クリックイベント
  5. jQueryセレクター一覧

.ready() 関数

スポンサーリンク

.ready() 関数について解説します。

.ready() とは、HTML(DOM)が読み終わった後に実行される関数です。ready関数は、以下のような3つの形式で記述します。

①省略なしの形式

$(document).ready(function() {
  // 実行する処理を記述
});

②documentを省略した形式

※ jQuery APIによると、この記述は推奨されていません

$().ready(function(){
  // 実行する処理を記述
});

③document、readyを省略した形式

$(function(){
  // 実行する処理を記述
});

実際によくみるのは①か③ですね。どちらかを使っておけば問題ないでしょう。

スポンサーリンク

※ 他のJavascriptライブラリを利用する場合、以下の方法で記述する必要があります。WordPressでjQueryを利用する場合などがこれに該当します。

jQuery(document).ready(function($) {
  // 実行する処理を記述
});

サンプル/デモ

HTMLが読み終わるとpタグのテキストを変更するjQueryスクリプトです。読み込みが完了すると「読み込み完了!」というテキストが表示されます。

<script>
$(document).ready(function () {
  $("p").text("読み込み完了!");
});
</script>

「.ready() 関数」のサンプル

ソース( HTML + jQuery )

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="readyのデモでーす。">
<style>p { color:red; }</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
  $("p").text("読み込み完了!");
});
</script>
</head>
<body>
  <p>読込中……</p>
</body>
</html>
スポンサーリンク