tande lab.

[jQuery] 基礎〜セレクタの指定方法まで

jQuery 少し使わないだけで、色々と忘れてしまうのでメモ。
せっかく使えるようになっても自分の言葉で記録に残さないとほんとすぐ忘れる。

以下、jQuery の基礎やらセレクタの指定方法の整理。

jQuery とは

Wikipedia から引用すると。

JavaScript と HTML の相互作用を強化する軽量な JavaScript ライブラリ

要は、XML や HTML を、簡単に操作・変更できる超便利な JavaScript ライブラリ。
通常 HTML だけでは難しい CSS の操作や、アニメーション処理が容易にできる。

最新情報とか、最新のライブラリとかは 公式サイト で確認する。

jQuery を使うには

HTML の <head> タグ内に jQuery ライブラリまでのURLを記述しておく。

<script src="jquery-1.9.1-min.js"></script>

公式サイト から、ライブラリをダウンロードして利用する場合は上記の記述方法だけど、下記のように、jQuery のサイトから直接読み込んでもOK。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

ちなみに、ファイル名に ".min" がついているのは、圧縮版という意味で、".min" がついてもついてなくても出来ること自体は変わらないけど、読み込み速度とかに違いがあるようだ。

もちろん ".min" がついている方が速度は早くなる。

jQuery のコードは以下のような感じで記述する。

<script>
	$(function() {
		// jQuery のコードをここに書く
	});
</script>

実は、以下のコードが略されたもの。
HTML ドキュメントが読み込まれたら実行するよ、っていう宣言らしい。

<script>
        $(document).ready(function() {
		// jQuery のコードをここに書く
	});
</script>

jQuery の大骨頂 セレクタ操作

セレクタ.メソッド

という形で指定する。

セレクタ
操作対象の HTML 要素を示すもの。

メソッド
選択したセレクタに対して実行する処理のこと。

$(‘h1’).css(‘color’, ‘red’);

この例だと、<h1> 要素の CSS スタイル "color" を "red" に設定となる。

$(‘h1’).css(‘color’, ‘red’).hide(‘slow’);

こんな感じで、後ろにメソッドを更に追加して、複数の操作を繋げることもできる。
これを メソッド・チェーン と言う。

セレクタで指定できるもの

HTML のタグ名だけでなくID名やクラス名を指定することも可能。

タグ名での指定

$(‘h1’).css(‘color’, ‘red’);

ID名での指定

$(‘#hoge’).css(‘color’, ‘red’);

クラス名での指定

$(‘.hoge’).css(‘color’, ‘red’);

複数の要素を指定
h1 タグと hoge クラスを複数指定する。

$(‘h1, .hoge’).css(‘color’, ‘red’);

子要素を指定
ul タグ内にある li タグを指定する。

$(‘ul>li’).css(‘color’, ‘red’);

セレクタを更に便利に指定できるフィルタ機能

:(コロン) の後にフィルタを追加して特定の要素だけを指定することができる。

first
要素の一番最初のものを指定する。

$(‘li:first’).css(‘color’, ‘red’);

last
要素の一番最後のものを指定する。

$(‘li:last’).css(‘color’, ‘red’);

even
要素の偶数番目のものを指定する。

$(‘li:even’).css(‘color’, ‘red’);

odd
要素の奇数番目のものを指定する。

$(‘li:odd’).css(‘color’, ‘red’);

eq(*)
要素の*番目のものを指定する。
ちなみに、数字は 0から数えられるので注意。

$(‘li:eq(2)’).css(‘color’, ‘red’);

gt(*)
要素の*番目以降のものを指定する。

$(‘li:gt(2)’).css(‘color’, ‘red’);

contains("***")
要素内で指定の文字列***が入っているものを指定する。

$(‘li:contains("ほげ")’).css(‘color’, ‘red’);

参考サイト




0 comments
Submit comment