jquery接触初级-----juqery 动画函数

1. window.onload(), 一次只能保存对一个函数的引用；如果多次调用，他会自动用后面的函数覆盖前面的函数

2.$(document).ready(); 会在现有行为上追加新的行为，这些函数行为会按照注册的顺序进行依次执行，避免了window.onload()的覆盖行为；

$(document).ready() 有三种写法：

2.1 $(document).ready(function(){});

2.2 $(function(){});

2.3 $().ready(function(){})

例子：要求：写一个事件：鼠标移入H3 标签范围，和这相关的内容显示，鼠标移出，内容消失

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

     <title>Document</title>

     <style>

         div {

             width: 500px;

             background: #ccc;

         }

         h3 {

             text-align: center;

         }

         ul {

             margin: 0;

             padding: 10px;

             display: none;

         }

     </style>

     <script>

         $(document).ready(function() {

             $("h3").bind("mouseover", function() {

                 $(this).next().show();

             }).bind("mouseout", function() {

                 $(this).next().hide();

             })

         })

     </script>

 </head>

 <body>

     <div>

         <h3>这里是标题</h3>

         <ul>这里是内容，我们今天说的是关于jquery的事情，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件</ul>

     </div>

 </body>

 </html>

运行结果：

可以使用hover()事件来改写：效果还是一样的

 <script>

         $(document).ready(function() {

             $("h3").hover(function() {

                 $(this).next().show();

             }, function() {

                 $(this).next().hide();

             })

         });

 </script>

3.1 事件对象的属性：event.type

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

     <title>Document</title>

     <script>

         $(function() {

             $('.type').click(function(event) {

                 alert(event.type);

             });

         })

     </script>

 </head>

 <body>

     <div class="box">

         <input type="button" value="点击一下" class="type">

     </div>

 </body>

 </html>

运行结果：点击，就会弹出事件的type值

3.2 event.preventDefault() :阻止事件的默认行为，例如a标签的跳转；

3.3 event.stopPropagation() :阻止事件冒泡

3.4 event.target 目标事件的元素

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

     <title>Document</title>

     <script>

         $(function() {

             $("a").click(function(event) {

                 console.log(event.target.href);

                 event.preventDefault();

             });

         })

     </script>

 </head>

 <body>

     <div class="box">

         <a href="https://www.baidu.com/">百度</a>

     </div>

 </body>

 </html>

运行结果：点击后，阻止默认行为，即阻止跳转，并且输出目标元素a的href 属性值

3.5 event.pageX , event.pageY 获取光标相对于浏览器的X坐标和Y坐标：

 <script>

         $(function() {

             $(document).click(function(event) {

                 var Op = $("<p></p>");

                 Op.html("当前鼠标的位置是:" + event.pageX + "," + event.pageY);

                 $(".box").append(Op);

                 event.preventDefault();

             });

         })

 </script>

3.6 event.which; 获取鼠标的左键，中间键，和右键值，分别对应1.2.3

  $(function() {

             $(document).click(function(event) {

                 console.log(event.which)

                 event.preventDefault();

             });

  })

试了一下：左键有用，单击左键，会输出1

4. jquery 中的动画：

4.1 show()方法和hide()方法，实现对元素的显示和隐藏

4.2 fadeIn() 和fadeOut() : 实现元素不透明度的改变，fadeIn()从无到有，fadeOut()从有到无

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

     <title>Document</title>

     <style>

         div.cc {

             background: #ccc;

             display: none;

         }

     </style>

     <script>

         $(function() {

             $("a").on("click", function(e) {

                 e.preventDefault();

                 if ($("div.cc").is(":hidden")) {

                     $(this).parent().next().fadeIn();

                 } else {

                     $(this).parent().next().fadeOut();

                 }

             });

         });

     </script>

 </head>

 <body>

     <div class="box">

         <a href="https://www.baidu.com/">百度</a>

     </div>

     <div class="cc">改变不透明度的区块</div>

 </body>

 </html>

4.3 slideUp(),slideDown() : 改变高度的属性。slideUp(),高度从0到最大；slideDown()，相反，高度从大到0；

4.4 animate();可以改变所有属性，是一个自定义动画；

$(selector).animate(styles,speed,easing,callback)

分别代表样式，速度，动画效果，回调函数

自定义动画效果：改变div的宽，高，然后加上边框

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

     <title>Document</title>

     <style>

         div.cc {

             background: #ccc;

             width: 200px;

             height: 200px;

         }

     </style>

     <script>

         $(function() {

             $("a").on("click", function(e) {

                 e.preventDefault();

                 $("div.cc").animate({

                     "width": "400px"

                 }, 2000).animate({

                     "height": "300px",

                     "color": "red"

                 }, 3000, function() {

                     $("div.cc").css("border", "3px solid blue")

                 });

             });

         });

     </script>

 </head>

 <body>

     <div class="box">

         <a href="https://www.baidu.com/">百度</a>

     </div>

     <div class="cc">改变不透明度的区块</div>

 </body>

 </html>

运行效果：

4.5 stop()方法，可以停止动画队列

语法：stop([clearqueue],[gotoend]);

参数clearqueue和gotoend 都是可选参数，为Boolean 值

clearqueue：是否要清空未执行的动画队列，

gotoend：是否直接将正在执行的动画跳转到末尾状态。

stop()方法在做轮播图的时候，会用到，具体参考jquery 轮播制作页面

动画函数总结如下：

jquery接触初级-----juqery 动画函数的更多相关文章

jquery接触初级-----juqery DOM操作实例，动态图片显示
1. 要求:对一个a标签元素,当鼠标操作,移入时,显示a标签title属性的信息,鼠标移出时,隐藏a标签属性的title属性信息 a 标签本身的title 属性具有自我显示的特性,但是这个特性比较慢, ...
jquery接触初级-----juqery DOM操作之二
DOm 操作之: 1.1 children(),这个函数只是查找元素的子元素,而不考虑其他后代元素 <body> <p title="请选择你最喜欢的水果"&g ...
jquery接触初级-----juqery DOM操作之一
1. DOM 分为三个部分:DOM core ,HTML_DOM,CSS_DOM: 1.1.document.getElementById(),document.getElementsByTagNam ...
jquery接触初级-----juqery选择器实例
jquery 选择器用于触发事件,可以少写很多js代码,一般来说,基本的特效功能都能够完成这里列举一个简单的jquery写的例子: 要求:有两种情况: 1.产品最初状态显示简约形式的品牌,即显示部分 ...
jquery接触初级----- 一种新奇的选择器用法
今天看到一个新奇的jquery 选择器的用法,因为以前没有见过,所以记录下来 1.jquery 选择器: 给body添加一个元素,添加元素的时候,同时把属性和点击事件都一起进行添加 <!DOCT ...
jquery接触初级-----ajax 之：jquery_ajax 方法
1. $.get() 方法: 格式:$.get( url,[,data],[,callback],[,type] ); data: 采用键值对的方式存储于对象中; callback: 载入成功时(当 ...
jquery接触初级-----ajax 之：load()方法
jquery _ajax 请求主要有几种方式:load(),$.get(),$.post(),$.ajax(),$.getScript(),$.getJson() 1.load()方法格式:load ...
jquery接触初级----jquery 选择器
css 选择器主要有:元素选择器,ID选择器,类选择器,群组选择器,后代选择器,普通配符选择器等,通过css选择,我们可以很方便的给元素添加样式,使网页看起来更加好看 jquery 选择器也有相似的功 ...
jquery接触初级----jquery 对象和Dom对象
1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下: <!DOCTYPE html> <html lang=&q ...

随机推荐

点击input触发弹出框的bug
先点击第一个input建立弹出框,再点击第二个input打开弹出框,操作点击,同时触发了两个input点击事件.主要原因是建立弹出框时绑定了input1的click事件,再次触发时,又再亿次绑定了in ...
[UE4]暂停游戏、退出游戏、游戏输入模式
游戏主界面WB_Main蓝图 Set Game Paused:暂停游戏 Show Mouse Cursor:显示鼠标 Set Input Mode:设置游戏输入模式(游戏和UI).仅仅游戏.仅仅UI( ...
centos7开启端口（永久--permanent）
1.运行命令:firewall-cmd --get-active-zones运行完成之后,可以看到zone名称,如下: 2.执行如下命令命令: firewall-cmd --zone=public - ...
win7运行bat文件一闪而过解决必须要将生成器放在C盘等没有中文的目录里
1.在*.bat所在的文件夹按住shift 键然后鼠标右键,选择“在此处打开命令窗口”, 2.输入bat文件名称然后回车这样就不会自动消失(只在win7 x64 上尝试过)
0001 - Spring MVC中的注解
1.概述 Spring MVC框架提供了功能强大的注解,大大简化了代码开发的同时也提升了程序的可扩展性 2.注解 2.1.@RequestMapping Spring MVC通过@RequestMap ...
MySQL 之数据库增量数据恢复案例
MySQL 数据库增量数据恢复案例一.场景概述 MySQL数据库每日零点自动全备某天上午10点,小明莫名其妙地drop了一个数据库我们需要通过全备的数据文件,以及增量的binlog文件进行数据恢 ...
CRM stringmap
CREATE view [dbo].[V_stringmap] as SELECT DISTINCT Entity.Name as tablename,StringMap.AttributeName ...
sqoop导出mysql数据进入hive错误
看mr的运行显示:sqoop job可以获得的select max(xxx)结果,但是当mr开始时却显示大片错误,就是连接超时,和连接重置等问题, 最后去每个节点ping mysql的ip地址,发现 ...
raid1与raid5
raid 1 就是两个磁盘同时读同时写, 当其中一个坏了不影响使用, 直接更换一个,这样磁盘的容量只有一个盘的raid 5 就是 N-1个磁盘的容量,当其中任何一个磁盘坏,不影响使用,更换一个就可以 ...
JS控制函数执行次数（可带参数）
//真正要执行的函数 var sayHi = function () { console.log('Hi'); }; //控制器 var timer = function (fn, num) { fo ...

jquery接触初级-----juqery 动画函数

jquery接触初级-----juqery 动画函数的更多相关文章

随机推荐

热门专题