読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

jQuery基礎演習(1)

基礎演習

以下の指示に従って、プログラムを作成しなさい。

Q01
  • 「追加」ボタンを押したら「List1」「List2」の次に「List3」を追加表示し、「削除」ボタンを押したら「List3」が削除されるよう記述しなさい。
Q02
  • ボタンをクリックしたら、表示してある「幅100px・高さ100px」の正方形が1000px移動して止まるように記述しなさい。(スピードは「600」)
Q03
  • 幅200px、高さ200pxの正方形3種類(面積の色が違う)をボタンを押したときにブラウザーに表示させなさい。非表示から「即座に表示」「スローで表示」「3秒かけて表示」と表示の仕方をわけて記述しなさい。
Q04
  • 【Q03】で記述した正方形を、ボタン「表示・非表示」で、表示・非表示を繰り返し実行されるよう記述しなさい。
Q05
  • 画像(幅600px、高さ400px)を、クリックするたびに「A」→「B」→「C」→「D」→「E」と繰り返し切り替わるような記述をしなさい。(画像は作成すること)
Q06
  • 各サムネイルをクリックしたら、メイン画像が切り替わるよう記述しなさい。(サイズ・色は適宜)

f:id:web-0818:20161206025455p:plain

Q07
  • 以下のアコーディオンメニューを記述しなさい。(マウスオーバー時の設定も含む)

f:id:web-0818:20161206010125p:plain




A01
$(function(){

  $('li').each(function(index) {
      $(this).append(index+1);
  });

  $('#insert').on('click',function(){
    $('ul').append($('<li>').text('List')); 
    $('li:last').append($('li:last').index()+1);
    });

  $('#delete').on('click',function(){
    $('li:last').remove();
    });
});
A02
$(function(){
  $('#load').on('click',function(){
    $('.box').stop().animate({'marginLeft':'1000px'},600);
    });
});
A03
$(function(){
  $('.box').hide();
  $('.box1').show();
  $('.box2').show('slow');
  $('.box3').show(3000);
});
A04
$(function(){
  $('#tog').on('click',function(){
    if(!$('#wrap .box').is(':animated')){
    $('.box1').toggle();
    $('.box2').toggle('slow');
    $('.box3').toggle(3000);
    }
  });
});
A05
$(function(){
  $('#change').toggle(function(){
    $(this).attr('src','img/imgB.jpg');
  },function(){
    $(this).attr('src','img/imgC.jpg');
  },function(){
    $(this).attr('src','img/imgD.jpg');
  },function(){
    $(this).attr('src','img/imgE.jpg');
  },function(){
    $(this).attr('src','img/imgA.jpg');
  });
});
A07
$(function(){
  $('.menu:first').addClass('open');
  $('.sub:not(:first)').hide();
  $('.menu').on('click',function(){
    console.log(this);
    if( $(this).next().css('display') == 'none' ){
    $('.sub').slideUp();
    $('.menu').removeClass('open');
    $(this).next().slideDown();
    $(this).addClass('open');
    }    
   });
});