第３章　jQueryの入門

３-1. jQueryとは

jQuery はアメリカのジョン・レシグ (John Resig) 氏によって初めに開発された、 JavaScriptの ライブラリです。 　現在もジョン・レシグ氏と共に jQuery プロジェクトによって、活発に開発が続けられています。 　

ライブラリとはある機能を達成するためのプログラムの塊です。私たちがJavaScriptのコード全て書く代わりに、このjQuery というライブラリーを利用すればより簡単にその目的を遂げることが出来ます。 　

☆　jQueryを利用するメリット：

３-2. jQueryの基本文法：セレクターとメソッド

☆　基本構文：

＄（”セレクター”）. jQueryの命令；

セレクターとはどのHTMLの要素を操作の対象に指定するかを示し、jQueryの命令はオブジェクト指向で言うメソッドで、セレクターに対する操作の内容を示します。
サンプルコーディング：

＄（"#target"）.css("margin-top","100px");

これはid="target"というHTMLの中の要素のCSSの"margin-top"を""100px"にするという操作です。
この書き方はCSSの；#target｛margin-top:100px;｝に非常に似ていてCSSに慣れている者には判り易い文法です。

セレクタの指定の仕方：
　　　HTMLタグで指定；　例　li　　　　
　　　id名で指定：　　　　例　#button、　　class名で指定：　　例　.man
　　　ＨＴＭＬタグとその内部のid名で指定：　　　例　ul#button 　タグとid名をスペースなしで結ぶ
　　　ＨＴＭＬタグとその内部のclass名で指定：　例　ul.man 　タグとclass名をスペースなしで結ぶ
　　　ＨＴＭＬタグの子孫タグまでの指定：　　　　例　　ul.tab li a 　子孫タグの間はスペースを空ける
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　上の例は<ul class="tab">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<li><a>hogehoge</a></li>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 <ul>　　のようなケースです。

2-3. jQueryのダウンロードと利用法

☆　jQueryのダウンロード方法

　jQueryノ公式サイト：　http://jquery.com/ より無料でダウウンロード出来ます。
　「production」版と「developement」版の2種類がありますが、軽量化されている「production」版がお勧めです。

☆　使い方

「production」版のファイル名は：　jquery-1.5.2.min.js のような名前で、1.5.2はその時のバージョンを示します。
使用するウェブ・ページの<head>・・・</head>の中に
<script src="">jquery-1.5.2.min.js</script>のように記述すれば利用できます。
JavaScriptの文字コードはHTMLの文字コードと同じにしておくのがお勧めですが、JavaScript及びHTMLの文字コードは共　　　UTH-8にしておくのが無難のようです。

☆　ブラウザー内でJavaScriptコードが実行されるタイミングの問題

ほとんどのブラウザーはHTMLのソース・コードを先頭から読み込んで実行して行きます。従って、JavaScriptコードが実行される前にBODY以下のコードが実行可能になっておく必要があります。
このために、JavaScriptの処理には先ずそのページ全体をReadyにしておくために：

＄(document).ready(function(){

　　ここにJavaScriptの処理を記述

　});

を入れておく必要があります。
この省略系として、

　

＄(function(){

　　ここにJavaScriptの処理を記述

　});

　を入れておく必要があります。

2-4. CSSのプロパーティーを変更する方法

☆　歴史上の人物名簿の作成
  1. 新規の空白HTML作成
    DocType：XHTML 1.0 transitional, ファイル名：page_sample_03_01.htmで保存
  2. <head>タグの中にjQueryライブラリーの読み込みを指定
    <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
  3. <body>タグの中に<h1>タグで表題を記入し、番号なしのリストで歴史上人物名簿を作成

<h1>歴史上人物名簿</h1>

<ul>
<li>豊臣秀吉</li>
<li>清少納言</li>
<li>紫式部</li>
<li>徳川家康</li>
<li>織田信長</li>
</ul>

歴史上の人物名簿の原簿のコーディングは：　Sample 03-00のようです。

☆　jQueryで歴史上人物名簿の色や大きさなどのプロパティーを変えてみる
  1. <head>タグの中にScriptタグを用意する
    <script type="text/javascript">この中にjQueryの命令を書き込む</script>
  2. 先ず、実行のタイミングを調整するFunction命令を書き込む
  3. 次に、歴史上人物名簿のプロパティーを規定する色々な命令を書き込んでみる
  4. 最後に、ブラウザーを立ち上げて、jQueryの命令通りに名簿のプロパティーが変わっているか確かめる
☆　HTMLタグのプロパティ設定のjQuery命令

$("HTMLタグ").css("プロパティー","値");

全ての人物の色を赤に変えるサンプルコーディングは：　Sample 03-01のようになります。

☆　HTMLタグに付けられたＩＤ名やＣｌａｓｓ名をセレクターに指定することも出来ます。

$("id名"　または　”class名”).css("プロパティー","値");

☆　イベントに反応する命令

イベントとはブラウザー上で「マウスをクリックした」、「ページが読み込まれた」など、出来事の発生したことす。JavaScriptではそのイベントに対して行う処理（イベントハンドラ）をタグの部分で指定しますが、jQueryにもイベントを察知して処理を行う命令が用意されています。　その代表的なものがマウスでHTMLタグがクリックされた時の処理命令（メソッド）がｃｌｉｃｋです。

$("セレクター").click(function(){



ここにjQueryの処理を記述

　});

ボタンをクリックした時に女性名は赤字に将軍名には大文字ににするサンプルは： Sample 03-02をご覧ください。

2-5. DOMの選択の色々な方法

ＤＯＭというのはＤｏｃｕｍｅｎｔ Ｏｂｊｅｃｔ Ｍｏｄｅｌの略で、ＪａｖａＳｃｒｉｐｔの立場から見たＨＴＭＬ各要素のことを指します。HTMLの各要素は<HTML>タグを先頭にして<Head>又は<Body>というようにＤＯＭツリーという階層構造になっており、お互いに親とか子供とか兄弟の関係にあります。JavaＳｃｒｉｐｔがＤＯＭをセレクターとして指定する方法は、そのＤＯＭツリーを考慮した上で以下に示すように色々あります。

ＤＯＭの色々な選択を示すサンプルは：　　Sample 03-03をご覧ください。

　サイトのトップへ JavaScriptの目次へ 　　第２章へ戻る 　　第４章へ進む