【jQuery】属性の操作とイベント処理（１）

クラスの追加と削除

まずはじめに、以下のHTMLとCSSファイルを用意します。
HTMLファイルには、タグで囲まれた要素にidとclassを割り当てます。

例題３：クリックしたらh1タグの中身を表示する
<h1>jQueryを動かしてみよう！！</h1>

例題１：クラスの追加と削除
<p id="cls1">クラス1</p>
<p id="cls2" class="cls">クラス２</p>

例題２：クリックしたら色が変わる
<p id="event01" onclick="changeColor()">クリックイベント</p>

例題４：hover（マウスオーバー・マウスアウト時）
<ul id="hover">
	<li>リスト１</li>
	<li>リスト２</li>
	<li>リスト３</li>
</ul>

<p id="p1">toggleClass</p>

CSSファイルには、クラス要素.clsに背景と文字色を記述します。

@CHARSET "utf-8";
.cls{
	background-color: blue;
	color: white;
}

＜例題１＞
jQueryを使ってクラスの追加と削除を実行してみます。
コメントアウト"//"を先頭に追加して、一行づつ動作を確認してみましょう！！

$(function(){
	
	//クラスの追加と削除
	$("#cls1").addClass("cls"); //id=cls1に.clsを追加
	$("#cls2").removeClass("cls"); //id=cls2から.clsを削除
	$(".cls").removeClass("cls"); //class=clsから.clsを削除

});

イベント処理

イベント処理とは、何かが起きたことに伴って実行される処理のことです。jQueryでは画面に表示された要素内でマウスがクリックされたら何かの処理を実行するイベントに対応したイベント処理を記述することができます。

＜例題２＞
先程のクラスの追加と削除を応用して、クリックするとid = #event01にクラス.clsが追加されるクリックイベントを実行してみます。

//関数のなかに、jQueryを記述します
function changeColor(){
	$("#event01").addClass("cls");
}

＜例題３＞
h1タグがクリックされたとき、h1タグの要素を読み込んで「jQueryを動かしてみよう！！」と表示させてみます。"this"はクリックされたタグを指します。alert()オブジェクトで２通りの表示方法を記述しましたが、どちらも同じ動作をします。

$(function(){
	
	//イベント処理
	$("h1").click(function(){
		alert($("h1").text()); //h1タグがクリックされたら、ダイアログで、h1タグの中を表示します
		alert($(this).text()); //thisはクリックされたタグを指す
		
	})
});

＜例題４＞
li要素をマウスオーバーした時、ID = #p1の要素"toggle"にマウスオーバーしたリストの項目を表示します。マウスアウトした時は、「マウスアウト」と表示します。このイベント処理の場合、マウスオーバとマウスアウトした状態の２つの処理を実行するためにfunction文を２つ必要とします。文法としてはカンマ","で２つのfunction文を繋ぎます。

$(function(){
	$("要素").hover(
            function(){/* マウスカーソルが重なったときに実行 */},
            function(){/* マウスカーソルが離れたときに実行 */});}
);

実際にマウスオーバー/マウスアウトした時の処理を記述してみます。

$(function(){
	
	//hover（マウスオーバー・マウスアウト時）
	$("#hover li").hover(function(){
		//マウスオーバー
		//#p1に#hover liの要素を読み込む、thisは#hover liの要素を指します
		$("#p1").text($(this).text());
	},
	function(){
		//マウスアウト
		$("#p1").text("マウスアウト")
	});
});