JQuery高级

一、JQuery 高级

      1. 动画

           1. 三种方式显示和隐藏元素

                 1. 默认显示和隐藏方式：

                         1. show([speed,[easing],[fn]])

                            1. 参数：

                                     1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)

                                     2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
                                             * swing：动画执行时效果是 先慢，中间快，最后又慢
                                             * linear：动画执行时速度是匀速的
                                     3. fn：在动画完成时执行的函数，每个元素执行一次。

                        2. hide([speed,[easing],[fn]])
                        3. toggle([speed],[easing],[fn])

          

           2. 滑动显示和隐藏方式
                  1. slideDown([speed],[easing],[fn])
                  2. slideUp([speed,[easing],[fn]])
                  3. slideToggle([speed],[easing],[fn])

           3. 淡入淡出显示和隐藏方式

                 1. fadeIn([speed],[easing],[fn])
                 2. fadeOut([speed],[easing],[fn])
                 3. fadeToggle([speed,[easing],[fn]])

        <script>
          
          $(function(){
          //1.书写显示广告图片的定时操作
               time = setInterval("showad()",2000);
          });
          
         function showad(){
            //3.获取广告图片，并让其显示,设置显示时间和动画效果
             $("#img1").show(2000);
            //4.清除显示图片定时操作
             clearInterval(time);
            //5.设置隐藏图片的定时操作
              time = setInterval("hidead()",2000);
         }
         
         function hidead(){
           //6.获取广告图片，并让其隐藏
             $("#img1").hide(2000);
            //7.清除隐藏图片的定时操作
             clearIntervalt(time);
         }
        </script>

         <div>
            <img src="../img/飞机05.gif" width="100%" height="100%" id="img1" style="display: none;"/>
        </div>

      2.遍历

         1. js的遍历方式           

$(function(){
            
            var citys=$("#city li");
            //1.
            for(var i=0;i<citys.length;i++){
                alert(i+":"+citys[i].innerHTML);
            }

     });

         2. jq的遍历方式

              jquery对象.each(function(index,element){});

                     * index:就是元素在集合中的索引

                      * element：就是集合中的每一个元素对象

                     * this：集合中的每一个元素对象

 $(function(){
            
            var citys=$("#city li");

           //2.使用jq.each对象
           citys.each(function(index,element){
                 //获取li对象
             // alert(this.innerHTML);
             //alert(index+":"+element.innerHTML);
             alert(index+":"+$(element).html());
           })
     });

           2. $.each(object, [callback])

       //遍历
        $(function(){
//          //3.$.each();
         
         $.each(citys,function(){
             alert($(this).html());
         })
     });

    3.事件

        1. jquery标准的绑定方式

           * jq对象.事件方法(回调函数)；
              * 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
              * 表单对象.submit();//让表单提交
       2. on绑定事件/off解除绑定
            * jq对象.on("事件名称",回调函数)
           * jq对象.off("事件名称")
           * 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
        3. 事件切换：toggle
             * jq对象.toggle(fn1,fn2...)
            * 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....