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 标签范围，和这相关的内容显示，鼠标移出，内容消失

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 8     <title>Document</title>
 9     <style>
10         div {
11             width: 500px;
12             background: #ccc;
13         }
14         h3 {
15             text-align: center;
16         }
17         ul {
18             margin: 0;
19             padding: 10px;
20             display: none;
21         }
22     </style>
23     <script>
24         $(document).ready(function() {
25             $("h3").bind("mouseover", function() {
26                 $(this).next().show();
27             }).bind("mouseout", function() {
28                 $(this).next().hide();
29             })
30         })
31     </script>
32 </head>
33 <body>
34     <div>
35         <h3>这里是标题</h3>
36         <ul>这里是内容，我们今天说的是关于jquery的事情，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件</ul>
37     </div>
38 </body>
39 </html>

运行结果：

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

1 <script>
2         $(document).ready(function() {
3             $("h3").hover(function() {
4                 $(this).next().show();
5             }, function() {
6                 $(this).next().hide();
7             })
8         });
9 </script>

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 8     <title>Document</title>
 9     <script>
10         $(function() {
11             $('.type').click(function(event) {
12                 alert(event.type);
13             });
14         })
15     </script>
16 </head>
17 <body>
18     <div class="box">
19         <input type="button" value="点击一下" class="type">
20     </div>
21 </body>
22 </html>

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

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

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

3.4 event.target 目标事件的元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 8     <title>Document</title>
 9     <script>
10         $(function() {
11             $("a").click(function(event) {
12                 console.log(event.target.href);
13                 event.preventDefault();
14             });
15         })
16     </script>
17 </head>
18 <body>
19     <div class="box">
20         <a href="https://www.baidu.com/">百度</a>
21     </div>
22 </body>
23 </html>

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

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

 1 <script>
 2         $(function() {
 3             $(document).click(function(event) {
 4                 var Op = $("<p></p>");
 5                 Op.html("当前鼠标的位置是:" + event.pageX + "," + event.pageY);
 6                 $(".box").append(Op);
 7                 event.preventDefault();
 8             });
 9         })
10 </script>

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

1  $(function() {
2             $(document).click(function(event) {
3                 console.log(event.which)
4                 event.preventDefault();
5             });
6  })

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

4. jquery 中的动画：

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

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 8     <title>Document</title>
 9     <style>
10         div.cc {
11             background: #ccc;
12             display: none;
13         }
14     </style>
15     <script>
16         $(function() {
17             $("a").on("click", function(e) {
18                 e.preventDefault();
19                 if ($("div.cc").is(":hidden")) {
20                     $(this).parent().next().fadeIn();
21                 } else {
22                     $(this).parent().next().fadeOut();
23                 }
24             });
25         });
26     </script>
27 </head>
28 <body>
29     <div class="box">
30         <a href="https://www.baidu.com/">百度</a>
31     </div>
32     <div class="cc">改变不透明度的区块</div>
33 </body>
34 </html>

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

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

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

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

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 8     <title>Document</title>
 9     <style>
10         div.cc {
11             background: #ccc;
12             width: 200px;
13             height: 200px;
14         }
15     </style>
16     <script>
17         $(function() {
18             $("a").on("click", function(e) {
19                 e.preventDefault();
20                 $("div.cc").animate({
21                     "width": "400px"
22                 }, 2000).animate({
23                     "height": "300px",
24                     "color": "red"
25                 }, 3000, function() {
26                     $("div.cc").css("border", "3px solid blue")
27                 });
28             });
29         });
30     </script>
31 </head>
32 <body>
33     <div class="box">
34         <a href="https://www.baidu.com/">百度</a>
35     </div>
36     <div class="cc">改变不透明度的区块</div>
37 </body>
38 </html>

运行效果：

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

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

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

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

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

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

动画函数总结如下：

posted on 2018-01-07 20:44 huanying2015 阅读(186) 评论(0) 编辑收藏举报