简介
zepto 是一个缩减版的jQuery库，兼容性没有jQuery好，适用于移动端，操作css属性。
zepto模块
官网地址 https://www.html.cn/doc/zeptojs_api/
$.camelCase(string)
讲字符串转化为驼峰形式
$.camelCase('hell-world') helloWrold
$.each(array/obj,function(){})
便利数组或者对象
$.each([1,2,3,4,5,6],function(index,item){
console.log('item %d is: %s',index,item)
})
var obj = {name:'xiaoming',age:16}
$.each(obj,function(key,value){
console.log('%s : %s',key,value)
})
$.extend(target,source1,source2)
见后面对象的属性复制到第一个对象中去默认为浅拷贝，在target前添加true则为什么拷贝
var target = {one:1}
source2 = {two:2}
source3 = {three:3}
$.extend(ture,target:source2,source3)
$.grep(array,function(item){return item>2 })
返回满足条件的新数组
$.grep([1,2,3.4.5.6.7],function(item){
return item>5
})
[6,7]
$.inArray(element,array) 返回元素在数组中的索引，不存在返回-1
$.inAarray(1,[5,4,3,2,1]);
.isFunction判断元素是否为函数true false
$.isPlainObject(obj)判断对象是否为纯粹对象
$.isPlainObject({}) true
$.isPlainObject(new Object) true
$.isPlainObject(new Date) false
$.isPlainObject(window) false
$.map(collection,function(item,index){})遍历元素的集合，返回通过迭代函数的全部结果
$.map([1,2,3,4,5,6,7],function(item,index){
if(item>3){
return item*item
}
})
$.map({'yao':1,'tai':2,'yang':3},function(item,index){
if(item>1){
return {item*item}
}
})
$.JSON()
原生JSON.parse方法的别名。(接受一个标准格式的JSON字符串，并返回解析后的js对象)
$.parseJSON('{"a":"1","b":"2"}')
.type(object)判断js对象的类型
$('li').add('p')
添加元素到当前匹配的集合中去
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script src="zepto.min.js"></script>
<script>
$('li').add('p').css('background-color','red');
</script>
('li').after('<p>添加内容</p>');
('<p>item</p>').appendTo('ul')
把元素插入到目标末尾
$('li').before('<p>前边添加</p>')
attr设置元素的属性
var form = $('form')
form.attr('action') 获取action
form.attr('action','/create')设置属性
form.attr('action','null')移除属性
form.attr({
action:'/create',
method:'post'
})
('p').clone().appendTo('body');
css操作元素的DOM属性
$('li').css('background-color')获取属性
$('li').css('background','red')设置css属性
$('li').css('background','')清除元素的background属性
操作元素的多个csss属性
$('li').css({background-color:'red',fontSize:28})
data读取或或写入DOM的data属性
<div data-name="132"></div>
<script>
$('div').data('name') //获取
$('div').data('name',456)
</script>
each遍历一个对象的集合，this关键字指向当前项
<form action="">
<input type="text" value="1">
<input type="text" value="2">
<input type="text" value="3">
<input type="text" value="4">
</form>
<script src="zepto.min.js"></script>
<script>
$('form input').each(function(index){
console.log('input %d is:%o',index,this)
})
</script>
eq选取元素集合中的某个
$('li').eq(0) 第一个元素
$('li').eq(-1) 最后一个元素
filter
过滤对象集合，返回对象集合中满足css选择器的项
$('li').filter('.item-1')获取class属性值为item-1的元素
$('li').filter(':even').css('background','red')获取偶数项的li元素并把它们的背景变为红色