超メモ帳(Web式)@復活

小説書いたり、絵を描いたり、プログラムやったりするブログ。統失プログラマ。


SPONSORED LINK

jqueryの基本的な使い方をまとめる #1


1日目:ここ
2日目:jqueryの基本的な使い方をまとめる #2 - 超メモ帳(Web式)
3日目:jqueryの基本的な使い方をまとめる #3 - 超メモ帳(Web式)
4日目:jqueryの基本的な使い方をまとめる #4 - 超メモ帳(Web式)
5日目:jqueryの基本的な使い方をまとめる #5 - 超メモ帳(Web式)


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

基本


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


Download jQuery | jQuery


ダウンロードして使わなくても、公式サイトにある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 要素の中の始めと最後


続きはまた明日。


プライバシーポリシー免責事項