JavaScript - jQuery
最終更新：
bokkuri_orz 2014年09月16日(火) 02:22:13履歴
目次 
読み込み
Google Library API
<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>
ダウンロードしたjQueryを使う
htmlファイルと同じ場所に配置した場合。
<script src="jquery-1.7.0.min.js"></script>
●ダウンロード場所
http://jquery.com/download/
jQuery呼び出し
"$" と "jQuery" は同じ。
$(document).ready(function(){ console.log("ready"); });
jQuery(document).ready(function(){ console.log("ready"); });
イベント
load, ready
| イベント | 説明 | 備考 |
| load | HTMLページが完全にロードされた後に処理を行う。 | Windowオブジェクトの onload イベント |
| ready | DOMがロードされて操作・解析が可能になったタイミングで処理を行う。 |
- load
$(window).load(function () {
// ページロード後に実行したい処理
});
- ready
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
// ここに処理を記述する。
});
</script>
</head>
<body>
</body>
</html>
DOM
Document Object Model の略。
W3Cによって策定・勧告される、HTMLとXMLのための標準化されたAPI。
文書の論理構造と、プログラムから文書にアクセスし操作するため手段を定義する。
参考サイト
window.onload とjQury(document).ready の違い
http://kazefuku.net/archives/1212
ページ読み込み後に処理を行う方法
http://so-zou.jp/web-app/tech/programming/javascri...
click
ボタンクリック時のイベント。
<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");
id属性値
シャープ(#)で始まるセレクター。
<div id="myDiv">hoge</div>
$("#myDiv").css("border", "3px solid red");
idにピリオド(.), コロン(:)はバックスラッシュでエスケープする必要がある。
クラス名
ドット(.)で始まるセレクター。
<div class="myClass">枠線が付きます</div> <p class="myClass">枠線が付きます</p> <div class="hisClass">枠線が付きません</div> <div class="yourClass myClass">枠線が付きます</div>
$(".myClass").css("border", "3px solid red");
アスタリスク(*)
全てのエレメントに合致します。
//全ての要素に枠線が付きます。
$("*").css("border", "3px solid red");
参考サイト
タグ
最新コメント