jqueryの基本的な使い方をまとめる #1 — 超メモ帳（web式）@復活

1日目:ここ

ドットインストールで勉強しているので、自分の学習のアウトプットとしてまとめる。

基本

インストールする場合には公式サイトからダウンロード。

Download jQuery | jQueryjQuery: The Write Less, Do More, JavaScript Libraryjquery.com

ダウンロードして使わなくても、公式サイトにあるURLをインクルードしても使える。head内で下記のように読み込む。

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

htmlが読み込まれた時に処理を実行するには下記のように記述。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$(function() {
		$("p").css("color", "red");
	});
</script>

$(‘p”)の部分はセレクタと呼ばれ、こちらで処理を行う要素を選択する。

後ろの.css(“color”, “red”)の部分はメソッドと呼び、行う処理を記述する。

また、メソッドの部分は繋げて記述することができて、これをメソッドチェーンと呼ぶ。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
	$(function() {
		$("p").css("color", "red").show("slow");
	});
</script>

上記のようにすると、pタグを赤く表示してゆっくりと消える。

セレクタの基本的な使用方法としては、タグごとに指定、class,idで指定する。

$("p").css("color", "red"); 		//pタグに指定
$("#main").css("color", "red"); 	//idがmainに指定されている要素
$(".item").css("color", "red");		//classがitemに指定されている要素

セレクタの記述方法

セレクタにはHTMLタグやid,classなどで指定するが、セレクタ内部で記法を使うと、もっと柔軟に指定ができる。

. id指定 class指定
直下の子要素
(シングルスペース) それ以外の要素
, 複数の要素
- 隣接する要素

セレクタのフィルタを使う

セレクタにはフィルタという記述方法がある。条件に一致する要素の中で更に絞り込む事が出来る。

下記のように記述する。

// id、subのliで2番めのものを選択する
$("#sub > li:eq(2)").css('color', 'red');

フィルタは以下のとおり。

:eq() 要素の中で順番にあたるものを指定
:gt() :lt() 要素の中で指定した数以上と数以下を指定
:even :odd 要素の中で偶数と奇数を指定
:contains() 要素の中で検索する
:first :last 要素の中の始めと最後

続きはまた明日。

基本

セレクタの記述方法

. id指定 class指定

セレクタのフィルタを使う