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

jQueryのイベント

イベントでタイミングを設定しよう

ボタンを押すと画像が替わる処理

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのクリックイベント</title>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
//$('button').click(function(){
  $('button').on('click',function(){
  //クリックイベント以外も後で追加できる。スマホ対応にはonを使ったほうが良い

    $('img').attr('src','img/s11.png').attr('alt','お菓子の家');
  });
});
</script>
</head>
<body>
<button>画像を変更</button>
<p><img src="img/s13.png" alt="ブランデーケーキ"></p>
</body>
</html>

 

f:id:develog:20160921193204p:plain

f:id:develog:20160921193210p:plain

 

a要素をクリックすると画像を変更する(a要素を実行させない)

<script>
$(function(){
  $('a').on('click',function(){
    $('img').attr('src','img/s11.png').attr('alt','お菓子の家');
    return false;//a要素を実行させない
  });
});
</script>
</head>
<body>
<a href="img/s11.png">画像を変更</a>
<p><img src="img/s13.png" alt="ブランデーケーキ"></p>
</body>

f:id:develog:20160921194501p:plain

f:id:develog:20160921194508p:plain

 

ダブルクリックで画像を変更する(a要素を実行させない)

 <title>jQueryのクリックイベント</title>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
  $('a').on('dblclick',function(){
    $('img').attr('src','img/s11.png').attr('alt','お菓子の家');
  }).on('click',function(){
    return false;//a要素を実行させない
  });
});
</script>
</head>
<body>
<a href="img/s11.png">画像を変更</a>
<p><img src="img/s13.png" alt="ブランデーケーキ"></p>
</body>

 

thisを使用してクリックされた要素の情報を得る

<title>jQuery 複数のクリックイベント thisの使用</title>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
  $('a').on('click',function(){
    $('img').attr('src',$(this).attr('href')).attr('alt',$(this).text());
    return false;
  });
});
</script>
</head>
<body>
<ul>
<li><a href="img/01.png">ブランデーケーキ</a></li>
<li><a href="img/02.png">お菓子の家</a></li>
<li><a href="img/03.png">お菓子のソファー</a></li>
</ul>
<p><img src="img/01.png" alt="ブランデーケーキ"></p>
</body>

f:id:develog:20160921202708p:plain

f:id:develog:20160921202716p:plain

f:id:develog:20160921202723p:plain

 

マウスオーバー、マウスアウト

<title>jQuery マウスオーバー、マウスアウト</title>
<script src="../js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
  $('img').mouseover(function(){
    $(this).attr('src','img/02.png').attr('alt','ケーキ');
  }).mouseout(function(){
    $(this).attr('src','img/01.png').attr('alt','お菓子の家');
  });
});
</script>
</head>
<body>
<p><img src="img/01.png" alt="お菓子の家"></p>
</body>

f:id:develog:20160921204129p:plain

f:id:develog:20160921204134p:plain