zepto API学习

看到别人说zepto和jQuery很像，那么zepto究竟有什么优势呢？

比较：

1、大小方面 , 压缩后的 zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小只有5~10K, 可以说非常的小, 但是功能很齐全, 多出来了一些触摸屏的事件 , 它唯一不支持的就是万恶的IE, 不过用它来开发iPhone和Android网页绝对是首选了.

2、jquery主要是用在电脑的网页中了，jquery是目前最流行的javascript框架，以其兼容全部主流浏览器，插件丰富，代码简洁，最关键的是更新快，最好的dom选择器而被广泛被使用。

3、手机wap方面的话，jquery也有 jquery-mobile.js，也很好用

zepto API

1、当页面加载完成后调用：

<script>
    Zepto(function($){
        alert("Ready to Zepto!");
    });
</script>

2、获取所有标签：

 $("p").css("background-color","red");

3、动态创建标签：

 //创建标签
 var html = '<p>hello</p>';
 $(".content").append(html);
 $("<p>Hello</p>").appendTo(".content");
 $("<p />", { text:"Hello", id:"greeting", css:{color:'darkblue'} }).appendTo(".content");

打印结果：

hello

Hello

Hello

4、生成驼峰式命名

    Zepto(function($){
       //生成驼峰式命名
        $(".name").find("p").each(function(){
            $(this).text($.camelCase($(this).text()));
        });
    });

打印结果：

helloWorld

helloworld

helloWorld

5、遍历所有元素

//遍历元素
    $.each(['a','b','c'],function(index,value){
        console.log('item %d is: %s', index, value);
        var html = 'item '+index+ ' is:'+ value+'<br>';
        $(".item").append(html);
    });
    var hash = { name: 'zepto.js', size: 'micro' };
    $.each(hash,function(key,value){
        var html = 'key: '+key+ ' value:'+ value+'<br>';
        $(".item").append(html);
    });

打印结果：

item 0 is:a
item 1 is:b
item 2 is:c
key: name value:zepto.js
key: size value:micro

6、extend

var target = { one: 'patridge' },
    source = {two: 'turtle doves' }

var target2 = { one: 'patridge' },
    source2 = {one:'one',two: 'turtle doves' }
console.log($.extend(target, source));
console.log($.extend(target2, source2));

打印结果：

Object {one: "patridge", two: "turtle doves"}
Object {one: "one", two: "turtle doves"}

7、grep 只返回回调函数返回的内容

Zepto(function($){
        var newItem = $.grep(['a','b','c'],function(item){
            if(item == 'a') return item;
        });
        console.log(newItem);
    })

打印解雇：

［a]

8、inArray 判断数组中是否存在某元素

• ‘a’ 查找的元素
• [‘a’,’b’,’c’]查找的数组
• 开始查找的位置
• 返回值为－1表示没有查找到

console.log($.inArray('a',['a','b','c'],0));

打印结果：

0

9、$.isArray(object) 判断是不是数组

10、$.isFunction 判断是不是function

11、$.isNumeric(value) 判断是不是number

12、$.isPlainObject(object) 判断对象是不是空白的

13、$.isWindow(object) 判断是不是window

14、.map和.map和.grep的区别

var arr = new Array(0,2,3);
var newArr = $.map(arr,function(value){
    return value>0?value+1:null;
});
console.log(newArr);

var newArr2 = $.grep(arr,function(value){
  return value>0?value+1:null;
});
console.log(newArr2);

map和grep的异同：

• 都是对数组进行操作
• map对数组进行遍历，返回满足条件的新数组
• grep 起到筛选的作用，返回满足条件的值

打印结果：

[3, 4]
[2, 3]

15、$.noop 空函数 

16、$parseJSON接收JSON字符串返回JavaScript对象

详情见官方文档:zepto API