jQuery学习笔记（四）

动画效果

显示和隐藏效果

无动画效果

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>004_动画 -- 显示与隐藏</title>

     <script src="jquery-1.11.3.js"></script>

 </head>

 <body>

     <input type="button" id="start" value="显示">

     <input type="button" id="stop" value="隐藏">

     <div style="width: 200px;height: 200px;background-color: #fbb;"></div>

     <script>

         $("#stop").click(function(){

             $("div").hide();

         });

         $("#start").click(function(){

             $("div").show();

         });

     </script>

 </body>

 </html>

有动画效果

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>004_动画 -- 显示与隐藏</title>

     <script src="jquery-1.11.3.js"></script>

 </head>

 <body>

     <input type="button" id="start" value="显示">

     <input type="button" id="stop" value="隐藏">

     <div style="width: 200px;height: 200px;background-color: #fbb;"></div>

     <script>

         $("#stop").click(function(){

             $("div").hide(2000, function(){

                 alert("动画执行完毕");

             });

         });

         $("#start").click(function(){

             $("div").show(3000);

         });

     </script>

 </body>

 </html>

滑动式动画效果

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

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>005_动画 -- 滑动</title>

     <script src="jquery-1.11.3.js"></script>

 </head>

 <body>

     <input type="button" id="start" value="显示">

     <input type="button" id="stop" value="隐藏">

     <div style="width: 200px;height: 200px;background-color: #fbb;"></div>

     <script>

         $("#stop").click(function(){

             $("div").slideUp(3000);

         });

         $("#start").click(function(){

             $("div").slideDown(3000);

         });

     </script>

 </body>

 </html>

淡入淡出动画效果

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

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>006_动画 -- 淡入淡出</title>

     <script src="jquery-1.11.3.js"></script>

 </head>

 <body>

     <input type="button" id="start" value="显示">

     <input type="button" id="stop" value="隐藏">

     <div style="width: 200px;height: 200px;background-color: #fbb;"></div>

     <script>

         $("#start").click(function(){

             $("div").fadeIn(3000);

         });

         $("#stop").click(function(){

             $("div").fadeOut(3000);

         });

     </script>

 </body>

 </html>

动画切换效果

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

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

自定义动画效果

animate(properties,duration[,easing][,complete])
- properties：一个CSS属性和值的对象,动画将根据这组对象移动。
- duration：一个字符串或者数字决定动画将运行多久。
- easing：一个字符串，表示过渡使用哪种缓动函数。
- 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

         }, 3000);

     </script>

 </body>

 </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

并发与排队效果

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

 <!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,

             left: 500,

             top: 500

         }, 3000);

     </script>

 </body>

 </html>

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

 <!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

         }, 3000).animate({

             left: 500

         }, 3000).animate({

             top: 500

         }, 3000).hide(3000);

     </script>

 </body>

 </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对象(元素)

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>008_隐式迭代 </title>

     <script src="jquery-1.11.3.js"></script>

 </head>

 <body>

     <input type="text" id="user1" value="user1">

     <input type="text" id="user2" value="user2">

     <input type="text" id="user3" value="user3">

     <input type="text" id="user4" value="user4">

     <input type="text" id="user5" value="user5">

     <script>

         /*$(selector).each(callback)*/

         /*$("input").each(function(index, domEle){

             console.log(domEle.value);

         });*/

         /*$.each(obj,callback)*/

         $.each($("input"), function(index, domEle){

             // console.log(domEle.value);

             // console.log($(domEle).val());

             // console.log(this.value);

             console.log($(this).val());

         });

     </script>

 </body>

 </html>