Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jQuery有着类似的api。

• 当页面加载完成后调用

    Zepto(function($){
    	console.log("Ready to Zepto");
    });
  

• 获取所有标签

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

• 动态创建标签

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

• 生成驼峰式命名

    Zepto(function($){
    	$(".name").find("p").each(function(){
    		$(this).text($.camelCase($(this).text()));
    	});
    });
  

• 检查父节点是否包含给定的dom节点

    console.log($.contains($('.name')[0],$(".part")[0]));
  

• 遍历所有元素

    $.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);
    });
  

• 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));
  

• $.fn:给所有Zepto对象添加方法

    $.fn.empty = function(){
    	return this.each(function(){
    		this.innerHTML = '';
    	});
    };
  

• $.grep:获取一个数组，新数组只包含回调函数中返回true的数组项

    var grepArr = $.grep([1,2,3],function(item){
    	return item > 1;
    });
    console.log(grepArr);
  

• $.inArray:返回数组中指定元素的索引值，没有找到返回-1，第三个参数表示从该索引值开始向查找

    var inArr1 = $.inArray("abc",['bcd','abc','edf','aaa']);
    var inArr2 = $.inArray("abc",['bcd','abc','edf','aaa'],1);
    var inArr3 = $.inArray("abc",['bcd','abc','edf','aaa'],2);
    console.log(inArr1,inArr2,inArr3);
  

• $.isArray:判断是否为数组

    var isArr = ['a','c'];
    console.log($.isArray(isArr));
  

• $.isFunction:判断是否是function

  console.log($.isFunction(grepArr));

• $.isNumeric:判断是否为有限数值或一个字符串表示的数字

  console.log($.isNumeric('111'));

• $.isPlainObject:测试对象是否是通过{}或者new Object创建的

    var isPla1 = $.isPlainObject({});
    var isPla2 = $.isPlainObject(new Object);
    var isPla3 = $.isPlainObject(new Date);
    var isPla4 = $.isPlainObject(window);
    console.log(isPla1,isPla2,isPla3,isPla4);//true true false false
  

• $.isWindow:判断是否为一个window对象

  这在处理iframe时非常有用，每个iframe都有它们自己的window对象，使用常规方法obj === window校验这些objects的时候会失败

  console.log($.isWindow(window));

• $.map:遍历集合中的元素，返回通过迭代函数的全部结果（一个新数组）,null和undefined将被过滤掉。

    var mapArr = $.map([1,2,3,4,5],function(item,index){
    	if(item > 1){
    		return item*item;
    	}
    })
    console.log(mapArr);
    var mapArr2 = $.map({"yao":1,"tai":2,"yang":3},function(item,index){
    	if(item>1){
    		return item*item;
    	}
    });
    console.log(mapArr2);
  

  $.map和$.grep的异同

  都是对数组进行操作

  map对数组进行遍历，返回满足条件的新数组

  grep起到筛选的作用，返回满足条件的值

• $.noop:引用一个空函数，什么都不处理

  var callback = $.noop;

• $.parseJSON:原生JSON.parse方法的别名，接收一个标准的JSON字符串，并返回解析后的javaScript对象

  console.log($.parseJSON('{"name":"John"}'));

• $.trim:删除字符串首尾的空白符

    console.log(" hello world ");
    console.log($.trim(" hello world "));	
  

• $.type:获取javascript对象的类型，可能的类型有：null,undefined,boolean,number,string,function,array,date,regexp,object,error

    console.log($.type(new Date));
    console.log($.type("hello world"));
    console.log($.type(1111));
  

• add:添加元素到当前匹配的元素集合中来。如果没有给定content参数，则在整个document中查找

  $('li').add('p,h2').css('background-color','red');

• addClass:添加class类名

  $('li').addClass('width');

• after:在匹配元素后插入内容（外部插入）。内容可以为html字符串，dom节点，或者节点组成的数组

  $('li:first-child').after('<p>A note below the label</p>')

• before:在匹配元素前面插入内容（外部插入）。内容同after。

  $('ul').before('<p>before</p>');

• append:在每个匹配的元素末尾插入内容（内部插入）。内容同after。

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

• appendTo:功能与append类似，格式相反。内容同after。

  $('<li>new list item head</li>').appendTo('ul');

• attr:读取或设置dom的属性

  如果没有给定参数，则读取对象集合中第一个元素的属性值。

  如果参数为null，那么这个属性将被移出（类似removeAttr）

  多个属性值可以通过对象键值对的方式进行设置

  要读取DOM属性如checked和selected，使用prop

    $('form').attr('action','##');
    $('form').attr('action',null);
    console.log($('form').attr('action'));
    //多个属性
    $('form').attr({
    	action: '#',
    	method: 'post'
    });
    console.log($('form').attr('method'));
  

• children:获得匹配元素的直接子元素

    var child1 = $('ul').children();
    console.log(child1);
    var child2 = $('ul').children(':first-child');
    console.log(child2);
  

• clone:通过深度克隆来复制集合中的所有元素，此方法不会将数据和事件处理程序复制到新的元素

    var newDiv = $('ul').clone();
    console.log(newDiv);
  

• closest:匹配上级元素

    var clo1 = $("input[type='text']").closest('form');
    var clo1 = $("input[type='text']").closest('div');
    var clo2 = $("input[type='text']").parents();
    console.log(clo1);
    console.log(clo2);
  

• concat:添加元素并形成一个新数组

    var arr = ['1','2','3'];
    var arr2 = arr.concat('4');
    console.log(arr2);
  

• contents:获得匹配元素的子元素，包括文字和注释节点

  console.log($('.form').contents());

• css:读取或设置DOM元素的css属性

    var elem = $('h1');
    console.log(elem.css('background-color'));
    elem.css('background-color','#368');
    elem.css('background-color','');
  
    elem.css({
    	backgroundColor: '#8EE',
    	fontSize: 28
    });
  
    var elemStyle = elem.css(['backgroundColor','fontSize'])['fontSize'];
    console.log(elemStyle);
  

• data:读取或写入dom的date属性

    $("#btn").click(function(){
    	$('div').data("greeting","Hello World");
    	alert($('div').data("greeting"));
    });
  

• each:遍历集合中的每一个元素

    $('form').each(function(index){
    	console.log('input %d is %o',index,this);
    });
  

• empty:清空对象集合中的每个元素的DOM内容

  //$('.form').empty();

• eq:从当前对象集合中获取给定索引值的元素（从0开始）

    console.log($('li').eq(0));
    console.log($('li').eq(-1));
  

• filter:返回对象集合中满足css选择器的项

    var filt = $('div').filter('.form');
    console.log(filt);
  

• find:在当前集合内查找符合css选择器的每个元素的后代元素

    var find1 = $('form').find('select');
    console.log(find1);
  

• first:获取当前元素集合中的第一个元素

  console.log($('li').first());

• forEach:遍历集合中的每个元素

    $('ul').forEach(function(item,index,array){
    	console.log(item);
    });
  

• get:从当前对象集合中获取所有元素或单个元素，当index参数表不存在时，以普通数组的方式返回所有元素。与eq不同，该方法返回的时DOM节点，不是Zepto对象集合

    var elements = $('h1');
    console.log(elements.get());
    console.log(elements.get(0));
  

• has:判断当前对象集合是否含有符合选择器的元素，或者是否包含指定的DOM节点，如果有，返回新的对象集合

    var onlyLi = $('ul>li').has('a[href]');
    console.log(onlyLi);
  

• hasClass:检查对象是否又元素含有指定的class

    var hasClass1 = $('li').hasClass('list3');
    console.log(hasClass1);//true
  

• height:获取对象集合中的第一个元素的高度，或者设置对象集合中所有元素的高度

    console.log($('form').height());
    console.log($(window).height());
    console.log($(document).height());
    $('li').height('30px');
  

• hide:通过设置css的属性display为none来将对象集合中的元素隐藏

  // $('h1').hide();

• html:获取或设置对象集合元素中的html内容。

    console.log($('li').eq(2).html());
    $('li').eq(2).html('list33333');
  

• index:获取一个元素的索引值(从0开始)

  console.log($('li[class="list3"]').index());