サイトロゴ
セレクターを使ってみよう！
$関数に関数以外を渡したらどうなるのでしょう？
実は、$関数に文字列を渡すとセレクターになります。
セレクターについては後ほど解説しますので、まずは使ってみましょう。
「1_3.html」のソースを見てみましょう。 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery入門研修｜エレメントセレクター実践</title>
</head>
<body>
	<a href="http://jquery.com/">jQuery</a>
	<script src="../js/jquery-1.11.2.min.js"></script>
	<script>
		$(function() {
			// エレメント"a"を探そう！
		});
	</script>
</body>
</html>
この様に記述されているので、まずは8行目を見てみましょう。
ここでちょっと寄り道をしてHTMLの話になりますが、8行目には何が書かれていますか？5つ挙げてください。
意外と難しいですか？用語集も参考にしながら考えて見ましょう。
  1. aタグの開始タグ
  2. 開始タグ内のhref属性
  3. href属性の値（http://jquery.com/）
  4. aタグのコンテンツ（jQuery）
  5. aタグの終了タグ
この5つが8行目に記述された1つのエレメント（要素）を構成しています。
エレメント、タグ、属性名、属性値、コンテンツと言った単語はよく出てくるのでしっかり覚えましょう。
さて、セレクターの話に戻ります。$関数に文字列を渡すとセレクターになります。
この「文字列」にタグ名を指定すると、一致する要素を探してくれます。
これをエレメントセレクターと言い、他にも色々ありますがそれはまた後ほど解説します。
8行目にある要素のタグ名は"a"ですね。では12行目にコメントアウトしてある通りに$関数に"a"を渡してセレクターを使ってみましょう。
ここからは必要な部分だけを抜粋して例示します。 
	<script>
		$(function() {
			// エレメント"a"を探そう！
			$("a");
		});
	</script>
さて、タグ名が"a"の要素を探しただけでは何も起こりません。
実際にはjQueryのセレクターが先ほどの条件に一致する要素を探して、戻り値として返ってきているのですが、見た目にはわかりません。
それでは面白くないので本当に戻り値が返ってきているのか見てみましょう。
デベロッパーツール（F12キーで出てくるアレ）の出番です。Consoleを開いてください。
Consoleがどこにあるか分からない方はここをクリックしてください。2ヶ所にありますがどちらも同じです。
今回はこのConsoleを使ってエレメントセレクターの戻り値を確認します。
もう一度「1_3.html」を編集して、console.log関数にエレメントセレクターの戻り値を渡してみましょう。 
	<script>
		$(function() {
			// エレメント"a"を探そう！
			console.log($("a"));
		});
	</script>
それではここをクリックしてコンソールを見てみましょう。
何やらこのようにログが出力されていますね。赤丸の箇所をクリックするとこのように詳細を見ることができます。
細かい解説はしませんが、確かに「何か」が返ってきていることが確認できました。
ちなみに、これはコンソールが実装されているブラウザーでしか動作しません。
コンソールが実装されていないブラウザーで使うとエラーになります。デバッグ等で必要な時だけ使い、使ったらすぐ消すようにしてください。
もし消し忘れてそのままリリースされてしまうと、大問題になります。使ったらすぐ消しましょう。
TOPへ戻る