前回記事jQueryを学ぶ1では基本的な書き方を学んだと思います。今日は指定したセレクタについて、CSS以外の動かす方法について執筆していきたいと思います。7月12日記事
目次
<!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>で終わることを前回学んだと思います。
代表的な関数を使ってみます。正確にはメソッドですが、プログラム初心者は関数だと思っていただければ構いませんし、他のプログラムを学んだ方はメソッドだと思ってください。
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 */
#mainp{ text-align: center; } すると、最初は表示されていますが、ゆっくりと消えていき、全部消えたら、#mainも消えて、mainの外のpが上側にきます。 これから
結局最後は以下のようになる。
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回出てきますので気を付けてください。
以上