アットウィキロゴ
nicepaper @ ウィキ
アットウィキロゴ
nicepaper @ ウィキ
ページ一覧

前回記事jQueryを学ぶ1では基本的な書き方を学んだと思います。今日は指定したセレクタについて、CSS以外の動かす方法について執筆していきたいと思います。7月12日記事

目次




jQueryの基本構文 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryでCSS</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {

});
</script>
</head>
<body>
</body>
</html>

jQueryを呼び出し、<script>で囲み$からはじめて});</script>で終わることを前回学んだと思います。

代表的な関数（メソッド）を使ってみる

代表的な関数を使ってみます。正確にはメソッドですが、プログラム初心者は関数だと思っていただければ構いませんし、他のプログラムを学んだ方はメソッドだと思ってください。

fadeOut

HTML 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryでCSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
	$('#main').fadeOut(4000);
});
</script>
</head>
<body>
<div id="main">
	<p>mainの中の文字</p>
</div>
<p>mainの外の文字</p>
</body>
</html>

CSS @charset "utf-8"; /* CSS Document */

#main

p{ text-align: center; } すると、最初は表示されていますが、ゆっくりと消えていき、全部消えたら、#mainも消えて、mainの外のpが上側にきます。 これから

結局最後は以下のようになる。



#mainのpにmouseoverしたときに、赤字に変える。

HTML部 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryでCSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
	$("#main p").mouseover(function(){
		$(this).css('color','#f00');
	});

});
</script>
</head>
<body>
<div id="main">
	<p>mainの中の文字</p>
</div>
<p>mainの外の文字</p>
</body>
</html>

CSS部 

@charset "utf-8";
/* CSS Document */

#main{
	margin:10px auto;
	width: 300px;
	height: 200px;
	border: 1px solid #000;
}
p{
	text-align: center;
}

thisというのは#main pを指します。 これで、マウスオーバーしたときに、赤字になるようになりました。 以下の表示から

マウスオーバーすると、以下のようになる。



もう一つ遊んでみる。

HTMLのスクリプト部分 

<script>
$(function(){
	$("p").mouseover(function(){
		$("#main p").css('color','#f00');
	});

});
</script>

今度はpにmouseoverしたら、#main pのほうを赤字にかえる設定にしました。 すると、両方のpに載せても#main pのほうが赤字になります。

まとめ

2つ目はマウスを載せた時などのイベントを記載しました。 二つ目が重要で、以下のものが基本構文になります。

functionは2回出てきますので気を付けてください。

以上

「jQueryを学ぶ2」をウィキ内検索
最終更新：2015年07月21日 15:51