JavaScriptでできること
 |
|---|
| (X)HTMLとCSS、JavaScriptの関係 |
jQueryの具体的な記述方法に入る前に、そもそもJavaScriptでは何ができるかということに少し触れておきましょう。
誤解を恐れずに言えば、JavaScriptは「(X)HTMLとCSS（Cascading Style Sheets）を操作するためのプログラミング言語」です。Webサイトを作成するには、通常、(X)HTMLでコンテンツの構造や内容を、CSSで見た目であるレイアウトや装飾を記述します。これに対してJavaScriptは、ユーザーの操作などが発生したタイミングで(X)HTMLやCSSを動的に変更することにより、Webサイトにインタラクティブな動きを与えます。
たとえば、第1回で紹介したアコーディオンパネルは、「dt要素がクリックされたらdd要素のheightプロパティを変更する」という処理によって、パネル部分が伸び縮みする動きを実現しています。
jQueryに限らず、JavaScriptを記述する際には(X)HTMLとCSSを強く意識する必要があります。この点を踏まえた上で、jQueryを利用した(X)HTMLとCSSの具体的な操作方法をマスターしていきましょう。
JavaScriptの実行タイミングとjQueryのready関数
さっそく、jQueryのコードを書いてみましょう……と言いたいところですが、その前に1つだけ知っておきたい約束ごとがあります。前回の記事で、jQueryを含むJavaScriptのコードはscript要素の中に記述すると説明しました。
Webブラウザーは、(X)HTMLをファイルの先頭から一行ずつ読み込んでおり、script要素が読み込まれた段階で、script要素内に記述された命令を実行します。以下に示すJavaScriptの簡単なサンプルで、実際に確かめてみましょう。こちらに公開していますので、ぜひブラウザーで開いてみてください。
<!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" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>アコーディオンパネル</title>
<script type="text/javascript">
alert("Hello world!");
</script>
</head>
<body>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</body>
</html>
サンプルを実行すると、「Hello world!」というアラートダイアログが表示されます。「OK」ボタンを押すと body要素に記述されているテキストが表示されますが、OKボタンを押すまでは何も表示されません。「alert」というアラートダイアログを表示する命令が実行された時点では、script要素以降のHTMLをブラウザーは認識していないため、「OK」を押してalertの命令を終了させた後に本文のテキストが表示された――というわけです。
ということは、head要素内の script要素に body要素内の(X)HTMLを操作するための命令を書いても、ブラウザーがまだscript要素までしか読み込んでいないので、意図通りには動きません。それでは困ります。
そこで登場するのが、スクリプトを実行するタイミングを制御する「ready」というjQueryの関数です（「関数」とは、JavaScriptやjQueryにおいて特定の機能を利用するための処理をまとめた命令、とここでは捉えておいてください）。ready関数は以下のようにして利用します。
$(document).ready(function(){
//ここにjQueryの命令を記述
})
このとき、ready関数の内側（{...}）に書かれている命令は、(X)HTMLの読み込みが終わった後に実行されます。これなら、head要素内のscript要素にスクリプトを書いた場合でも、body要素内の(X)HTMLをちゃんと操作できます。
ready関数は以下のような省略形でも使えます。
$(function(){
//ここにjQueryの命令を記述
})
jQueryでスクリプトを書くときには、ほとんどの場合、まずready関数を記述し、その内側に実際の命令を記述していきます。jQueryを利用するときの1つの“決まりごと”として、覚えてしまいましょう。
Read more:
http://ascii.jp/elem/000/000/439/439414/#ixzz20E2lppTv
要素を指定するためのセレクターAPI
jQueryを利用したスクリプトでは、（1）どの(X)HTMLの要素を操作するかをセレクターで指定し、（2）処理の内容を書きます。具体的には、$("...")の内側にセレクターを記述し、その後ろに.(ドット)でjQueryの命令を記述していきます。jQueryは、ほぼすべてこの形式で処理を書きます。
$(function(){
$("セレクター").jQueryの命令
})
jQueryには「セレクターAPI」という機能が用意されており、簡単かつ柔軟な方法で目的の(X)HTML要素を指定できるようになっています。jQueryで使えるセレクターを一通り紹介しましょう。
1．CSSでよく利用されるセレクター
jQueryでは、CSSでおなじみの要素セレクターやIDセレクター、クラスセレクターから、子孫セレクター、ユニバーサルセレクター、セレクターのグルーピングまで、さまざまなセレクターが利用できます。
■要素セレクター
特定の(X)HTML要素に対して命令を実行する際には、要素セレクターを利用します。サンプルスクリプトのcss("color","red")は、「CSSのcolorプロパティの値をredに変更する」というjQueryの命令です（jQueryの命令については次回、詳しく説明します）。
▼サンプルコード（HTML部分）
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li").css("color","red");
})
li要素のCSSのcolorプロパティが変更され、赤色で表示されます。
■IDセレクター
文書にある要素を丸ごとではなく、特定のid属性を持つ要素に命令を実行します。id属性の値に#(ハッシュ)を付けたものをセレクターとして利用します。
▼サンプルコード（HTML部分）
<ul>
<li id="first">テキストテキストテキストテキストテキスト</li>
<li id="second">テキストテキストテキストテキストテキスト</li>
<li id="third">テキストテキストテキストテキストテキスト</li>
<li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("#first").css("color","red");
})
id属性にfirstが設定されたli要素（最初のli要素）が赤色になります。
IDだけでどの要素なのか特定できますが、どの要素名なのか分かりやすくするために、要素セレクターとIDセレクターをつなげても指定できます。
$(function(){
$("li#first").css("color","red");
})
■クラスセレクター
特定のclass属性を持つ要素に対して命令を実行します。class属性の値に.(ドット)を付けたものをセレクターとして利用します。
▼サンプルコード（HTML部分）
<ul>
<li class="first">テキストテキストテキストテキストテキスト</li>
<li class="second">テキストテキストテキストテキストテキスト</li>
<li class="third">テキストテキストテキストテキストテキスト</li>
<li class="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$(".second").css("color","red");
})
class属性にsecondが設定されたli要素（2番目のli要素）が赤色になります。
IDセレクターと同様に、要素セレクターとクラスセレクターをつなげても書けます。
$(function(){
$("li.second").css("color","red");
})
■子孫セレクター
複数のセレクターをスペース区切りで指定することにより、特定の要素の内側にある要素をさらに絞りこんで指定できます。
▼サンプルコード（HTML部分）
<ul>
<li class="first"><strong>テキスト</strong>テキストテキストテキストテキスト</li>
<li class="second"><strong>テキスト</strong>テキストテキストテキストテキスト</li>
<li class="third"><strong>テキスト</strong>テキストテキストテキストテキスト</li>
<li class="fourth"><strong>テキスト</strong>トテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$(".first strong").css("color","red");
})
class属性にfirstが指定された要素の内側にあるstrong要素、つまり1行目のli要素のstrong要素だけが赤色になり、他のli要素の内側のstrong要素は赤色になりません。
■ユニバーサルセレクター
すべての要素を指定できるのが「ユニバーサルセレクター」です。ユニバーサルセレクターは*(アスタリスク)で記述します。
▼サンプルコード（HTML部分）
<ul>
<li><strong>テキスト</strong>テキストテキストテキストテキスト</li>
<li><em>テキスト</em>テキストテキストテキストテキスト</li>
<li><span>テキスト</span>テキストテキストテキストテキスト</li>
<li>テキストトテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li *").css("color","red");
})
li要素内に含まれるすべての要素、つまり1行目のstrong要素と2行目のem要素、3行目のspan要素が赤色になります。
■グループセレクター
複数のセレクターを,(カンマ)区切りで並べて指定できるのが「グループセレクター」です。それぞれのセレクターに対する命令をまとめて記述できます。
▼サンプルコード（HTML部分）
<ul>
<li id="first">テキストテキストテキストテキストテキスト</li>
<li id="second">テキストテキストテキストテキストテキスト</li>
<li id="third">テキストテキストテキストテキストテキスト</li>
<li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("#first , #third").css("color","red");
})
id属性にfirstが指定された1行目のli要素と、thirdが指定された3行目のli要素が赤色になります。
2．CSS2のセレクター
Internet Explorer 6（IE6）などの一部のブラウザーが対応していないCSS2（Cascading Style Sheets Level 2）のそのほかのセレクターも、jQueryでは利用できます。
■子セレクター
特定の要素の直下に配置された要素を指定できるのが「子セレクター」です。子セレクターは親要素と子要素を >（大なり/greater than）で結びます。
▼サンプルコード（HTML部分）
<ul>
<li><strong>テキスト</strong>テキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li><div><strong>テキスト</strong>テキストテキストテキスト<span>テキスト</span></div></li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li > strong").css("color","red");
})
1行目のli要素の子要素のspan要素が赤色になります。3行目のstrong要素はdiv要素の直下に配置された要素なので赤色にはなりません。
■隣接セレクター
特定の要素の次に出現する要素を指定できるのが「隣接セレクター」です。隣接セレクターは隣接する要素を +（プラス）で指定します。
▼サンプルコード（HTML部分）
<ul>
<li id="first">テキストテキストテキストテキストテキスト</li>
<li id="second">テキストテキストテキストテキストテキスト</li>
<li id="third">テキストテキストテキストテキストテキスト</li>
<li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("#second + li").css("color","red");
})
id属性にsecondが指定された要素の次に出現するli要素、つまり3行目のli要素が赤色になります。
■first-child擬似クラス
特定のセレクターのうち最初に登場する要素のみを指定するセレクターとして、「first-child擬似クラス」があります。セレクターの後ろに:first-childと記述して指定します。first-child擬似クラスは、親要素が異なる場合にも、それぞれ最初に出現する要素が指定されます。
▼サンプルコード（HTML部分）
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li:first-child").css("color","red");
})
2つのul要素それぞれ最初に登場するli要素、つまり1行目のli要素が赤色になります。
3．CSS3のセレクター
jQueryは、現在策定中のCSS3（Cascading Style Sheets level 3）のセレクターの多くにも対応しています。
■間接セレクター
特定のセレクターの後に出現する要素を指定できるのが「間接セレクター」です。セレクターと要素を ~(チルダ)で結びます。
▼サンプルコード（HTML部分）
<ul>
<li id="first">テキストテキストテキストテキストテキスト</li>
<li id="second">テキストテキストテキストテキストテキスト</li>
<li id="third">テキストテキストテキストテキストテキスト</li>
<li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("#second ~ li").css("color","red");
})
id属性にsecondが付けられた要素の後ろに登場するli要素、つまり3行目以降のli要素が赤色になります。ただし、本記事執筆時点（2009年7月）ではFirefox3で正常に動作しないようです。
■否定擬似クラス
セレクター内で特定の条件以外のものを指定できるのが「否定擬似クラス」です。セレクターの後ろに :not(...) を付け、除外する条件を(...) 内に記述します。
▼サンプルコード（HTML部分）
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li:not(:first-child)").css("color","red");
})
最初に登場する1行目のli要素以外のli要素、つまり2行目以降のli要素が赤色になります。
■empty擬似クラス
子要素やテキストを含まない要素を指定できるのが「empty擬似クラス」です。セレクターの後ろに :empty と記述します。
▼サンプルコード（HTML部分）
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li></li>
<li>テキストテキストテキストテキストテキスト</li>
<li></li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li:empty").css("color","red");
})
空のli要素、つまり2行目と4行目のli要素が赤色になります。
■nth-child擬似クラス
特定のセレクターから指定した番号の要素だけを指定できるのが「nth-child擬似クラス」です。セレクターの後ろに :nth-child(番号) と記述します。
▼サンプルコード（HTML部分）
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li:nth-child(3)").css("color","red");
})
3番目のli要素だけが赤色になります。
nth-child擬似クラスは、$("li:nth-child(even)") で偶数番目のli要素を、$("li:nth-child(odd)") で奇数番目のli要素を指定できます。また、$("li:nth-child(3n)") と記述することで、3の倍数番目の要素を指定できます。
■last-child擬似クラス
特定のセレクターの中で最後の要素だけを指定できるのが「last-child擬似クラス」です。セレクターの後ろに :last-child と記述します。
▼サンプルコード（HTML部分）
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li:last-child").css("color","red");
})
最後のli要素（ここでは4番目のli要素）だけが赤色になります。
■only-child擬似クラス
セレクターの中に特定の要素が1つだけ含まれる場合、その要素を指定できます。セレクターの後ろに :only-child と記述します。
▼サンプルコード（HTML部分）
<ul>
<ul>
<li><span>テキスト</span>テキストテキストテキストテキスト</li>
<li><span>テキスト</span>テキスト<span>テキスト</span>テキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
▼サンプルコード（スクリプト部分）
$(function(){
$("li span:only-child").css("color","red");
})
1行目のspan要素だけが赤色になります。2行目のli要素にはspan要素が複数含まれるため、色は変わりません。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
