jQuery学习笔记（四）

首页 > 代码库 > jQuery学习笔记（四）

2024-09-17 05:03:19 219人阅读

动画效果

显示和隐藏效果

无动画效果

显示：show()
隐藏：hide()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>004_动画 -- 显示与隐藏</title>
 6     <script src="jquery-1.11.3.js"></script>
 7 </head>
 8 <body>
 9     <input type="button" id="start" value="显示">
10     <input type="button" id="stop" value="隐藏">
11     <div style="width: 200px;height: 200px;background-color: #fbb;"></div>
12 
13     <script>
14 
15         $("#stop").click(function(){
16             $("div").hide();
17         });
18 
19         $("#start").click(function(){
20             $("div").show();
21         });
22 
23     </script>
24 </body>
25 </html>

有动画效果

显示：show(speed,callback)
- speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback：动画执行完毕后的回调函数。
隐藏：hide(speed,callback)
- speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback：动画执行完毕后的回调函数。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>004_动画 -- 显示与隐藏</title>
 6     <script src="jquery-1.11.3.js"></script>
 7 </head>
 8 <body>
 9     <input type="button" id="start" value="显示">
10     <input type="button" id="stop" value="隐藏">
11     <div style="width: 200px;height: 200px;background-color: #fbb;"></div>
12 
13     <script>
14 
15         $("#stop").click(function(){
16             $("div").hide(2000, function(){
17                 alert("动画执行完毕");
18             });
19         });
20 
21         $("#start").click(function(){
22             $("div").show(3000);
23         });
24 
25     </script>
26 </body>
27 </html>

滑动式动画效果

通过改变高度来实现显示或者隐藏的效果。

向上滑动：slideUp(speed,callback)
- speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback：动画执行完毕后的回调函数。
向下滑动：slideDown(speed,callback)
- speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback：动画执行完毕后的回调函数。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>005_动画 -- 滑动</title>
 6     <script src="jquery-1.11.3.js"></script>
 7 </head>
 8 <body>
 9     <input type="button" id="start" value="显示">
10     <input type="button" id="stop" value="隐藏">
11     <div style="width: 200px;height: 200px;background-color: #fbb;"></div>
12 
13     <script>
14 
15         $("#stop").click(function(){
16             $("div").slideUp(3000);
17         });
18 
19         $("#start").click(function(){
20             $("div").slideDown(3000);
21         });
22 
23     </script>
24 </body>
25 </html>

淡入淡出动画效果

通过改变不透明度opacity来实现显示或者隐藏。

淡入效果：fadeIn(speed,callback)
- speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback：动画执行完毕后的回调函数。
淡出效果：fadeOut(speed,callback)
- speed：预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
- callback：动画执行完毕后的回调函数。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>006_动画 -- 淡入淡出</title>
 6     <script src="jquery-1.11.3.js"></script>
 7 </head>
 8 <body>
 9     <input type="button" id="start" value="显示">
10     <input type="button" id="stop" value="隐藏">
11     <div style="width: 200px;height: 200px;background-color: #fbb;"></div>
12 
13     <script>
14 
15         $("#start").click(function(){
16             $("div").fadeIn(3000);
17         });
18 
19         $("#stop").click(function(){
20             $("div").fadeOut(3000);
21         });
22 
23     </script>
24 </body>
25 </html>

动画切换效果

toggle(duration,complete)：显示或隐藏匹配元素。
- duration：一个字符串或者数字决定动画将运行多久。
- complete：在动画完成时执行的回调函数。

slideToggle(duration,complete)：用滑动动画显示或隐藏一个匹配元素。
- duration：一个字符串或者数字决定动画将运行多久。
- complete：在动画完成时执行的回调函数。

自定义动画效果

animate(properties,duration[,easing][,complete])
- properties：一个CSS属性和值的对象,动画将根据这组对象移动。
- duration：一个字符串或者数字决定动画将运行多久。
- easing：一个字符串，表示过渡使用哪种缓动函数。
- complete：在动画完成时执行的回调函数。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>007_动画 -- 自定义</title>
 6     <script src="jquery-1.11.3.js"></script>
 7     <style>
 8         div{
 9             width: 300px;
10             height: 300px;
11             border: 1px solid black;
12             background-color: #fbb;
13             position: relative;
14             top: 100px;
15             left: 100px;
16             font-size: 40px;
17         }
18     </style>
19 </head>
20 <body>
21     
22     <div></div>
23 
24     <script>
25         $("div").animate({
26             width: 100,
27             height: 100,
28             top: 400,
29             left: 500,
30             fontSize: 15
31         }, 3000);
32     </script>
33 </body>
34 </html>

aniamte(properties,options)
- properties：一个CSS属性和值的对象,动画将根据这组对象移动。
- options：一组包含动画选项的值的集合。支持的选项：
  - duration：一个字符串或者数字决定动画将运行多久。
  - easing：一个字符串，表示过渡使用哪种缓动函数。
  - queue：一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。
  - complete：在动画完成时执行的回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>007_动画 -- 自定义</title>
    <script src="jquery-1.11.3.js"></script>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-color: #fbb;
            position: relative;
            top: 100px;
            left: 100px;
            font-size: 40px;
        }
    </style>
</head>
<body>
    
    <div></div>

    <script>
                $("div").animate({
            width: 100,
            height: 100,
            top: 400,
            left: 500,
            fontSize: 15
        }, {
            duration: 3000
        });
    </script>
</body>
</html>

注意：animate方法不接受以下属性：

backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
Color
outlineColor

并发与排队效果

并发效果：指的就是多个动画效果同时执行。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>007_动画 -- 自定义</title>
 6     <script src="jquery-1.11.3.js"></script>
 7     <style>
 8         div{
 9             width: 300px;
10             height: 300px;
11             border: 1px solid black;
12             background-color: #fbb;
13             position: relative;
14             top: 100px;
15             left: 100px;
16             font-size: 40px;
17         }
18     </style>
19 </head>
20 <body>
21     
22     <div></div>
23 
24     <script>
25         $("div").animate({
26             width: 100,
27             height: 100,
28             left: 500,
29             top: 500
30         }, 3000);
31     </script>
32 </body>
33 </html>

排队效果：指的就是多个动画按照先后顺序执行。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>007_动画 -- 自定义</title>
 6     <script src="jquery-1.11.3.js"></script>
 7     <style>
 8         div{
 9             width: 300px;
10             height: 300px;
11             border: 1px solid black;
12             background-color: #fbb;
13             position: relative;
14             top: 100px;
15             left: 100px;
16             font-size: 40px;
17         }
18     </style>
19 </head>
20 <body>
21     
22     <div></div>
23 
24     <script>
25        $("div").animate({
26             width: 100,
27             height: 100
28         }, 3000).animate({
29             left: 500
30         }, 3000).animate({ 
31             top: 500
32         }, 3000).hide(3000);
33     </script>
34 </body>
35 </html>

类数组操作

什么是类数组对象？？

就是结构上类似于数组的对象，该对象具备数组的一些特性属性或方法，同时具有自己独特的一些属性或方法

数组与类数组对象的区别

数组的类型是Array
类数组对象的类型是Object

jQuery的类数组特性属性或方法

　　length属性 - 获取当前jQuery对象包含DOM对象的个数

　　get(index)方法 - 根据index的值返回对应的DOM对象

　　eq(index)方法 - 根据index的值返回对应的jQuery对象

　　index(obj)方法 - 根据对象返回该对象对应的索引值

jQuery中的隐式迭代
　　隐式迭代 - 只关注迭代的开始和结束,不关注迭代过程
　　　　方法
　　　　　　$(selector).each(callback) - (jQuery)对象方法
　　　　　　　　callback - 回调函数,function(index,domEle){}
　　　　　　　　index - 遍历过程中的索引值
　　　　　　　　domEle - 遍历得到的每个DOM对象(元素)
　　　　　　$.each(obj,callback) - (jQuery)全局函数
　　　　　　　　obj - 需要遍历的对象或数组
　　　　　　　　callback - 回调函数,function(index,domEle){}
　　　　　　　　index - 遍历过程中的索引值
　　　　　　　　domEle - 遍历得到的每个DOM对象(元素)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>008_隐式迭代 </title>
 6     <script src="jquery-1.11.3.js"></script>    
 7 </head>
 8 <body>
 9     <input type="text" id="user1" value="user1">
10     <input type="text" id="user2" value="user2">
11     <input type="text" id="user3" value="user3">
12     <input type="text" id="user4" value="user4">
13     <input type="text" id="user5" value="user5">
14 
15     <script>    
16         /*$(selector).each(callback)*/
17         /*$("input").each(function(index, domEle){
18             console.log(domEle.value);
19         });*/
20 
21         /*$.each(obj,callback)*/
22         $.each($("input"), function(index, domEle){
23             // console.log(domEle.value);
24             // console.log($(domEle).val());
25             // console.log(this.value);
26             console.log($(this).val());    
27         });
28 
29     </script>
30 
31 </body>
32 </html>

jQuery学习笔记（四）

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > jQuery学习笔记（四）