「jQueryを学ぶ2」の編集履歴（バックアップ）一覧はこちら
jQueryを学ぶ2 - (2015/07/12 (日) 20:54:55) の１つ前との変更点
追加された行は緑色になります。
削除された行は赤色になります。
前回記事[[jQueryを学ぶ1]]では基本的な書き方を学んだと思います。今日は指定したセレクタについて、CSS以外の動かす方法について執筆していきたいと思います。7月12日記事
~
~
目次
#contents
~
~
----
~
*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{
margin:10px auto;
width: 300px;
height: 200px;
border: 1px solid #000;
}
p{
text-align: center;
}
すると、最初は表示されていますが、ゆっくりと消えていき、全部消えたら、#mainも消えて、mainの外のpが上側にきます。
これから
#image(width=400,001.png)
結局最後は以下のようになる。
#image(width=380,002.png)
~
~
**#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;
}
これで、マウスオーバーしたときに、赤字になるようになりました。
以下の表示から
マウスオーバーすると、以下のようになる。
前回記事[[jQueryを学ぶ1]]では基本的な書き方を学んだと思います。今日は指定したセレクタについて、CSS以外の動かす方法について執筆していきたいと思います。7月12日記事
~
~
目次
#contents
~
~
----
~
*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{
margin:10px auto;
width: 300px;
height: 200px;
border: 1px solid #000;
}
p{
text-align: center;
}
すると、最初は表示されていますが、ゆっくりと消えていき、全部消えたら、#mainも消えて、mainの外のpが上側にきます。
これから
#image(width=400,001.png)
結局最後は以下のようになる。
#image(width=380,002.png)
~
~
**#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;
}
これで、マウスオーバーしたときに、赤字になるようになりました。
以下の表示から
#image(width=400,003.png)
マウスオーバーすると、以下のようになる。
#image(width=400,004.png)
~
~
*まとめ
2つ目はマウスを載せた時などのイベントを記載しました。
二つ目が重要で、以下のものが基本構文になります。
functionは2回出てきますので気を付けてください。
~
~
