zepto中的动画+Ajax+touch模块+zepto插件

zepto中的动画

zepto中不具备动画模块,需要单独引入 fx.js 和 fx_methods.js

https://github.com/madrobby/zepto

 

 

 

toggle 元素显示与隐藏

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>zepto</name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"style>
        
    bodydiv>boxbutton id="btn">点我button>

    script src="js/zepto.min.js"></script="js/fx.js"><!-- 动画模块 -->
    ="js/fx_methods.js">
        
        $("#btn).click(function(){
            $(div).toggle();
            $().toggle(slow);
            $(3000);
        })
    html>

 

show 显示  hide 隐藏

).hide();
            $().hide();

            $().show();
            $().show(>

 

fadeIn 淡入  fadeOut 淡出  fadeToggle 切换淡入与淡出

span>span).fadeIn();
            $().fadeIn(fast).fadeOut();
            $().fadeOut().fadeToggle();
            $().fadeToggle();

            //控制多个元素
            $(div,span>

 

fadeTo 切换透明度

).fadeTo(,.3>

 

animate动画:

对元素的属性进行动画

参数分别是:动画的属性、动画持续时间、动画完成后的回调


        #div{width:50px;heightbackgroundpinkpositionabsolutetop0left}
        #btn absolute}
    div ="div"#div).animate({300},(){
                alert(finished);
            })
        })
    >

 

 

 

多属性动画:

>

 

 

 

多属性不同时进行动画,而是执行完一个属性再执行另一个

将第二个动画写在第一个的回调里

(){
                $(this(){
                    alert();
                })                
            })
        })
    >

 

 

 

zepto中的Ajax:

get  post  ajax

get 和 post 属于 ajax 的一种简写方式

>
        原生ajax请求
         Ajax(){
            var xmlHttpReq=null;

            if(window.ActiveXObject){
                IE5,6
                xmlHttpReqnew ActiveXObject(Microsoft.XMLHTTP);
            }else{
                xmlHttpReq XMLHttpRequest();
            }

            xmlHttpReq.open(GETtest.phptrue);

            xmlHttpReq.onreadystatechange(){
                (xmlHttpReq.readyState==4){请求完毕
                    (xmlHttpReq.status200获取到数据
                        console.log(获取数据:+xmlHttpReq.responseText);
                    }
                }
            }

            xmlHttpReq.send();

        }


        zepto  ajax
        get 参数分别是:1、url 2、传递给后端的参数 3、接收到数据的处理 4、预期接收到的数据的类型
        $.get((res){
            $(document.body).append(res);
        },[dataType]);

        post 参数与get相同(参数2和4不是必须,参数4一般并不需要填写)
        $.post(5json);

        ajax
        $.ajax({
            type:(res){
                console.log(res);
            },error:(){
                console.log(error);
            }
        })

    >

 

zepto中的touch模块:

找到touch.js,下载下来

 

 

 

#cce="js/touch.js"阻止默认行为
        $().on(touchmove(e){ e.preventDefault();})

        各种touch事件
).tap((){
            console.log(tap);点击
        }).singleTap(singleTap单击
        }).longTap(longTap长按
        }).doubleTap(doubleTap双击
        }).swipe(swipe快速划动
        }).swipeLeft(swipeLeft快速右划
        }).swipeRight(swipeRight快速左划
        }).swipeUp(swipeUp快速上划
        }).swipeDown(swipeDown快速下划
        });

    >

 

 

 

zepto插件:

单插件:

100px>我是div="js/zepto.fullpage.js"插件的写法
        ;(($){
            $.fn.myfn(options){

                对象合并,相同属性后面的覆盖前面的
                 options$.extend({
                    设置默认值
                    colororangefontSize14px
                },options);

                .css({:options.color,1)">:options.fontSize});

                return 方便链式调用
            }
        })(Zepto);

        使用插件
).myfn({
            fontSize:20px
        }).html(可以链式调用啦);
    >

 

 

一组插件:

($){
            一组插件
            $.extend($.fn,{
                myfn:(options){
                    $.extend({
                        设置默认值
                        
                    },options);
                    :options.fontSize});
                                    },myfn2:backgroundColorlightgreen:options.backgroundColor});
                    ;
                }

            });
        })(Zepto);

        
        }).myfn2();
    >

 

 

将插件独立出去,使用时再引入

myfn.js

//插件的写法
;(function($){
    一组插件
    $.extend($.fn,{
        myfn:(options){
            var options=$.extend({
                设置默认值
                "color":"orange"
            },options);
            this.css({"color":options.color,"fontSize":options.fontSize});
            return this;方便链式调用
        },myfn2:$.extend({
                "backgroundColor":"lightgreen"this.css({"backgroundColor":options.backgroundColor});
            this;
        }

    });
})(Zepto);

index.html

="js/myfn.js" 引入插件 -->

    
        }).myfn2({
            backgroundColor:lightblue
        });
    >

 

 

 jQuery和zepto的区别:

zepto是jQuery的精简版,主要针对移动端(因此不会去兼容IE)

部分API实现方式不同

 

区别1:添加id时,jQuery不会生效,而zepto会生效

jQuery

class>div="hide">hide="js/jquery.min.js" <script src="js/zepto.min.js"></script> 
        $((){
            区别1:添加id时,jQuery不会生效,而zepto会生效
             $$(<div>new</div>
            });
            $.appendTo($(body));

            区别2:offset()
            //
            区别3:zepto无法获取隐藏的元素的宽高,而jQuery可以
>

 

 

zepto

));

        });
    >

 

 

区别2:

区别2:offset()输出元素的定位
jQuery返回元素的top和left
zepto返回元素的top、left、width、height

jQuery


        divmargin-bottom区别2:offset()输出元素的定位
            jQuery返回元素的top和left
            zepto返回元素的top、left、width、height
            console.log($().offset());

        });
    >

 

 

zepto

 <script src="js/jquery.min.js"></script> ).offset());
            
            >

 

 

区别3:添加id时,jQuery不会生效,而zepto会生效

jQuery


        .hidedisplay none.hide).width());
        });
    >

 

 

zepto

>

 

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码