Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[jQuery]⑤イベント

  • イベントの基本
  • ready();
  • click();
  • マウスのボタン操作を感知
  • mousedown();
  • mouseup();
  • moueover();
  • mouseout();
  • マウスの動きを感知
  • mousemove();
  • イベントに関連する処理
  • one();
  • on();
  • off();

イベントの基本

$( セレクター ).イベント(function(){
     HTMLが読み込まれたとき実行する処理;
});
ready()
  • HTMLが読み込まれたタイミングで実行する。
  • 毎回記述する、「ページを読み込んだあとにjQuelyを実行」のスクリプト
$(document).ready(function(){
     HTMLが読み込まれたとき実行する処理;
});
click()
$(document).ready( function(){
  $("button").click(function(){
    alert("ボタンが押されました");
  });
});
</script>
</head>
<body>
<button>ボタン</button>
</body>
ボタンをクリックして画像を変更する。
$( function(){
  $("button").click( function(){
    $("img").attr("src","img/02.png").attr("alt","img02");
  });
});
</script>
</head>
<body>
<button onclick="btn()">ボタン</button>
<p><img src="img/01.png" alt="img01"></p>
</body>
a要素にclickイベントを設定する▶return false;
  • そのままだとリンク先に移動してしまうため、返り値にreturn falseを記述する
$(function(){
  $("a").click( function(){
    $("img").attr("src","img/02.png").attr("alt","img02");
     return false;
  });
});
</script>
</head>
<body>
<a href="img/02.png">
<img src="img/01.png" alt="img01">
</a>
</body>
例題:サムネイルをクリックするギャラリー
  • リンクのhref属性をattrで取得して画像を変更

f:id:akatonbo_web:20150516224425p:plain

$(function(){
  $("a").click(function(){
    $("img#mainImage").attr("src",$(this).attr('href'));
    return false;
  });
});
</script>
</head>
<body>
<div id="container">
<h1>ギャラリー</h1>
<ul>
<li><a href="img/01.jpg"><img src="img/01s.jpg" alt=""></a></li>
<li><a href="img/02.jpg"><img src="img/02s.jpg" alt=""></a></li>
<li><a href="img/03.jpg"><img src="img/03s.jpg" alt=""></a></li>
<li><a href="img/04.jpg"><img src="img/04s.jpg" alt=""></a></li>
<li><a href="img/05.jpg"><img src="img/05s.jpg" alt=""></a></li>
</ul>
<p>
<img id="mainImage" src="img/01.jpg" alt="">
</p>
</div>
</body>

マウスのボタン操作を感知するイベント

mousedown()
mouseup()
  • 指定した要素上にマウスカーソルがある状態で、マウスボタンが離されたら実行。

マウスアクションを感知するイベント

moueover()
  • 特定の要素上にマウスが重なった時処理を実行。
mouseout()

マウスの動きを感知するイベント

mousemove()
  • 特定の要素上でマウスカーソルが動いた時に処理
  • 座標などの情報を取得する命令とともに、実行するケースが多い
  • function(e)にするとe.clientXでX座標を取得 e.clientYでY座標を取得
  • 座標はブラウザの左上からマウスカーソルまでの距離をピクセルで記す
例題:画像上のマウスカーソルの座標を書き出す


f:id:akatonbo_web:20150516230911p:plain

$(function(){
  $("img").mousemove(function(e){
    $("p#location").text("X座標:"+e.clientX+"  Y座標:"+e.clientY);
  });
});
</script>
</head>
<body>
<div id="container">
  <h1>座標を書き出し</h1>
  <img src="img/01.jpg" alt="">
  <p id="location">画像にカーソルを乗せると座標を表示します</p>
</div>
</body>
例題2:相対的な座標を取得
offsetX
    $("p#location").text("X座標:"+e.offsetX+"  Y座標:"+e.offsetY);
FireFoxの場合
<script>
$(function(){
  $("img").mousemove(function(e){
     var off = $(this).offset();
    $("p#location").text("X座標:"+(e.clientX-off.left)+"  Y座標:"+(e.clientY-off.top));
  });
});
</script>
</head>
<body>
<div id="container">
  <h1>座標を書き出し</h1>
  <img src="img/01.jpg" alt="">
  <p id="location">画像にカーソルを乗せると相対座標を表示します</p>
</div>
</body>
</html>

イベントに関連する処理

one()
  • 指定したイベント、発生時に一度だけ処理を実行
クリックしたとき一度だけ実行する
$(function(){
  $("img").one("click",function(){
    alert("クリックされました");
  });
});
</script>
</head>
<body>
<div id="container">
  <img src="img/01.jpg" alt="">
</div>
</body>
on()
  • 対象要素を絞ってイベントを登録する
  • $(セレクタ)on(“イベント発生条件”,function(){実行処理…
  • 「追加される要素」にイベント処理を設定できる
$(function(){
  $("ul").on("click","a",function(){
    $("img").attr("src", $(this).attr("href")).attr("alt",$(this).text());
    return false;
  });
  $("button").click(function(){
    $("ul").append("<li><a href='img/04.jpg'>img04</a></li>");
  });
});
</script>
</head>
<body>
<button>li要素を追加</button>
<ul>
  <li><a href="img/01.jpg">img01</a></li>
  <li><a href="img/02.jpg">img02</a></li>
  <li><a href="img/03.jpg">img03</a></li>
</ul>
<p><img src="img/01.jpg" alt=""></p>
</body>
off()
  • 設定されているイベント処理を取り消す
  • $(セレクター).off(“イベント発生条件”);
  • button要素にoff()を設定
  • off()でa要素のイベント(mouseover)を取り消す
$(function(){
  $("a").mouseover(function(){
    $("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
    return false;
  })
  $("button").click(function(){
    $("a").off("mouseover");
  });
});
</script>
</head>
<body>
<button>取り消し</button>
<ul>
  <li><a href="img/01.jpg">img01</a></li>
  <li><a href="img/02.jpg">img02</a></li>
  <li><a href="img/03.jpg">img03</a></li>
</ul>
<p><img src="img/01.jpg" alt="img01"></p>
</body>