jQuery: Buổi 2
Giải phóng thời gian, khai phóng năng lực
<!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>
Giải phóng thời gian, khai phóng năng lực