[HTML]JQueryイベント

139522 ワード
jquery html テキストリンク
  • Ex_ mouseover
    • <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript"
    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.js">
    </script>
    <script>
      $(function(){
        $("#btn2").mouseover(function(){
          $("#textZone").css("background", "yellow");
        });
        $("#btn2").mouseleave(function(){
          $("#textZone").css("background", "#fff");
        });
        $("#btn2").focus(function(){
          $("#textZone").css("background", "yellow");
        });
        $("#btn2").blur(function(){
          $("#textZone").css("background", "#fff");
        });
      });
    </script>
  </head>
  <body>
    <div id="wrap">
    <h1>이벤트 연습</h1>
    <p id="textZone">웹 브라우저에서 버튼을 클릭한다거나 mouse를 움직이거나 하는 모든 행위를 ‘이벤트’라고 합니다. 그리고 이벤트발생 시 함수의 실행문이 수행되도록 이벤트를 지정하는 것을 이벤트 핸들러라고 합니다.
    </p>
    <h2>mouseover 메서드</h2>
    <p><button id="btn2">mouseover</button> </p>
  </div>
  </body>
</html>
  • Ex_ bind
    • <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript"
    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.js">
    </script>
    <script>
      $(function(){
        $("#btn2").bind("mouseover focus", function(){
          $("#textZone").css("background", "yellow");
        });
        $("#btn2").bind("mouseleave blur", function(){
          $("#textZone").css("background", "#fff");
        });
      });
    </script>
  </head>
  <body>
    <div id="wrap">
    <h1>이벤트 연습</h1>
    <p id="textZone">웹 브라우저에서 버튼을 클릭한다거나 mouse를 움직이거나 하는 모든 행위를 ‘이벤트’라고 합니다. 그리고 이벤트발생 시 함수의 실행문이 수행되도록 이벤트를 지정하는 것을 이벤트 핸들러라고 합니다.
    </p>
    <h2>mouseover 메서드</h2>
    <p><button id="btn2">mouseover</button> </p>
  </div>
  </body>
</html>
  • Ex_ mouseenter
    • <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript"
    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.js">
    </script>
    <script>
      $(function(){
        $(".list1").css("display", "none");
        $("#listWrap").mouseenter(function(){
          $(".list1").css("display", "block");
        });
        $("#listWrap").mouseleave(function(){
          $(".list1").css("display", "none");
        })
      });
    </script>
  </head>
  <body>
    <div id="wrap">
      <h2>mouseleave 메서드</h2>
      <div id="listWrap">
        <h3>관련 사이트</h3>
        <ul class="list1">
          <li><a href="#">list1</a></li>
          <li><a href="#">list2</a></li>
          <li><a href="#">list3</a></li>
          <li><a href="#">list3</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
  • Ex_ toggle
    クリックするたびに順番に内容を変更できます
    • <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript"
    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.js">
    </script>
    <script>
      $(function(){
        $("#btn4").toggle(function(){
          $(this).next().css("background", "red");
        },
        function() {
          $(this).next().css("background", "orange");
        },
        function() {
          $(this).next().css("background", "yellow");
        },
        function() {
          $(this).next().css("background", "#fff");
        });
      });
    </script>
  </head>
  <body>
    <div id="wrap">
      <h2>toggle 메서드</h2>
      <button id="btn4">toggle</button>
      <p>
        누를 때마다 실행 함수를 차례대로 번갈아 가면서 실행합니다. <br />
        위의 toggle 버튼을 계속 클릭해 보세요 !!
      </p>
    </div>
  </body>
</html>
  • Ex_ hover
    mouseenterを繰り返しmouseleaveを実行
    • <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript"
    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.js">
    </script>
    <script>
      $(function(){
        $(".list1").css("display", "none");
        $("#listWrap").hover(function(){
          $(".list1").css("display", "block");
        },
        function(){
          $(".list1").css("display", "none");
        });
      });
    </script>
  </head>
  <body>
    <div id="wrap">
      <h2>hover 메서드</h2>
      <div id="listWrap">
        <h3>관련 사이트</h3>
        <ul class="list1">
          <li><a href="#">list1</a></li>
          <li><a href="#">list2</a></li>
          <li><a href="#">list3</a></li>
          <li><a href="#">list3</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

  • 効果
    hide():選択内容を非表示
    show():選択要素の露出
    切り替え():選択した内容を表示するときに非表示、非表示にするときに露出
    SlideUp()SlideUp():巻き上げ隠し
    SlideDown():隠しを巻き上げる
    slideToggle():sideUp/sideDown交互適用
    fadeOut():徐々に消えていく
    fadeIn():ゆっくり表示
    fadeTo():必要に応じて透明化

  • Ex_ show, hide

    • <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript"
    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.js">
    </script>
    <script>
      $(function(){
        $(".list1").css("display", "none");
        $("#listWrap").mouseover(function(){
          $(".list1").show(1500);
        });
        $("#listWrap").mouseleave(function(){
          $(".list1").hide(1500);
        });
      });
    </script>
  </head>
  <body>
    <div id="wrap">
      <h2>hover 메서드</h2>
      <div id="listWrap">
        <h3>관련 사이트</h3>
        <ul class="list1">
          <li><a href="#">list1</a></li>
          <li><a href="#">list2</a></li>
          <li><a href="#">list3</a></li>
          <li><a href="#">list3</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
  • Ex_ slide
    • <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript"
    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.js">
    </script>
    <script>
      $(function(){
        $(".list1").css("display", "none");
        $("#listWrap").hover(function(){
          $(".list1").slideDown(1500);
        },
        function(){
          $(".list1").slideUp(1500);
        });
      });

    </script>
  </head>
  <body>
    <div id="wrap">
      <h2>hover 메서드</h2>
      <div id="listWrap">
      </style>
        <h3>관련 사이트</h3>
        <ul class="list1">
          <li><a href="#">list1</a></li>
          <li><a href="#">list2</a></li>
          <li><a href="#">list3</a></li>
          <li><a href="#">list3</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
  • Ex_ slideToggle
    • <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript"
    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.js">
    </script>
    <script>
      $(function(){
        $(".list1").css("display", "none");
        $("#listWrap").hover(function(){
          $(".list1").slideToggle(1500);
        });
      });

    </script>
  </head>
  <body>
    <div id="wrap">
      <h2>hover 메서드</h2>
      <div id="listWrap" style="background: red">
      </style>
        <h3>관련 사이트</h3>
        <ul class="list1">
          <li><a href="#">list1</a></li>
          <li><a href="#">list2</a></li>
          <li><a href="#">list3</a></li>
          <li><a href="#">list3</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
  • Ex_ fadeIn, fadeOut
    • <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript"
    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.js">
    </script>
    <script>
      $(function(){
        $(".list1").css("display", "none");
        $("#listWrap").hover(function(){
          $(".list1").fadeIn(1500);
        },
        function(){
          $(".list1").fadeOut(1500);
        });
      });
    </script>
  </head>
  <body>
    <div id="wrap">
      <h2>hover 메서드</h2>
      <div id="listWrap" style="background: red">
      </style>
        <h3>관련 사이트</h3>
        <ul class="list1">
          <li><a href="#">list1</a></li>
          <li><a href="#">list2</a></li>
          <li><a href="#">list3</a></li>
          <li><a href="#">list3</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>
  • Ex_ fadeToggle
    • <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript"
    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.1.js">
    </script>
    <script>
      $(function(){
        $(".list1").css("display", "none");
        $("#listWrap").hover(function(){
          $(".list1").fadeIn(1500);
        },
        function(){
          $(".list1").fadeOut(1500);
        });
        $("#btn").click(function(){
          $(".list1").fadeToggle(1500);
        });
      });
    </script>
  </head>
  <body>
    <div id="wrap">
      <h2>hover 메서드</h2>
      <div id="listWrap" style="background: red">
      </style>
        <h3>관련 사이트</h3>
        <ul class="list1">
          <li><a href="#">list1</a></li>
          <li><a href="#">list2</a></li>
          <li><a href="#">list3</a></li>
          <li><a href="#">list3</a></li>
        </ul>
      </div>
    </div>
    <button id="btn">fadeToggle</button>
  </body>
</html>
  • Ex_ fadeTo
    • <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript"
    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.1.js">
    </script>
    <script>
      $(function(){
        $("#btn").click(function(){
          $(".list1").fadeTo(1500, 0.3);
        });
        $("#btn1").click(function(){
          $(".list1").fadeTo(1500, 1);
        });
      });
    </script>
  </head>
  <body>
    <div id="wrap">
      <h2>hover 메서드</h2>
      <div id="listWrap" style="background: red">
      </style>
        <h3>관련 사이트</h3>
        <ul class="list1">
          <li><a href="#">list1</a></li>
          <li><a href="#">list2</a></li>
          <li><a href="#">list3</a></li>
          <li><a href="#">list3</a></li>
        </ul>
      </div>
    </div>
    <button id="btn">fadeToggle</button>
    <button id="btn1">fadeToggle</button>
  </body>
</html>
  • Ex_ rollup
    • <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #right_banner{width:100px; height:20px;
                    border: solid 1px red;
                    overflow: hidden;}
    </style>
    <script type="text/javascript"
    src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.1.js">
    </script>
    <script>
      $(function(){
        right_interval = setInterval(right_up, 1000);
        $("#right_banner li").hover(function(){
          clearInterval(right_interval);
        },
        function(){
          right_interval = setInterval(right_up, 1000);
        });
      });
      function right_up(){
        $("#right_banner li:last").after($("#right_banner li:first"));
      }
    </script>
  </head>
  <body>
    <div>
      <ul class="right_banner" id="right_banner">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </body>
</html>
    CSSベース
    Buttonにiconと文字を入れる