jQuery０４

jQuery 授業



実行するタイミングの問題


$(function(){})


  • ページの読み込みが完了してから中に書かれたコードを実行する
  • 複数の命令をひとまとめにした関数を使う

  • 記述内容
$(function(){
  $('#sample').hide();
});


  • $(function(){}) は省略形
  • 文書が準備状態になったという意味

  • 記述内容
$(document).ready(function(){
  $('#sample').hide();
});


jQueryを読み込む



jQueryで記述


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery読み込み</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>
$('#sample').hide();
</script>

</head>
<body>
<div id="sample">このdivを消す</div>
</body>
</html>

ブラウザで表示【 Chrome 】

  • 命令が実行されていない




ライブラリにみる記述

  • body終了タグの前に記述する
  • 問題なく処理されます


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery読み込み</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

</head>
<body>
<div id="sample">このdivを消す</div>

<script>
$('#sample').hide();
</script>

</body>
</html>


ブラウザで表示【 Chrome 】

  • 命令が実行された