jquery イベントメソッド:マウス編

f:id:shuzou555:20190923152207p:plain

今回のテーマ:jQueryイベントメソッドmouse〜を使ってみよう

  • マウスをクリックした時(click)
  • マウスが要素にかかった時(mouseover)
  • マウスがそこから離れた時(mouseout)
  • そしてマウスが動いた時(mousemove)
  • マウスボタンがはなされた時(mouseup)
  • マウスボタンが押下された時(mousedown)
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryの練習</title>
</head>
<body>
    <p>jQueryの練習</p>
    <div id="box" style="width:100px;height:100px;background:purple;"></div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(function() {
            // click
            // mouseover, mouseout, mousemove
            $('#box').fadeOut(5000, function() {
                alert("hello");
            });
            $('#box')
                .mouseover(function() {
                    $(this).css('background', 'blue');
                })            
                .mouseout(function() {
                    $(this).css('background', 'yellow');
                })
                .mousemove(function(e) {
                    $(this).text(e.pageX);
                }); 
                /* .mouseup(function(){
                    $(this).css('background-color', 'Red');
                })*/
                //マウスボタンがはなされた時
                /* .mousedown(function(){
                    $(this).css('background-color', 'Blue');
               }) */
                //マウスボタンが押下された時
        });
    </script>
</body>
</html>

公式ドキュメント

api.jquery.com