Zepto.js 核心方法

$( )
javascript

一、$( htmlString ) 建立元素css

//建立元素
var p1 =$('<p>Hello Zepto</p>');

$('body').append(p1);


二、$( htmlString, attributes ) 建立带有属性的元素html

//建立带有属性的元素
var p2 =$('<p />',{text:'Hello World!', id:'greeting', css:{color:'red', fontSize:'30px', fontWeight:'bold'}});
$(p2).appendTo('body');


可查看新增 DOM 节点
java

wKioL1g_mgjy3S3iAADDwphcQGw605.png


三、Zepto(function($){ ... } )  DOM加载完毕,调用这个方法
node

//当页面ready的时候,执行回调
Zepto(function($){
    alert('Ready to Zepto!')
})


DOM加载完毕,显示 alert 消息数组

wKioL1g_m_zxemhnAAAZ9VUtzdQ316.png



$.camelCase( string )     => stringapp

将一组字符串变成 “驼峰”命名法的新字符串,若是该字符串已是驼峰命名法,则不发生变化ide

wKiom1g_nQTwRwdJAAAec8ySkyg081.png



$.contains(parent, node)    => boolean
函数

检查父节点是否包含给定的 DOM 节点,若是二者是相同的节点,则返回 false测试



$.each(collection, function(index, item){ ... })   =>collection

遍历数组元素或以 key - value 值对方式遍历对象。回调函数返回 false 时中止遍历

(1)、遍历数组

wKioL1hCXzPTZ_RGAABAj_O3H24433.png


(2)、遍历对象

wKiom1hCX_7y6REtAABckVjNoEk752.png



$.extend(target, [source, [source2, ...] ])   => target

$.extend(true, target, [source, ...])             => target

经过源对象扩展目标对象的属性,源对象属性将覆盖目标对象属性。

默认状况下,复制为浅拷贝(浅复制)。若是第一个参数为 true 表示深度拷贝(深度赋值)


var target = {one: 'targetObject'};
	var source = {two: 'sourceObject'};
	$.extend(target, source);
	console.log(target);

wKiom1hCYmjRWRGRAAAiWuRH9wk496.png



$.fn

Zepto.fn 是一个对象,它拥有 Zepto 对象上全部可用的方法,如 addClass( ), attr( ) 和其余方法。在这个对象添加一个方法,全部的 Zepto 对象上都能用到该方法。


这里有一个实现 Zepto 的 empty( ) 的例子:

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



$.grep(items, function(item){ ... } )   => array

获取一个新数组,新数组只包含回调函数中返回 true 的数组项

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


wKioL1hCZczjLAflAAALaVKy1Fg702.png


$.inArray(element, array, [fromIndex] )   => number

返回数组中指定元素的索引值,索引从0开始;若是没有找到,则返回 -1

[fromIndex]参数:可选,表示从哪一个索引值开始向后查找


wKiom1hCZ9yi2zydAAAvSK7t-ds266.png


$.isArray( object )   => boolean

若是 object 是 array,则返回 true

wKioL1hCaIXiZfzmAAAYQtHRs_o781.png


$.isFunction( object )   => booleand

若是 object 是 funcion,则返回 true



$.isPlainObject( object )   => boolean

测试一个对象是不是“纯粹”的对象,这个对象是经过对象常量("{ }")或者 new Object( ) 建立的。若是是,则返回 true 

wKioL1hCa4rgZlZZAAAyx8sMr_I157.png


$.isWindow( object )   => boolean

若是 object 是一个 window对象,那么返回true。这在处理 iframe 时很是有用,由于每一个 iframe 都有他们本身的 window对象,使用常规方法 obj === window 检验这些 objs时,会失败


$.map(collection, function(item, index){ ... })   => collection

经过遍历集合中的元素,返回经过迭代函数的所有结果(一个新数组)。null 和 undefined将被过滤掉


wKiom1hCb5njWKhXAAAYzFIEy0g444.png  wKiom1hCb6Pi0CRnAAAbBNrkkcA748.png


$.parseJSON( string )   => object

原生 JSON.parse( )的别名,接受一个标准格式的 JSON 字符串,返回解析后的 JS 对象

wKiom1hCc0_Q3i9FAAATB-Ehk0E755.png



$.trim( string )   => string

删除字符串首尾的空白符,相似 String.prototype.trim()

wKioL1hCdE2huSDfAAAMCBOmWT4579.png


$.type( object )   => string

获取 JS 对象的类型,可能的类型有:null, undefined, boolean, number, string, function, array, date, regexp, object, error


对于其它对象,它只是简单报告为“object”,若是你想知道一个对象是不是一个javascript普通对象,使用 isPlainObject

wKioL1hCdT-wOZ5UAAAQlNMUppI760.png

相关文章
相关标签/搜索