设置jQuery中的事件和动画代码如下：
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .big { width: 200px; height: 200px; background-color: aqua; } </style> <script type="text/javascript" src="js/jquery-3.3.1.js"> </script> <script type="text/javascript"> //被覆盖,结果只有一句话 // window.onload=function(){ // console.info("window.onload1"); // } // window.onload=function(){ // console.info("window.onload2"); // } // window.onload=function(){ // console.info("window.onload3"); // } //三句都打印 // $(function( { // console.info("jQuery1"); // }) // $(function() { // console.info("jQuery2"); // }) // $(function() { // console.info("jQuery3"); // }) $(document).ready(function(){ // console.info("全拼写法"); //鼠标点击事件 $(".big").on("click",function(){ console.info("点击了"); }) //鼠标点击事件 $(".big").click(function(){ console.info("又点击了"); }) //鼠标进来事件1 //on---绑定事件 // $(".big").on("mouseenter",function(){ // console.info("鼠标进来了1"); // }) //鼠标出去事件1 // $(".big").on("mouseleave",function(){ // console.info("鼠标出去了1"); // }) //鼠标进来事件2 $(".big").mouseenter(function(){ console.info("鼠标进来了2"); }) //鼠标出去事件2 $(".big").mouseleave(function(){ console.info("鼠标出去了2"); }) //hover:鼠标悬浮---显示和隐藏 //效果：鼠标移动到h2标签就显示盒子，离开就隐藏盒子 // $(".big").hide(); $("h2").hover(function(){ $(".big").show(); },function(){ $(".big").hide(); }) //toggle:鼠标点击---显示和隐藏 //点击第一次显示盒子，点击第二次隐藏盒子，再点就显示，再点就隐藏 循环效果。 // $("h2").toggle(function(){ // $(".big").show(); // },function(){ // $(".big").hide(); // }) // $("p").css("background","blue"); //事件传播(事件冒泡) //给p标签添加点击事件现在点击p标签的内容 就可以触发事件，点击页面的其它位置不会触发。 $("p").click(function(){ console.info("p被点击了"); //阻止传播：事件后面加上 return false return false; }) //给div添加点击事件,点击了p标签就会触发到两个事件,p属于div的一部分。 $(".big").click(function(){ console.info("div被点击了"); return false; }) //给body添加点击事件 小-中-大 $("body").click(function(){ console.info("body被点击了"); return false; }) //offsetX:当前元素左上角 //给div添加鼠标移动事件，求出以div左上角为0,0 起始点的 鼠标位置 // $(".big").mousemove(function(event){ // //event:事件 // var x = event.offsetX;//获得鼠标x坐标 // var y = event.offsetY;//获得鼠标y坐标 // $("#xy").text(x+","+y); // }) //pageX：页面左上角的坐标 //给div添加鼠标移动事件，求出以网页左上角为0,0 起始点的 鼠标位置 // $(".big").mousemove(function(event){ // //event:事件 // var x = event.pageX; // var y = event.pageY; // $("#xy").text(x+","+y); // }) //clientX:窗口左上角 //给div添加鼠标移动事件，求出以窗口左上角为0,0 起始点的 鼠标位置 // $(".big").mousemove(function(event){ // //event:事件 // var x = event.clientX;//获得鼠标x坐标 // var y = event.clientY;//获得鼠标y坐标 // $("#xy").text(x+","+y); // }) //移出事件，直接对元素使用unbind 或 off 来移出指定的事件例如在某些情况下，按钮只能点击一次，点击一次后再点击就无效 // var i=0; // $("#myBtn").click(function(){ // i++; // // 点击按钮偶数次可以，奇数次则失效 // if(i%2==0){ // console.info("试试就试试"+i); // }else{ // //上面代码执行后 就移除按钮的点击事件 // // $("#myBtn").unbind("click"); // } // }) //动画 // $("#myBtn").one("click",function(){ // console.info("点了"); // }) //基本动画---显示show(time); $("#show").click(function(){ $(".big").show(1000); }) //基本动画---隐藏hide(time); $("#hide").click(function(){ $(".big").hide(1000); }) //基本动画---切换toggle(time); $("#showAndHide").click(function(){ $(".big").toggle(1000); }) //滑动---slideDown(time)：动画展开(向下滑动)----->显示 $("#slideDown").click(function(){ $(".big").slideDown(1000); }) //滑动---slideUp(time)：动画收缩(向上滑动)---->隐藏 $("#slideUp").click(function(){ $(".big").slideUp(1000); }) //滑动---slideToggle(time)：动画切换 $("#slideToggle").click(function(){ $(".big").slideToggle(1000); }) //淡入淡出：fadeIn(time)：淡入(透明度减少) $("#fadeIn").click(function(){ $(".big").fadeIn(1000); }) //淡入淡出：fadeOut(time)：淡出(透明度增加) $("#fadeOut").click(function(){ $(".big").fadeOut(1000); }) //淡入淡出：fadeToggle(time)：切换 $("#fadeToggle").click(function(){ $(".big").fadeToggle(1000); }) //自定义动画 //变大---移动，元素.animate({属性:属性值},time) $("#bigBtn").click(function(){ $(".big").animate({ width:300, height:300 },1000) }) //变小 $("#smallBtn").click(function(){ $(".big").animate({ width:200, height:200 },1000) }) //移动 $("#runBtn").click(function(){ $(".big").animate({ left:10, top:10 },1000) }) //+= $("#topBtn").click(function(){ $(".big").animate({ left:"-=50", top:"+=50" },1000) }) }) </script> </head> <body> <h2>好消息</h2> <input type="button" name="" id="topBtn" value="+=" /> <br> <input type="button" name="" id="runBtn" value="走你" /> <br> <input type="button" name="" id="bigBtn" value="变大" /> <input type="button" name="" id="smallBtn" value="变小" /> <br> <input type="button" name="" id="myBtn" value="点下试试" /> <input type="button" name="" id="show" value="显示" /> <input type="button" name="" id="hide" value="隐藏" /> <input type="button" name="" id="showAndHide" value="显示/隐藏" /> <br> <input type="button" name="" id="slideDown" value="展开" /> <input type="button" name="" id="slideUp" value="收缩" /> <input type="button" name="" id="slideToggle" value="展开/收缩" /> <br> <input type="button" name="" id="fadeIn" value="淡入" /> <input type="button" name="" id="fadeOut" value="淡出" /> <input type="button" name="" id="fadeToggle" value="淡入/淡出" /> <div class="big" style="position: absolute; left: 100px; top: 100px;"> <br> <p>今天是个好日子</p> </div> <span id="xy"></span> </body> </html>
