<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery_01_hw</title> <!-- 如果想使用Jquery,必须引用jquery的一个js文件 js的加载方式,如何引用一个外部的js文件呢? --> <script type="text/javascript" src="jquery-3.4.1.min.js"></script> <script type="text/javascript"> /*使用Jquery来绑定一个事件*/ $(function(){ $("#hide").click(function(){ /*隐藏元素*/ // $("#div").hide(); /* 参数1:是动画的速度, 默认是slow(慢),normal(正常),fast(快) */ // $("#div").hide("slow"); /* 参数1:可以传数字,数字单位是毫秒 */ // $("#div").hide(10000); /* 通过透明度:Optional linear:线 */ // $("#div").hide(10000,"swing"); // $("#div").hide(10000,"linear"); /* 参数三:动画执行完以后,执行此函数 */ $("#div").hide(10000,function(){ console.info("==我执行完了=="); }); }) $("#show").click(function(){ /*显示元素*/ // $("#div").show(); $("#div").show("slow"); }); /* 一个按钮就可以完成 */ $("#showHide").click(function(){ // $("#div").toggle("slow"); /* 增大是显示:slideDown 减少是收藏:slideUp */ // $("#div").slideUp("slow"); // $("#div").slideToggle("slow") /* 淡入,淡出 */ /*$("#div").fadeIn("slow");*/ /*$("#div").fadeOut(5000);*/ $("#div").fadeToggle(5000); }); $("#animate").click(function(){ /* 为div增加动画 参数1:是css样式 参数2:是速度 */ $("#div").animate({ left:"800px", top:"400px" },5000); }); /* type ==== js中的typeof 为要使用type,不使用typeof, 因为我们使用的是Jquery, */ console.info("==type==" + $.type( $("li") )); console.info("==type==" + $.type( 2)) /* 此返回值:true和false */ console.info("==type==" + $.isNumeric(2)); /* 去掉前后的空格 */ var str = " 袁 崇 焕 " ; console.info("==str==" + str + "====="); console.info("==trim==" + $.trim(str) + "====="); }); </script> <style type="text/css"> div{ background-color: red; width: 200px; height: 200px; position: relative; } </style> </head> <body> <button id="hide">隐藏</button> <button id="show">显示</button> <button id="showHide">显示/隐藏</button> <button id="animate">动画</button> <div id="div">这是js</div> 这是后面的内容 </body> </html> |