Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています（＾＾）　週末はレストランやコンビニのお菓子のことを書いています。

jQuery クリックやマウスオーバーイベント　click mouseover mouseout

jQuery

今回は、jQueryの「click」, 「mouseover」,「mouseout」について書きます。


「click」は、要素をクリックしたときにクリックイベントを発生させるメソッドです。
「mouseover」,「mouseout」は、マウスオーバー関連のイベントを発生させるメソッドです。


１.「click」
「click」は、要素をクリックした時に呼び出されるメソッドです。

こんな感じに使います。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQuery</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <style>
        	#target{
        		width: 100px;
        		height: 100px;
        		background: blue;
        	}
        </style>
</head>
<body>
	<div id="target"></div>
	<script>
		$(function(){
			$('#target').click(function(){
				alert('ok');
			});
		});
	</script>
</body>
</html>

実行結果
f:id:gupuru:20140531223603p:plain

このプログラムは、ボックスをクリックすると、アラートが表示されます。

引数は、こんな感じです。

.click(fn);

fnに、クリックしたときに処理したいイベントを書きます。


２.「mouseover」「mouseout」
「mouseover」,「mouseout」は、マウスオーバー時の処理です。要素にマウスカーソルが乗った場合やマウスカーソルが外れた際に発生するイベントです。

こんな感じに使います。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>jQuery</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <style>
        	#target{
        		width: 100px;
        		height: 100px;
        		background: blue;
        	}
        </style>
</head>
<body>
	<div id="target"></div>
	<script>
		$(function(){
			$('#target').mouseover(function(){
				$(this).css('background','green');
			});

			$('#target').mouseout(function(){
				$(this).css('background','blue');
			});
		});
	</script>
</body>
</html>

実行結果
f:id:gupuru:20140531224717p:plain

ちなみに、メソッドチェーンを使うと、こんな感じです。

$('#target').mouseover(function(){
	$(this).css('background','green');
}).mouseout(function(){
	$(this).css('background','blue');
});

「mouseover」,「mouseout」の引数は、「click」と同じです。

これで、終わります。

jQueryのmouseoverメソッドとmouseenterメソッドの違い - to-R
click(fn) - jQuery 日本語リファレンス