jQueryの文法

▶︎jQuery使用時の留意点

・javascriptを無効にしている場合に他のページにリンクできなくなるような構成はNG。特にドロップダウンメニューなどは使い方注意。

・あまり組み込み過ぎるとサイトが重くなリ、回遊率が低下するため、jsありきの作りは避けた方がよい。

・デバッグはブラウザの開発ツールを使用。

▶︎jQueryを組み込む手順

①コードをダウンロード

②単体で動くかテスト

③必要なコードを解析（最小構成で）
※この段階で、自分で理解できないソースは身の丈に合っていない。

④移植

CSS()

スタイルシートの設定

例）p要素の文字色を赤に設定

$(function(){
	$("p").css("color", "#FF0000");
});

addClass()

クラスの追加

例）p要素にtextRedクラスを追加

$(function(){
	$("p").addClass("textRed");
});

removeClass()

クラスの削除

例）p要素からtextRedクラスを削除

$(function(){
	$("p").removeClass("textRed");
});

hasClass()

クラスの判定

例）p要素がtextRedクラスを持っている場合はYes、そうでない場合はNoと表示

$(function(){
	if($("p").hasClass("textRed")){
		$("p").html("Yes");
	} else {
		$("p").html("No");
	}
});

width()

幅の取得

例）div要素の幅をp要素に表示

$(function(){
	$("p").html("Width：" + $("div").width() + "px");
});

height()

高さの取得

例）div要素の高さをp要素に表示

$(function(){
	$("p").html("Height：" + $("div").height() + "px");
});

offset()

位置の取得

例）p要素の位置を取得

●.offset().top・・上からの位置
●.offset().left・・左からの位置

$(function(){
	$("p").html("Top："+ $("p").offset().top + "px　Left：" + $("p").offset().left + "px");
});

scrollTop()

要素のスクロール位置を取得

例）ブラウザのスクロール位置をp要素に表示

$(function(){
	$(window).scroll(function(){
		$("p").html("Scroll：" + $(window).scrollTop() + "px");
	});
});

attr() -設定

属性の設定

例）img要素のsrc属性の値をimg1.pngからimg2.pngへ変更

$(function(){
	$("img").attr("src", "img2.png");
});

attr() -取得

属性の取得

例）img要素のsrc属性の値をp要素に表示

$(function(){
	$("p").html($("img").attr("src"));
});

val()

value属性の取得

例）input要素のvalue属性をp要素に表示

$(function(){
	$("p").html($("input").val());
});

html() -変更

HTMLの内容の変更

例）p要素の内容を<strong>タグを加えたテキストに変更

$(function(){
	$("p").html("<strong>HELLO WORLD!</strong>");
});

html() -取得

HTMLの取得

例）span要素の内容を取得し、p要素に表示

$(function(){
	$("p").html($("span").html());
});

prepend() -追加

要素の挿入（冒頭）

例）ul要素内の冒頭にli要素を追加

$(function(){
	$("ul").prepend("<li>List1</li>");
});

prepend() -移動

要素の移動（冒頭）

例）ul要素内の末尾の子要素liを、リストの冒頭に移動

$(function(){
	$("ul").prepend($("li:last-child"));
});

append() -追加

要素の挿入（末尾）

例）ul要素内の末尾にli要素を追加

$(function(){
	$("ul").append("<li>List3</li>");
});

append() -移動

要素の移動（末尾）

例）ul要素内の最初の子要素liを、リストの末尾に移動

$(function(){
	$("ul").append($("li:first-child"));
});

remove()

要素の削除

例）#target要素を削除

$(function(){
	$("#target").remove();
});

index()

インデックス番号の取得

例）#targetのインデックス番号をp要素に表示

●インデックス番号は0からカウント

$(function(){
	$("p").html("Index : " + $("#target").index());
});

click()

クリック

例）button要素をクリックしたタイミングで文字色を変更

$(function(){
	$("a").click(function(){
		$(this).css("color", "#FF0000");
		return false;
	});
});

hover() -case1

マウスオーバー

例）a要素をマウスオーバーしたタイミングで、文字色を変更

$(function(){
	$("a").hover(function(){
		$(this).css("color", "#FF0000");
	});
});

hover() -case2

マウスオーバー/マウスアウト

例）a要素をマウスオーバーすると赤、マウスアウトすると青へ文字色を変更

$(function(){
	$("a").hover(function(){
		$(this).css("color", "#FF0000");
	}, function(){
		$(this).css("color", "#0000FF");
	});
});

mousemove()

マウスの移動

例）マウスカーソル位置の座標を取得し、p要素に表示

●pageX・・マウスカーソルのX座標を取得
●pageY・・マウスカーソルのY座標を取得

$(function(){
	$(window).mousemove(function(e){
		$("p").html("X : " + e.pageX + "px　Y : " + e.pageY + "px");
	});
});

scroll()

スクロール

例）ブラウザをスクロールしたタイミングで、文字色を変更

$(function(){
	$(window).scroll(function(){
		$("p").css("color", "#FF0000");
	});
});

show()

表示

例）CSSで非表示にしたp要素を表示

$(function(){
	$("p").show();
});

hide()

非表示

例）p要素を非表示

$(function(){
	$("p").hide();
});

fadeIn()

要素のフェードイン

例）p要素を1000ミリ秒（1秒）のスピードでフェードインさせた後、文字色を変更

●デフォルトのスピード：400ミリ秒（0.4秒）

$(function(){
	$("p").fadeIn(1000, function(){
		$(this).css("color", "#FF0000")
	});
});

fadeOut()

要素のフェードアウト

例）p要素を1秒のスピードでフェードアウトさせた後、文字色を変更

$(function(){
	$("p").fadeOut(1000, function(){
		$(this).css("color", "#FF0000")
	});
});

slideToggle()

要素の開閉

例）dt要素をクリックすると、子要素のdd要素が開閉

$(function(){
	$("dt").click(function(){
		$("dd").slideToggle();
	});
});

animate() -絶対指定

アニメーション

例）button要素をクリックすると、left:0pxにあるdiv要素が500ミリ秒かけてleft:1000pxへ移動

$(function(){
	$("button").click(function(){
		$("div").animate({"left" : "1000px"}, 500);
	});
});

animate() -相対指定

アニメーション（相対指定）

例）button要素をクリックすると、div要素が現在の位置より100px右へ移動

$(function(){
	$("button").click(function(){
		$("div").animate({"left" : "+=100px"}, 500);
	});
});

stop()

アニメーションの中止

例）dt要素をマウスオーバーすると、dd要素が開閉

● 上記からstop()を外すと、連続でマウスオーバー/アウトを繰り返すたびに、同回数のスライドトグルが律儀に実行される（チラつく）

$(function(){
	$("dt").hover(function(){
		$("dd").stop().slideToggle();
	});
});

children() -case1

子要素の取得

例）div要素の子要素の文字色を変更

●孫要素以下は対象にならない。

$(function(){
	$("div").children().css("color", "#FF0000");
});

children() -case2

特定の子要素の取得

例）div要素の子要素のうち、span要素の文字色を変更

$(function(){
	$("div").children("span").css("color", "#FF0000");
});

parent()

親要素の取得

例）p要素の親要素にボーダーをつける

$(function(){
	$("p").parent().css("border", "1px solid #FF0000");
});

each()

要素に対して処理を行う

例）li要素にそれぞれインデックス番号を挿入

$(function(){
	$("li").each(function(){
		$(this).html("List" + $(this).index());
	});
});