zoukankan      html  css  js  c++  java

  • jQuery学习笔记（四）

    动画效果

    显示和隐藏效果

    无动画效果

    • 显示：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=" 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=" 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=" 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=" 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              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({
             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              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              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>
  • 相关阅读:
    在Eclipse中运行JAVA代码远程操作HBase的示例
    hbase基本概念和hbase shell常用命令用法
    如何使用putty远程连接linux
    如何在Eclipse下安装SVN插件——subclipse
    solr之创建core（搜索核心，包括索引和数据）的方法
    百度地图api基本用法
    四年大学不如选择培训一年？
    树常见的算法操作
    二叉树常见遍历算法
    Java多线程实现生产者消费者延伸问题
  • 原文地址：https://www.cnblogs.com/xlb-happymoment/p/6758672.html
Copyright © 2011-2022 走看看