jQueryを使ってみよう。(基本編メソッド)

今回はメソッドについて説明していきます。
メソッドといわれると「何？」って感じですが、大雑把に「その対象に対して行う命令」と覚えておいて下さい。
例えば車でアクセルを踏むと動きます。これはアクセルに「踏むと車を動かす」という命令が車の仕組みとして組み込まれているからです。
jQueryにも「こう書けば、こういう命令をする」という予め組み込まれた命令（メソッド）が用意されています。まずこのメッソドの書き方を覚えていきましょう。

ではテーブル（表組）の見た目をjQueryで変えてみます。

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQueryを使ってみよう。(基本編 メソッド)</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script language="JavaScript">
$(function (){
	$("th").css({"color":"#ffffff","background":"#000000"})
		.css({"font-size":"14px"});
	$("th,td").css({"padding":"6px"});
	$("tr:even").css({"background":"#dddddd"});
	$("tr:odd").css({"background":"#fafafa"});
});
</script>
</head>
<body>
<table>
<tr>
<th>書籍名</th><th>著者</th><th>価格</th>
</tr>
<tr>
<td>デザインのデザイン</td><td>原 研哉</td><td>￥ 1,995 （税込）</td>
</tr>
<tr>
<td> なぜデザインなのか。 </td><td>原 研哉/阿部 雅世</td><td>￥ 1,890 （税込）</td>
</tr>
<tr>
<td>  HAPTIC —五感の覚醒  </td><td>株式会社竹尾 原研哉＋日本デザインセンター原デザイン研究所</td><td>￥ 3,990 （税込）</td>
</tr>
<tr>
<td>原研哉のデザイン</td><td>アイデア編集部</td><td>￥ 1,890 （税込） </td>
</tr>
</table>
</body>
</html>

サンプル

サンプルではHTML、CSSでまったく見た目の変更は指定していませんが背景に色がついたりと見た目が変更されています（サンプルでは行を少し増やしています）。

$("th").css({"color":"#ffffff","background":"#000000"});

上記は『$(“th”)=thタグ』に『css({“color”:”#ffffff”,”background”:”#000000″})=「color:#ffffff」「background:#000000」のスタイルを適用しなさい』という意味になります。

このようにメソッドは処理をする要素を指定（$(“th”)）した後に「 . (ドット)」を入れてつなげます。

またメソッドはいくつもつなげて利用することができます。これをメソッドチェーンといます。複数つなげる場合も下記のように「 . (ドット)」でつなげていきます。

$("th").css({"color":"#ffffff","background":"#000000"})
		.css({"font-size":"14px"});

またサンプルの例ではセレクタに「tr:even」「tr:odd」を指定していますが、「tr:even=奇数番目のtr」「tr:odd=偶数番目のtr」という意味になります。こう指定することで、どれだけ行を増やしていっても交互に色がかわるテーブルになります。

今回は「メソッド」の書き方を説明していきましたが、「セレクタ」「メソッド」をあわせて、なんとなく読めるようになったと思います。

$("p#msg").text("こんにちは。");

例えば上記の場合「id=msgと指定されたpタグ」に「text」というメソッドがつながっている。これがわかればマニュアルを見て「text」が何の命令をしてるのかを確認すれば、「text=テキストを設定する」となっていので、「id=msgと指定されたpタグ」に「こんにちは。というテキストを設定しろ」と書いていることがわかります。

ここまでくればマニュアルも活用できると思いますので、興味がある方はどんなことができるのかどんどんマニュアルで調べていろいろ試してみて下さい。

jQuery 1.2.6 日本語リファレンス

あと基本として覚えておくべきものとして「イベント」があります。例えば「マウスが乗ったときに」「クリックされたときに」など、「何かをしたときに」処理をする、といった条件をつけたい場合があります。「マウスが乗ったら画像を変更する」場合などに、この「イベント」を利用します。

ということで次回は基本編の最後「イベント」について勉強していきます。