• 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>
  • 相关阅读:
    gcc编译常用选项
    汇编指令随笔
    VIM简单操作
    Linux编译阻塞型驱动遇到'TASK_NORMAL' undeclared (first use in this function)问题解决办法
    Linux中断流程分析
    Linux驱动开发之LED驱动
    函数(三)
    函数(二)
    文件和函数(一)
    文件处理和字符编码
  • 原文地址:https://www.cnblogs.com/xlb-happymoment/p/6758672.html
Copyright © 2020-2023  润新知