zepto

简介

zepto 是一个缩减版的jQuery库，兼容性没有jQuery好，适用于移动端，操作css属性。

zepto模块

image.png
官网地址 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>

image.png

eq选取元素集合中的某个

$('li').eq(0) 第一个元素
$('li').eq(-1) 最后一个元素

filter
过滤对象集合，返回对象集合中满足css选择器的项

$('li').filter('.item-1')获取class属性值为item-1的元素
$('li').filter(':even').css('background','red')获取偶数项的li元素并把它们的背景变为红色