@ PHP

ready():jQueryの実行

.ready() とは、DOM が全てロードされて DOM にアクセスできる準備が出来た段階で実行される関数です。
DOM(Document Object Model)とは、xml や html の各要素、たとえば p 要素や img 要素にアクセスする仕組みのことです。

ready() 関数は、以下のような形式で記述します。

.ready()を使ってjQueryを実行する

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

ready.html は、DOM が読み終わると p 要素のテキストを変更する jQuery スクリプトです。読み込みが完了すると「DOMの読み込みが完了し、操作が可能な状態になりました。」というテキストが表示されます。

ready.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<link rel="stylesheet" href="css/styles.css" />
</head>

<body>
  <p>DOMの読込中……</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("p").text("DOMの読み込みが完了し、操作が可能な状態になりました。")
});
</script>
</body>

</html>

demo

.ready()を省略してjQueryを実行する

(document).ready は省略できます。

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

$.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<link rel="stylesheet" href="css/styles.css" />
</head>

<body>
  <p>DOMの読込中……</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  $("p").text("DOMの読み込みが完了し、操作が可能な状態になりました。")
});
</script>
</body>

</html>

demo

JavaScriptソースコードの分離

jQuery に限らず、JavaScript でアプリを開発する際には、HTML マークアップと JavaScript ソースコードを分離します。HTML の中に JavaScript が散在するようなアプリは見通しも悪く、潜在的なバグの原因にもなるためです。JavaScript は 外部の js ファイルに記述し、HTML には JavaScript を制御するためのパラメーターや文字列だけを記述します。

example.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<link rel="stylesheet" href="css/styles.css" />
</head>

<body>
  <p>DOMの読込中……</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>

</html>

scripts.js

$(function() {
  $("p").text("DOMの読み込みが完了し、操作が可能な状態になりました。")
});