<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.5.1"); //google.load("jquery", "1.5"); // 1.5.x 最新バージョンをロードする //google.load("jquery", "1"); // 1.x.y 最新バージョンをロードする </script>
<script src="jquery-1.7.0.min.js"></script>
$(document).ready(function(){ console.log("ready"); });
jQuery(document).ready(function(){ console.log("ready"); });
イベント | 説明 | 備考 |
load | HTMLページが完全にロードされた後に処理を行う。 | Windowオブジェクトの onload イベント |
ready | DOMがロードされて操作・解析が可能になったタイミングで処理を行う。 |
$(window).load(function () { // ページロード後に実行したい処理 });
<html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ // ここに処理を記述する。 }); </script> </head> <body> </body> </html>
<button id="button">ボタン</button> <div id="target" style="display: none; width: 150px; height: 150px; background-color: red;"> </div><!-- デフォルトでは非表示(display: none) -->
$(document).ready(function(){ $("#button").click(function(){ $("#target").show('slow'); // ボタンをクリック時に div を表示する });
<div>ここには枠線が付きます</div> <div>ここにも枠線が付きます</div> <p>ここには枠線が付きません</p>
$("div").css("border", "3px solid red");
<div id="myDiv">hoge</div>
$("#myDiv").css("border", "3px solid red");
<div class="myClass">枠線が付きます</div> <p class="myClass">枠線が付きます</p> <div class="hisClass">枠線が付きません</div> <div class="yourClass myClass">枠線が付きます</div>
$(".myClass").css("border", "3px solid red");