iqueryの基本

iqueryとはjavascriptのライブラリで、現在よく使われている一つです。ブラウザの違いを吸収して、簡単なCSSの設定や、よく使われそうな画面効果などのjavascriptプログラムをまとめたソースファイルです。
利用する場合は、公式サイト（http://jquery.com/）よりライブラリのソースファイルをダウンロードして使う方法と、googleのサーバーにあるソースを利用する方法があります。
公式サイトからダウンロードする場合、「特殊な圧縮ファイル」と「そうでないファイル」を選択できます。
「特殊な圧縮ファイル」とはコメントや,無くてもよい空白や,改行を削除した Minifiedと呼ばれるもので、こちらを使う方がサイズが少ない分だけ使う時も速くダウンロードできます。
（非圧縮のファイルは内部プログラムを確認する際に使われるものです）
簡単な実際の例を以下にしめします。これは、公式サイトからダウンロードした「jquery-1.7.2.js」を使った例を下記に示します。
最初の例このソースを下に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Language" content="ja"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/> 
<title>初めて使うjQuery</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("h1").css("backgroundColor","#FFFF00");	//jQuerynの処理を記述
	$("h1,span").css("color","red");
	$("p").css("backgroundColor","#00FFFF");
	$("span").css("font-size","18pt");
});
</script>
</head>
<body >
<h1>h1要素セレクタ</h1>
<p>段落の１</p>
<p>段落<span>の２</span></p>
</body>
</html>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.7")</script>

jQuerynの処理を記述は、通常のjavascriptが書ける領域で、$(document).ready(function(){ から始まり、 }); の範囲内に書きます。
、readyは、jQuery用の関数で、HTMLが読み込み終わった後に実行させるためもでで、それによってこの記述がbody最後に書かなくてもよいタイミングの制御を行っています。
また、この表現は$(function(){ から});の省略した書き方ができ、この中にjQuerynの処理を記述します。
以降の記述では、この表現で紹介します。以下にこの表現に書き直した記述を示し、コメントで説明しています。

<script type="text/javascript">
$(function(){
	$("h1").css("backgroundColor","#FFFF00");	//h1の背景色のスタイル属性を指定("background-color"の表現でも可能)
	$("h1,span").css("color","red");		//h1とspanの文字色を指定
	$("p").css("backgroundColor","#00FFFF");	//pの背景色のスタイル属性を指定
	$("span").css("font-size","18pt");		//spanの文字サイズスタイル属性を指定
});
</script>

なお JavaScriptにおいて「$」という文字は、識別子（関数や関数などネーミングして作る文字列）を構成する「普通の文字」です。
つまり、関数を記憶した変数の名前が　$ で、それがjquery-1.7.2.jsの中で記憶されており、使えるとうい仕組みになっています。

次のボタンで、$の内容をalertで確認できます。

<pre class="BW" id="preId01">

</pre>

iqueryの基本

iqueryとは？