《目录》

jQuery的几种事件语法及运用；
jQuery的一些动画效果；
日常案例；

一、jQuery事件

好啦，今天让我们一起来看看jQuery的事件是什么样的，和JavaScript又有什么区别？

1.1 js和jQuery的自动调用有何区别：

JavaScript：一个页面只可以写一个，需要互相去调用；
           window.οnlοad=function(){
               console.info("[js方式1]");
           }

jQuery：可以写多个，都会执行。
           $(function(){
               console.info("[jQuery方式1]");
           })

1.2 绑定事件的两种方式：[例如：点击、悬停事件等...]

语法：元素.on/bind()；

    $("#aa").on("click",function(){//onalert("点我干啥!");})$("#aa").bind("mouseover",function(){//bindalert("简简单单!")})

语法2：元素.事件名；

$("#aa").click(function(){alert("点我干啥!");
})

1.3 合成事件；

---hover()悬停控制元素[div]的显示和隐藏；

使用: $().hover(function(){},function(){});

$("#aa").hide();//先默认隐藏
$("a").hover(function(){$("#aa").show();//显示
},function(){$("#aa").hide();//隐藏
})

---toggle()点击控制元素[div]的显示和隐藏[注意版本问题!!!]

$("#aa").hide();//隐藏
$("a").toggle(function(){//点击一下$("#aa").show();//显示
},function(){//再点一下$("#aa").hide();//隐藏
})

1.4 事件的传播小p->中div->大bdy；

[传播事件是可以阻止的]：return false；

//分别添加点击事件
$("p").click(function(){console.info("颜忠祺p被打了!")
})
$("div").click(function(){console.info("颜忠祺爹地div被打了!")return false;//阻挡
})
$("body").click(function(){console.info("颜忠祺爷爷body被打了!")
})

1.5 事件event的坐标[了解即可 pageX,pageY]；

$("#aa").click(function(e){
console.info(e.pageX,e.pageY);
})

1.6 事件的移除；

设置案例一：按钮只能点击一次[2]；

语法：off()：移除事件；

//方式一：
$("#btn").click(function(){//做一系列事情console.info(44944);//将点击事件进行移除$("#btn").off("click");//将按钮禁用$("#btn").attr("disabled",true);
})//方式二
$("#btn").one("click",function(){console.info(44944);//将按钮禁用$("#btn").attr("disabled",true);
})

设置案例二：按钮点击偶数次可行，奇数次不行。
               var i = 1;
               $("#btn").click(function(){
                   if(i%2==0){
                       console.info(44944);
                   }
                   i++;
               })

二、jQuery动画

好啦，在见到了一些jQuery事件后，现在再让我们来看看jQuery里面的一些有趣的动画吧~

2.1 先让我们看看一些基本的动画吧：【回调函数】

首先我们设置一些标签，在后面的案例通用；

 <body><!-- 按钮 --><button id="zhu" type="button">变猪猪</button><!-- 按钮 --><button id="xx" type="button">显示</button><button id="yy" type="button">隐藏</button><button id="zz" type="button">显示/隐藏</button><!-- 按钮 --><button id="btn" type="button">点我试试</button><!-- a标签 --><a style="text-decoration: none;" href="#">显示</a><!-- div --><div id="aa"><br><br><br><p style="text-align: center;background-color: bisque;">这是一巴掌</p></div></body>

基本动画：

语法：show(毫秒，function)：显示

hide()：隐藏

toggle()：切换

                $("#aa").hide();//默认隐藏$("#xx").click(function(){$("#aa").show(1000,function(){//回调函数alert("欢迎光临~");});//显示})$("#yy").click(function(){$("#aa").hide(2000);//隐藏})$("#zz").click(function(){$("#aa").toggle(1000);//切换})

2.2 滑动动画

语法： slideDown(毫秒)：显示

slideUp(毫秒)：隐藏

slideToggle(毫秒)：切换

                $("#aa").hide();//默认隐藏 $("#xx").click(function(){$("#aa").slideDown(1000);//1s 显示})$("#yy").click(function(){$("#aa").slideUp()(2000);//2s 隐藏})$("#zz").click(function(){$("#aa").slideToggle(1000);//1s 切换})

2.3 淡入淡出(透明度)

语法： fadeIn(毫秒)：显示

fadeOut(毫秒)：隐藏`

fadeToggle(毫秒)：切换

                $("#aa").hide();//默认隐藏$("#xx").click(function(){$("#aa").fadeIn(1000);//显示})$("#yy").click(function(){$("#aa").fadeOut(2000);//隐藏})$("#zz").click(function(){//切换$("#aa").fadeToggle(1000);})

2.4 自定义动画

语法： animate({width:100,height:300},毫秒)：缩放

animate({left:100,top:109},毫秒)：移动

fadeToggle(毫秒)：旋转

                //头部样式表<style type="text/css">.xyz{transform: rotate(720deg);//旋转度数transition: all 2s;//速度/秒}</style>//---缩放$("#zhu").click(function(){$("#aa").animate({width:100,height:300},1000);})//---移动[2]$("#zhu").click(function(){$("#aa").animate({left:100,top:109},1000);})//---在自身基础上移动$("#zhu").click(function(){$("#aa").animate({left:"+=5",top:"+=8"},100);})/* 转动动画 */$("#zhu").click(function(){//直接调用旋转动画样式$("#aa").addClass("xyz");})

好啦，看了这么动画语法，有没有兴趣来利用它们来完成两个有趣的案例？

好滴我知道你已经迫不及待啦~

来了来了，它来了！

案例一：
/* 利用动画模拟灰太狼退场 */

思路：1、设置一个灰太狼图片，添加点击事件；

2、写好旋转的样式，用灰太狼调用；

3、使用animate()改变top、left、width、height值实现灰太狼经典飞天效果[并放入循环]；

4、使用fadeOut()逐渐让灰太狼飞上太空。

代码如下：

    <head><meta charset="utf-8"><title>动画效果</title><!-- 头部样式表 --><style type="text/css">.ii{width: 500px;height: 300px;}.hh{width: 150px;height: 169px;position: absolute;top: 520px;}.ft{transform: rotate(1100deg);transition: all 2s;}</style><!-- 引入外部js --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><!-- 另起一个js --><script type="text/javascript">$(function(){//自动调用$("#htl").click(function(){//循环$("#htl").addClass("ft");for(var i=0;i<100;i++){$("#htl").animate({left:"+=1000",top:"-=1000",width:"-=235",height:"-=235"},100);//淡出$("#htl").fadeOut(666);}})})</script></head><body><img id="htl" class="hh" src="img/灰太狼2.jpg" ><div style="text-align: right;"><img class="ii" src="img/1.jpg" ><img class="ii" src="img/1.jpg" ></div></body>

咱们来看看灰太狼的经典飞天~

案例二：
/* 利用动画模拟心脏跳动的感觉 */

思路：1、设置一个心脏图片，设置ID；

2、设置一个div，设置点击事件；

3、使用animate()两次改变width、height值实现心脏跳动效果[并放入循环]；

    <head><meta charset="utf-8"><title>动画效果2</title><!-- 头部样式表 --><style type="text/css">.xx{width: 300px;height: 300px;}</style><!-- 引入外部js --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script><!-- 另起一个js --><script type="text/javascript">$(function(){//自动调用$("#qd").click(function(){for(var i=0;i<100;i++){$(".xx").animate({width:300,height:300},789)$(".xx").animate({width:356,height:356},789)}})})</script></head><body><div style="text-align: center;"><div style="background-color: coral;color: white;" id="qd">心脏复苏</div><img class="xx" src="img/x2.jpg" ><br><br><br></div></body>

来看看效果吧：

三、附上思维导图：

好啦，以上就是Leaf今天带来的学习笔记分享~

喜欢的可以持续关注噢！后面还有jQuery的一些知识分享，喜欢的不要错过哈！

持续撸代码中...

jQuery事件处理动画效果相关推荐

jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
第一百七十二节，jQuery，动画效果
jQuery,动画效果学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性一．显示.隐藏 jQuery 中显示方法为:. ...
JQuery渐变色动画效果
JQuery渐变色动画效果 jquery.gradientify.min.js插件渐变色插件链接在页面中引入js库与插件 <script src="js\jquery-3.0.0. ...
java easing_[Java教程]jQuery Easing 动画效果扩展
[Java教程]jQuery Easing 动画效果扩展 0 2015-11-20 11:00:03 官网:http://gsgd.co.uk/sandbox/jquery/easing/ jQuer ...
jQuery Easing 动画效果扩展
官网: http://gsgd.co.uk/sandbox/jquery/easing/ jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果, 一款jQuery动画效果扩展增强插件j ...
jQuery animate动画效果
jQuery animate动画效果 1.animate动画效果 2.animate回调函数 3.参数为数学表达式形式 4.滑动选项卡 1.animate动画效果 <!DOCTYPE html& ...
jQuery基本动画效果
jQuery基本动画效果 1.show() 用于显示页面元素与之相对应的hide() 测试案例: <p title="标题">测试</p> <ul s ...
前端 ----jQuery的动画效果
03-jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 显示动画方式一: $("div"). ...
jquery中动画效果的函数
在jquery中有很多的动画效果,我给大家分享了一下jquery中的动画函数 jQuery的效果函数列表: animate():对被选元素应用"自定义"的动画. clearQueu ...

jQuery事件处理动画效果

《目录》

一、jQuery事件

二、jQuery动画

三、附上思维导图：

好啦，以上就是Leaf今天带来的学习笔记分享~

jQuery事件处理动画效果相关推荐

最新文章

热门文章

jQuery事件处理动画效果

《目录》

一、jQuery事件

二、jQuery动画

三、附上思维导图：

好啦，以上就是Leaf今天 带来的学习笔记分享~

jQuery事件处理动画效果相关推荐

最新文章

热门文章

好啦，以上就是Leaf今天带来的学习笔记分享~