メソッドとイベント演習問題

HTMLとCSSの操作

複数プロパティ指定
  • 以下のように表示するようjQueryを記述しなさい
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="third">jQuery</li>
<li>PHP</li>
</ul>
</body>


要素の追加
  • 以下のように表示するようjQueryを記述しなさい
<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
</body>




  • ol要素を、id名「wrapper」でdiv要素で囲みなさい
<body>
<ol id="list">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>jQuery</li>
</ol>
</body>

clickイベント

  • ある要素がクリックされたら、「クリックされました」と警告ボックスに表示させるjQueryを記述しなさい


以下の写真を使いjQueryで記述しなさい



  • テキストリンクをクリックすると画像が換わるようjQueryを記述しなさい
<body>
<p id="photo">
<img src="img/natsu.png" alt="夏の風景">
</p>
<p>
<a id="trigger" href="img/surf.png" title="サーフィン">このテキストリンクをクリックするとサーフィンの写真に置き換わる</a>
</p>
</body>
  • 画像をクリックすると画像が換わるようjQueryを記述しなさい
<body>
<p id="photo">
<a id="trigger" href="img/surf.png" title="サーフィン"><img src="img/natsu.png" alt="夏の風景"></a>
</p>
</body>
<body>
<p id="photo">
<a id="trigger" href="img/surf.png" title="サーフィン"><img src="img/natsu.png" alt="夏の風景"></a>
</p>
</body>

フェードアウト

  • クリックしたら画像が消えるようjQueryを記述しなさい
  • 画像は適宜

アコーディオンメニュー

<body>
<div id="container">
<dl>
<dt>項目 1</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>項目 2</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
<dt>項目 3</dt>
<dd>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</dd>
</dl>
</div>
</body>

解答例

<script>
$(function(){
  $( '#third' ).css( {
    'color': 'white',
    'background': 'yellowgreen',
    'padding': '10px',
    'font-size': '30px'
  })
  .width( 250 );
});
</script>
<script>
$(function(){
  $( '#list' ).append( '<li>jQuery</li>' );
});
</script>
<script>
$(function(){
  $( '#list' ).before( '<h1>Web制作に必須のjQueryを勉強します。</h1>' );
});
</script>
<script>
$(function(){
  $( '#list' ).after( '<p>Web制作に必須のjQueryを勉強します。</p>' );
});
</script>
<script>
$(function(){
  $( '#list' ).wrap( '<div id="wrapper"></div>' );
});
</script>
<script>
$(function(){
  $( '#list li:last-child' ).remove();
});
</script>
<style>
#div1 {
  width: 100px;
  height: 100px;
  background: #FC0;
}
</style>
</head>
<body>
<div id="div1"></div>
<script>
$(function(){
  $( '#div1' ).click(function() {
    alert ( 'クリックされました' );
  });
});
</script>
</body>
<body>
<p id="photo">
<img src="img/summer.png" alt="夏の風景">
</p>
<p>
<a id="trigger" href="img/surf.png" title="サーフィン">テキストリンクをクリックするとサーフィンの写真に置き換える。</a>
</p>
<script>
$(function(){
  $( '#trigger' ).click(function() {
    $( '#photo img' ).attr({
      'src': 'img/surf.png',
      'alt': 'サーフィン'
    });
    return false;
  });
});
</script>
</body>
<body>
<p id="photo">
<a id="trigger" href="img/surf.png" title="サーフィン"><img src="img/summer.png" alt="夏の風景"></a>
</p>
<p>
画像ををクリックするとサーフィンの写真に置き換える。
</p>
<script>
$(function(){
  $( '#trigger' ).click(function() {
    $( '#photo img' ).attr({
    'src': 'img/surf.png',
    'alt': 'サーフィン'
    });
  return false;
  });
});
</script>
</body>
<body>
<p><img src="img/summer.png" alt="夏の風景"></p>
<script>
$(function(){
  $( 'img' ).mouseover(function(){
    $(this).attr( 'src', 'img/surf.png' ).attr( 'alt', 'サーフィン' );
  }).mouseout(function(){
    $(this).attr( 'src', 'img/summer.png' ).attr( 'alt', '夏の風景' );
  });
});
</script>
</body>
<body>
<p><img src="img/halloween.jpg" alt="ハロウィン"></p>
<script>
$(function() {
  $('img').click(function() {$(this).fadeOut('slow');}); 
});
</script>
</body>
<script>
$(function(){
  $('dd:not(:first)').css('display','none');
  $('dl dt').click(function(){
    if($($(this).next()).css('display')=='none'){
      $('dd').slideUp('slow');
      $($(this).next()).slideDown('slow');
    }
  });
});
</script>