webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

jQuery クリックすると箱の状態が変わる

箱を3つ作ります(初期状態)

  • 冒頭からつまずく。原因は、#div1{margin-left: none;} という記述。
  • noneは使えません。

f:id:ohta-felica:20160519162559j:plain

 

<body>
<div id="container">
<div id="div1" class="box">div1</div>
<div id="div2" class="box">div2</div>
<div id="div3" class="box">div3</div>
</div>

jQueryを使って、箱を操作する。(最終形)

  • まず、$(function( ){ });と記述して…
  • 括弧の数合わせが面倒なので、$(' ').( );と書いてから代入していくこと。
  • 最初でつまずく時は、<script src="js/jquery-2.2.3.min.js"> のリンク間違え。

<script>
$(function(){
$('#div1').css('background','red');
$('#div2').css('border', '2px solid #44ff55');
$('#div3').css('font-size', '48px');
});
</script>

f:id:ohta-felica:20160519165129j:plain

クリックして、初期状態から最終形になるように記述する

  • $(' ').on(click, function( ){ }); に、代入していく。
  • #div1 をクリックすると、だから、$('#div1').on('click', function(){});

  • div1の背景色を赤にするには、div1 の最終形、つまり$('#div1').css('background','red');をfunction の後の波括弧に入れてあげればいい。
  • $('#div1').on('click', function(){$('#div1').css('background','red');});
  • 以下同様、一度に書き上げようとせずに、まず括弧だけの状態を作る。
  • この時点で、きちんとシンタックスエラーがないことをきちんと確認。

<script>
$(function(){
$('#div1').on('click',function(){$('#div1').css('background','red');}
);
$('#div2').on('click',
function(){$('#div2').css('border', '2px solid #44ff55');}
);
$('#div3').on('click',function(){$('#div3').css('font-size', '48px');}
);
});
</script>