jQuery: Buổi 2

Khóa học qua video:
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <!-- <script src="jquery-3.5.1.min.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <style>
    .dev1{
      background: green;
      width: 60%;
      height: 300px;
      box-shadow: 0 0 10px green;
      position: relative;
      border-radius: 0px
    }
  </style>
</head>
<body>
<script>
  $(function(){ //tương đương với onload=function(){}
    $(".slideUp").click(function(){
      $(".dev1").slideUp(5000);
    });

    $(".stop").click(function(){
      $(".dev1").stop();
    });

    $(".dblclick").dblclick(function(){
      $(".dev1").slideDown(5000);
    });

    $(".mouseenter").mouseenter(function(){
      $(".dev1").css("background","red");
    });
    $(".mouseenter").mouseleave(function(){
      $(".dev1").css("background","green");
    });

    $(".mouseleave").mouseleave(function(){
      $(".dev1").css("background","green");
    });

    $(".mousedown-up").mousedown(function(){
      $(".dev1").css("fontSize","50px");
    });
    $(".mousedown-up").mouseup(function(){
      $(".dev1").css("fontSize","unset");
    });

    $(".hover").hover(
      function(){
        $(".dev1").css("borderRadius","20px");
      },
      function(){
        $(".dev1").css("borderRadius","unset");
      }
    );

    $(".focus").focus(function(){
      $(".dev1").css("color","white");
    });
    $(".focus").blur(function(){
      $(".dev1").css("color","unset");
    });

    $(".blur").blur(function(){
      $(".dev1").css("color","unset");
    });

    $(".text").click(function(){
      alert($(".dev1").text());
    });

    $(".text").mouseleave(function(){
      $(".dev1").text("Developers");
    });

    $(".html").click(function(){
      alert($(".dev1").html());
    });
    $(".html").mouseleave(function(){
      $(".dev1").html("<strong style='color:red'>Developers</strong>");
    });

    $(".val").click(function(){
      alert($(".dev1 input").val());
    });
    $(".val").mouseleave(function(){
      $(".dev1 input").val("1234");
    });

    $(".attr").click(function(){
      alert($(".dev1 a").attr('href'));
    });
    $(".attr").mouseleave(function(){
      $(".dev1 a").attr('href','https://google.com');
    });
  });
</script>

<section>
  <input type="button" value="slideUp" class="slideUp">
  <input type="button" value="Stop" class="stop">
  <input type="button" value="dblclick" class="dblclick">
  <input type="button" value="mouseenter" class="mouseenter">
  <input type="button" value="mouseleave" class="mouseleave">
  <input type="button" value="mousedown-up" class="mousedown-up">
  <input type="button" value="hover" class="hover">
  <input type="button" value="focus" class="focus">
  <input type="button" value="blur" class="blur">
  <input type="button" value="text" class="text">
  <input type="button" value="html" class="html">
  <input type="button" value="val" class="val">
  <input type="button" value="attr" class="attr">
</section>
<hr>
<section class="dev1">
  <em>Developer</em><br>
  <input type="text" value="ABCD"><br>
  <a href="https://v1study.com">V1Study.com</a>
</section>
</body>
</html>
« Trước: Buổi 1
Khóa học qua video:
Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript
Đăng ký Hội viên
Tất cả các video dành cho hội viên