Zepto.js学习笔记

1、$.each  可以用来遍历普通数组和对象数组，当遍历普通数组时，回调函数的参数是索引、数组里的每个元素

$.each( [a,b,c], function(index, item) { } )

当遍历对象时，回调函数参数是每个对象的key、每个对象的value

 

2、$.extend

$.extend(target, [source, [source2, ...]])   浅拷贝    针对嵌套对象

$.extend(true, target, [source, ...])   深拷贝

 

3、$.grep    获得一个新数组，新数组只包含回调函数中返回true的数组项

var a = [1, 8, 3, 4, 9, 2];

var b = $.grep(a, function (i) {

    return i > 3;

});

console.log(b);   //[8, 4, 9]

 

4、$.map  与each类似，但是参数顺序不一样

var b = $.map({ "yao": 1, "tai": 2, "yang": 3 }, function(value, key) {

    if (value > 1) {

        return key;

    }

});

console.log(b);   // ["tai", "yang"]

 

5、after 在每个匹配元素后面插入内容。内容可以为html字符串，dom节点，或者节点组成的数组

$('form label').after('<p>A note below the label</p>')

 

6、append 在每个匹配元素内部末尾插入内容。内容可以为html字符串，dom节点，或者节点组成的数组

$('ul').append('<li>new list item</li>')

 

7、css 读取或设置dom元素的css属性。当value参数为一个无单位的数字，如果该css属性需要单位，“px”将会自动添加到该属性上。

$(‘h1).css({backgroundColor: '#8EE', fontSize: 28 });

 

8、data  读取或写入dom的data-*属性。

<div id=“test” data-uid="123"></div>

var a = $(‘#test’).data('uid');

console.log(a);  //123

 

9、children 获得每个匹配元素的直接子元素，如果selector存在，只范湖符合css选择器的元素

$('ol').children('*:nth-child(2n)');

 

10、find  获得当前集合对象内查找符合css选择器的每个元素的后代

children只会遍历指定DOM元素的下一层级，find会遍历指定DOM元素下的所有后代层级

$("p").find("span").css('color','red'); //搜索所有段落中的后代 span 元素，并将其颜色设置为红色：

 

11、forEach  类似each，但是遍历函数的参数不一样，当函数返回 false 的时候，遍历不会停止。

$.forEach(function(item, index, array){ ... }, [context])

 

12、toggleClass  在匹配的元素集合中的每个元素上添加或删除一个或多个样式类。如果class的名称存在则删除它，如果不存在，就添加它

 

13  on 添加事件处理程序到对象集合中的元素上

 on(type, [selector], function(e){ ... }) 

$(‘#content’).on('click', 'nav a', function(e){ ... })

 

 

笔者列出的只是一些常用的方法，如果需要详细一点的可以参考zepto.js中文版：http://www.css88.com/doc/zeptojs_api/