プログラミング系のネタをまとめていきます。

読み込み

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

イベント説明備考
loadHTMLページが完全にロードされた後に処理を行う。Windowオブジェクトの onload イベント
readyDOMがロードされて操作・解析が可能になったタイミングで処理を行う。
  • 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");


参考サイト


jQuery日本語リファレンス
http://semooh.jp/jquery/
×

この広告は60日間更新がないwikiに表示されております。

Menu

メインコンテンツ

プログラミング

機器

Macツール

各種情報

Wiki内検索

おまかせリンク

Androidアプリ

AdSense

技術書


管理人/副管理人のみ編集できます