Zepto中文API

初稿地址:http://zeptojs.com/

译文地址:http://www.html-5.cn/Manual/Zepto/

Zepto凡一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery不无类似之api
如果您晤面用jquery,那么你吧会见就此zepto。

规划的目的是供jquery的近乎之APIs,但连无是100%覆盖jquery为目的。zepto设计的目的是有一个5-10k底通用库、下载并执行快、有一个熟识通用的API,所以若会拿您要的生机放到应用开发及。

Zepto 是同样款开源软件,它好吃开发者和商贸发布。 MIT
license.

下载 Zepto

默认的构建包括以下模块:
Core, Ajax, Event, Form, Effects, Polyfill, and Detect.

再有再多的模块;
所以可用模块链接以此 README.

  • zepto.js v1.0 (源码) – 54.6k
    uncompressed, lots of comments
  • zepto.min.js v1.0
    (压缩代码) – 9.7k when gzipped
  • Source code on Github

所以一个script标签引入Zepto到您的页面的底色:

    ...
    </body>
    <script src=zepto.min.js></script>
</html>

而您得兼容ie浏览器,你得为此回jquery。
需要小心ie10后头不再支持标准注释(为了增强与HTML5
的而互操作性和兼容性,Internet Explorer 10 标准模式以及Quirks
模式面临去了对规范注释的支撑),因此,我们建议以下的document.write方法:

<script>
    document.write('<script src=' +  ('__proto__' in {} ? 'zepto' :  'jquery') + '.js><\/script>')
</script>

目标平台

桌面浏览器

  • Safari 5+ (Mac, Win)
  • Chrome 5+ (Win, Mac, Linux, Chrome OS)
  • Mozilla Firefox 4+ (Win, Mac, Linux)
  • Opera 10+ (Win, Mac, Linux)

挪端浏览器

  • iOS 4+ Safari
  • Chrome for Android
  • Chrome for iOS
  • Android 2.2+ Browser
  • webOS 1.4.5+ Browser
  • BlackBerry Tablet OS 1.0.7+ Browser
  • Amazon Silk 1.0+
  • Firefox for Android
  • Firefox OS Browser
  • Practically any WebKit-based browsers/runtimes

内需专注的是Zepto的一部分只是摘功力是专程对移动端浏览器的;因为它们的初期目标在走端提供一个简的好像jquery的js库。

在浏览器上(Safari和Chrome)上付出页面下或使PhoneGap构建基于html的web-view本地应用,使用Zepto是一个正确的挑三拣四。

 

一言以蔽之,除了ie浏览器外,Zepto希望以有的当代浏览器被作同样栽基础条件来行使。

手动建立Zepto

zepto.jszepto.min.js供上述使用方法。
然而,为了还好的主次效果与自由性,可以在动用Zepto源码构建Zepto.js和zepto.min.js的早晚择模块并作测试,
使用UglifyJS据悉你的需来扭转(当服务端开启gzipped后,最精简的代码)代码。

有关如何立Zepto的the
README,包含运行测试与补丁。.

缔造插件

得经过添加方式作为$.fn的性能来写插件:

;(function($) {
    $.extend($.fn, {
        foo: function() {
            // `this` refers to the current Zepto collection.
            // When possible, return the Zepto collection to allow chaining.
            return this.html('bar')
        }
    })
})(Zepto)

以更好开端支付插件,先押下source of Zepto’s core
module,并承认读了coding
style
guidelines


中心措施

$()

$(selector, [context])   ⇒ collection
$(<Zepto collection>)   ⇒ same collection
$(<DOM nodes>)   ⇒ collection
$(htmlString)   ⇒ collection
$(htmlString, attributes)   ⇒ collection v1.0+
Zepto(function($){ ... }) 

由此实施css选择器包装dom节点,创建元素或从一个html片段来创造一个Zepto对象。

Zepto集合是一个类数组的目标,它有着链式方法来操作其对的dom,除了$对象及的直白方式外(如$.extend),文档对象被的富有术都是会师方法。

而选择器中有content参数(css选择器,dom,或者Zepto集合对象),那么就在所受的节点背景下开展css选择器;这个功效来接触像下$(context).find(selector)

好透过一个html字符串片段来创造一个dom节点。也可以通过被一定一组属性映射来创造节点。最抢之创建而素,使用<div> 或 <div/>形式。

当一个函数附加以 DOMContentLoaded 事件的处理流程中。如果页面都加载了,这个措施将会立刻吃实施。

$('div')
//=> all DIV elements on the page
$('#foo')
//=> element with ID "foo"

// create element:
$("<p>Hello</p>")
//=> the new P element
// create element with attributes:
$("<p />", {
    text: "Hello",
    id: "greeting",
    css: {
        color: 'darkblue'
    }
})
//=> <p id=greeting style="color:darkblue">Hello</p>

// execute callback when the page is ready:
Zepto(function($) {
    alert('Ready to Zepto!')
})

不支持jQuery CSS
扩展,但是得选取的“selector”模块有限提供支持,如有的常用之伪选择器,可以和存活的代码或插件兼容执行。

$.camelCase v1.0+

$.camelCase(string)   ⇒ string

将同样组字符串变成“骆驼”命名法的新字符串,如果该字符已经是“骆驼”命名法,则未成形。

$.camelCase('hello-there')
//=> "helloThere"
$.camelCase('helloThere')
//=> "helloThere"

$.contains v1.0+

$.contains(parent, node)   ⇒ boolean

检查父节点是否带有加的dom节点,如果两者如出一辙,则归 false

$.each

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

遍历数组元素或以key-value值对艺术遍历对象。回调函数返回 false 时停止遍历。

$.each(['a',
        'b',
        'c'
    ],
    function(index,
        item) {
        console.log('item %d is: %s',
            index, item)
    });

var hash = {
    name: 'zepto.js',
    size: 'micro'
};
$.each(hash,
    function(key,
        value) {
        console.log('%s: %s',
            key, value)
    });

$.extend

$.extend(target, [source, [source2, ...]])   ⇒ target
$.extend(true, target, [source, ...])   ⇒ target v1.0+

通过源对象扩大目标对象的属性,源对象属性将蒙目标靶属性。

默认情况下啊,复制为浅复制。如果第一独参数为true表示深度复制。

var target = {
        one: 'patridge'
    },
    source = {
        two: 'turtle doves'
    };

$.extend(target, source);
//=> { one: 'patridge',
//     two: 'turtle doves' }

$.fn

Zepto.fn凡是一个靶,它具有Zepto对象上享有可用的不二法门。如 addClass(), attr(),和其余方法。在这目标上加一个方式,所有的Zepto对象上还能够因此到拖欠方式。

此地发出一个贯彻 empty() 方法的事例:

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

$.grep v1.0+

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

$.grep([1,2,3], function(){
        return item > 1
}); //=>[2,3]

收获一个初数组,新数组只包含回调函数中回到 ture 的数组项。

$.inArray v1.0+

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

招来数组中指定值并赶回她的目录(如果无找到则赶回-1)。

[fromIndex] 参数可选取,表示从今哪个索引值开始于后搜索。

$.inArray("abc",["bcd","abc","edf","aaa"]);
//=>1

$.inArray("abc",["bcd","abc","edf","aaa"],1);
//=>1

$.inArray("abc",["bcd","abc","edf","aaa"],2);
//=>-1

$.isArray

$.isArray(object)   ⇒ boolean

如果object是array,则返回ture。

$.isFunction

$.isFunction(object)   ⇒ boolean

如果object是function,则返回ture。

$.isPlainObject v1.0+

$.isPlainObject(object)   ⇒ boolean

测试目标是否是纯粹的对象(通过 “{}” 或者 “new Object”
创建的),如果是,则回true。

$.isPlainObject({});// => true
$.isPlainObject(new Object); // => true
$.isPlainObject(new Date); // => false
$.isPlainObject(window);// => false

$.isWindow v1.0+

$.isWindow(object)   ⇒ boolean

确定参数是否也一个窗口(window对象),如果是则回true。

顿时在拍卖iframe时特别有因此,因为每个iframe都生其自己之window对象,使用正规方式obj==window校验这些objects的时节会破产。

$.map

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

经遍历集合中之素,通过函数返回一个新的再三组,null and undefined 将让过滤掉。

$.map([1,2,3,4,5],function(item,index){
        if(item>1){return item*item;}
}); 
// =>[4, 9, 16, 25]

$.map({"yao":1,"tai":2,"yang":3},function(item,index){
    if(item>1){return item*item;}
}); 
// =>[4, 9]

$.parseJSON v1.0+

$.parseJSON(string)   ⇒ object

类似本地JSON.parse 方法,接受一个标准格式的 JSON
字符串,并返回解析后底 JavaScript 对象。

$.trim v1.0+

$.trim(string)   ⇒ string

删除字符串开始同最终的空白符。类似String.prototype.trim()。

$.type v1.0+

$.type(object)   ⇒ string

落JavaScript
对象的门类。可能的项目有: null undefined boolean number string function array``date regexp object error

对此任何对象,它只是简短报告为“object”,如果您想明白一个对象是不是是一个javascript普通对象,使用isPlainObject。

add

add(selector, [context])   ⇒ self

补加元素到相当的元素集合。如果content参数是,只在content中进行检索,否则在document中寻觅。

<ul>    
    <li>list item 1</li>    
    <li>list item 2</li>    
    <li>list item 3</li>  
</ul>  
<p>a paragraph</p>

<script type="text/javascript">
    $('li').add('p').css('background-color', 'red');
</script>

addClass

addClass(name)   ⇒ self
addClass(function(index, oldClassName){ ... })   ⇒ self

啊每个匹配的因素添加指定的class类名。多只class类名通过空格分隔。

after

after(content)   ⇒ self

在每个匹配的因素后插入内容。内容可以吧html字符串,dom节点,或者节点组成的数组。

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

append

append(content)   ⇒ self

在每个匹配的要素末尾插入内容。内容可吧html字符串,dom节点,或者节点组成的数组。

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

appendTo

appendTo(target)   ⇒ self

用相当的元素插入到目标元素的末段(里面的后面)。这个略带像 append,但是插入的靶子及该倒。

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

attr

attr(name)   ⇒ string
attr(name, value)   ⇒ self
attr(name, function(index, oldValue){ ... })   ⇒ self
attr({ name: value, name2: value2, ... })   ⇒ self

读取或安装dom的属性。如果没受定value参数,则读取Zepto对象第集合一个要素的属于性值。当于一定矣value参数。则装Zepto对象集合中享有因素所有因素的属性值。当value参数为null,那么是特性将吃移除(类似removeAttr),多只属于性能为通过对象值对的艺术进行安装。

倘读取dom的性如 checkedselected,
使用 prop。

var form = $('form');
form.attr('action');//=> read value
form.attr('action', '/create'); //=> set value
form.attr('action', null); //=> remove attribute

// multiple attributes:
form.attr({
    action: '/create',
    method: 'post'
});

before

before(content)   ⇒ self

于相当每个元素的先头(外面)插入内容。内容可以啊html字符串,dom节点,或者节点组成的数组。

$('table').before('<p>See the following table:</p>')

children

children([selector])   ⇒ collection

取得每个匹配元素集合元素的直子元素,如果selector存在,只回去符合css选择器的素。

$('ol').children('*:nth-child(2n)')
//=> every other list item from every ordered list

clone v1.0+

clone()   ⇒ collection

通过深度克隆来复制集合中之有因素。

本条方不见面发出数量与事件处理程序复制到新的素。这点以及jquery中使一个参数来确定是否复制数据及事件处理不一样。

closest

closest(selector, [context])   ⇒ collection
closest(collection)   ⇒ collection v1.0+
closest(element)   ⇒ collection v1.0+

自打要素本身开始,逐级为上级元素匹配,并返回最先匹配selector的先人元素。如果context节点参数是。那么直考虑该节点的后代。这个法以及 parents(selector)稍微相似,但他单回最先匹配的先人元素。

 

倘若参数是一个Zepto对象集合或者一个要素,结果必须配合给定的素而无是选择器。

var input = $('input[type=text]');
input.closest('form');

concat

concat(nodes, [node2, ...])   ⇒ self

补偿加元素到一个Zepto对象集合形成一个初数组。如果参数是一个数组,那么是数组中的元素以会晤合并及Zepto对象集合中。

当时是一个Zepto提供的点子,不是jquey的API 。

contents v1.0+

contents()   ⇒ collection

获每个匹配元素集合元素的子元素,包括仿与注释节点。.contents()和.children()措施类似,只不过前者包括文件节点和jQuery对象中起的HTML元素。

css

css(property)   ⇒ value
css(property, value)   ⇒ self
css({ property: value, property2: value2, ... })   ⇒ self

读取或安装dom元素的css属性。当value参数不在的时刻,返回Zepto对象集合中首先只因素的css属性。当value参数存在时时,设置Zepto对象集合中各个一个因素的呼应css属性。多长长的css属性可以利用对象值对的法进行设置。

当value为空(空字符串,null 或 undefined),那个css属性将会晤受转换出。当value参数为一个凭单位之数字,如果该css属性需要单位,“px”将会晤自行添加到该属性上。

var elem = $('h1');
elem.css('background-color');
// read property
elem.css('background-color', '#369');
// set property
elem.css('background-color', '');
// remove property

// set multiple properties:
elem.css({
    backgroundColor: '#8EE',
    fontSize: 28
});

data

data(name)   ⇒ value
data(name, value)   ⇒ self

读取或摹写副dom的 data-* 属性。行为有点像 attr ,但是属性名称前加上 data-

当读取属性值时,会有下列转换:v1.0+

  • “true”, “false”, and “null” 被移为对应的花色;
  • 数字值转换为实际的数字型;
  • JSON值将会晤为解析,如果它是中之JSON;
  • 任何的成套作为字符串返回。

    Zepto
    基本落实`data()`唯其如此存储字符串。如果你若存储任意对象,请引入可选的“data”模块到您构建的Zepto中。

each

each(function(index, item){ ... })   ⇒ self

遍历一个Zepto集合对象,为各个一个匹配元素执行一个函数。this根本字指向当前item(作为函数的老二个参数传递)。如果函数返回 false,遍历结束。

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

empty

empty()   ⇒ self

自打Zepto对象集合中移除所有的dom子节点。

eq

eq(index)   ⇒ collection

打目前Zepto对象集合中得给定索引号的要素。

$('li').eq(0);
//=> only the first list item
$('li').eq(-1);
//=> only the last list item

filter

filter(selector)   ⇒ collection
filter(function(index){ ... })   ⇒ collection v1.0+

过滤Zepto集合对象,返回的Zepto集合对象中的起满足参数中之css选择器。如果参数为一个函数,函数返回来实在值得时候,元素才会于归。在函数中, this 关键字指向当前之因素。

与此相反的力量,查看not.

find

find(selector)   ⇒ collection
find(collection)   ⇒ collection v1.0+
find(element)   ⇒ collection v1.0+

得当前Zepto集合对象内找符合css选择器的每个元素的后生。

假若参数为Zepto集合对象要元素,过滤她,只有当它于现阶段Zepto集合对象被时常,才回为归。

var form = $('#myform');
form.find('input, select');

first

first()   ⇒ collection

赢得当前Zepto对象集合中的第一只元素。

$('form').first();

forEach

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

遍历当前Zepto集合对象的购入只元素,有硌类似 each,但是遍历函数的参数不一致,当函数返回 false 的时节,遍历不会见终止。

就是一个Zepto提供的主意,不是jquery的API。

get

get()   ⇒ array
get(index)   ⇒ DOM node

自打即Zepto对象集合中获得有因素或单个元素。当index参数不存在的时节,以常见数组的艺术赶回所有的要素。当指定index时,只回该置的素。这点和和eq不等,该法返回的匪是Zepto集合对象。

var elements = $('h2');
elements.get()
//=> get all headings as an array
elements.get(0)
//=> get first heading node

has v1.0+

has(selector)   ⇒ collection
has(node)   ⇒ collection

判定时Zepto对象集合的子元素是否发可选择器的素,或者是不是包含指定的dom节点,如果来,则赶回新的Zepto集合对象,该目标了滤掉不含有选择器匹配元素或者未分包指定dom节点的对象。

$('ol > li').has('a[href]')
//=> get only LI elements that contain links

hasClass

hasClass(name)   ⇒ boolean

反省Zepto对象集合中是否来素含有指定的class。

<ul>    
    <li>list item 1</li>    
    <li class="yaotaiyang">list item 2</li>    
    <li>list item 3</li>  
</ul>  
<p>a paragraph</p>

<script type="text/javascript">
    $("li").hasClass("yaotaiyang");
    //=> true
</script>

height

height()   ⇒ number
height(value)   ⇒ self
height(function(index, oldHeight){ ... })   ⇒ self

落Zepto对象集合中首先单因素的莫大;或者设置Zepto对象集合中持有因素的可观。

$('#foo').height()
// => 123
$(window).height()
// => 838 (viewport height)
$(document).height()
// => 22302

hide

hide()   ⇒ self

由此安装css的性能display 为 none来用Zepto对象集合中的元素隐藏。

Hide elements in this collection by setting their display CSS property
to none.

html

html()   ⇒ string
html(content)   ⇒ self
html(function(index, oldHtml){ ... })   ⇒ self

抱或设置Zepto对象集合中元素的HTML内容。当content参数没有加时,返回IZepto对象集合中率先只要素的innerHtm。当content参数为定时。用那替换Zepto对象集合中每个元素的content。content可以是append遭逢描述的有着种类。

// autolink everything that looks like a Twitter username
$('.comment p').html(function(idx, oldHtml) {
    return oldHtml.replace(/(^|\W)@(\w{1,15})/g, '$1@<a href="http://twitter.com/$2">$2</a>');
});

index

index([element])   ⇒ number

博一个元素的职务。当elemen参数没有受起时,返回时元素以兄弟节点受到的职。当element参数为来时,返回她在脚下Zepto对象集合中之职位。如果没该因素,则回-1。

$('li:nth-child(2)').index()
//=> 1

indexOf

indexOf(element, [fromIndex])   ⇒ number

每当现阶段Zepto中落一个元素的位置。如果fromindex参数为有,从该职位为后找,返回基于0的职务,如果无找到,则归-1。index 方法是基于此法实现的。

当即是一个Zepto的法门,不是jquer的api。

insertAfter

insertAfter(target)   ⇒ self

插入Zepto对象集合中之素到指定的每个元素后面的dom中。这个有点像 after,但是以方法相反。

$('<p>Emphasis mine.</p>').insertAfter('blockquote');

insertBefore

insertBefore(target)   ⇒ self

插Zepto对象集合中之要素到指定的每个元素前面的dom中。这个微像 before,但是下方式相反。

$('<p>See the following table:</p>').insertBefore('table');

is

is(selector)   ⇒ boolean

认清当前Zepto元素集合中的率先只元素是否符css选择器。对于基础支撑jquery的非标准选择器类似::visible蕴含在可摘的“selector”模块中。

jQuery CSS
extensions 不吃支持。
选择“selector”模块仅仅能支撑少数几只极端常用的不二法门。

last

last()   ⇒ collection

取得Zepto集合对象被最终一个要素。

$('li').last();

map

map(function(index, item){ ... })   ⇒ collection 

遍历Zepto对象集合中之装有因素。通过遍历函数返回值形成一个初的会师对象。在遍历函数中this根本的对当前循环的item(遍历函数中之次只参数)。遍历中回到 nullundefined,遍历将受由断。

// get text contents of all elements in collection
elements.map(function() {
    return $(this).text();
}).get().join(', ');

next

next()   ⇒ collection
next(selector)   ⇒ collection v1.0+

取得Zepto对象集合中列一个素的生一个弟兄节点(可以选择性的牵动及淋选择器)。

$('dl dt').next()
//=> the DD elements

not

not(selector)   ⇒ collection
not(collection)   ⇒ collection
not(function(index){ ... })   ⇒ collection

过滤当前Zepto对象集合,获取一个初的Zepto对象集合,它其中的要素不可知匹配配css选择器。如果其他一个参数为Zepto集合对象,那么回的新Zepto对象吃之要素还无含在拖欠参数对象中。如果参数是一个函数。仅仅包含函数执行为false值得时候的素,函数的 this 关键字指向当前循环元素。

跟它们反而的法力,查看 filter.

offset

offset()   ⇒ object
offset(coordinates)   ⇒ self v1.0+
offset(function(index, oldOffset){ ... })   ⇒ self v1.0+

取当前因素相对于document的职。返回一个目标涵盖: topleftwidthheight

当给得一个靶属性lefttop动这些价值来相对于document对每一个素进行固化。

offsetParent v1.0+

offsetParent()   ⇒ collection

找到第一只稳定过之祖宗元素,在ccs中象征它们的position 值为“relative”,
“absolute” or “fixed”

parent

parent([selector])   ⇒ collection

获Zepto对象集合中每个元素的直接父元素。如果css选择器参数为闹。过滤出符合条件的因素。

parents

parents([selector])   ⇒ collection

得到Zepto对象集合每个元素所有的先世元素。如果css选择器参数为闹,过滤出符合条件的要素。

假设想博得第一手父级元素,使用 parent。如果只是想得到第一独副css选择器的素,使用closest。

$('h1').parents()
//=> [<div#container>, <body>, <html>]

pluck

pluck(property)   ⇒ array

取得Zepto对象集合中各一个要素的属于性值。返回值为 nullundefined值得过滤掉。

$('body > *').pluck('nodeName');
// => ["DIV", "SCRIPT"]

// implementation of Zepto's `next` method
$.fn.next = function() {
    return $(this.pluck('nextElementSibling'));
}

这是一个Zepto的方式,不是jquery的api

position v1.0+

position()   ⇒ object

取Zepto对象集合中第一单元素的岗位。相对于 offsetParent。当绝对定位的一个素靠近另一个因素的上,这个法子是卓有成效的。

返回一个的目标有这些性:topleft

var pos = element.position();

// position a tooltip relative to the element
$('#tooltip').css({
    position: 'absolute',
    top: pos.top - 30,
    left: pos.left
});

prepend

prepend(content)   ⇒ self

拿参数内容插入到每个匹配元素的眼前(元素中)。插入d的要素得以试html字符串片段,一个dom节点,或者一个节点的数组。

$('ul').prepend('<li>first list item</li>');

prependTo

prependTo(target)   ⇒ self

以有因素插入到目标前面(元素外)。这有接触像prepend,但是是倒转的法。

$('<li>first list item</li>').prependTo('ul');

prev

prev()   ⇒ collection
prev(selector)   ⇒ collection v1.0+

得Zepto对象集合中每一个因素的前方一个弟兄节点,通过选择器来展开过滤。

prop v1.0+

prop(name)   ⇒ value
prop(name, value)   ⇒ self
prop(name, function(index, oldValue){ ... })   ⇒ self

读取或安装dom元素的属于性值。它于读取属性值的景象下先给 attr,因为这些属于性值会坐用户之交互发生变更,如checked and selected

<input class="taiyang" id="check1" type="checkbox" checked="checked">
<input class="yaotaiyang" id="check2" type="checkbox">

<script type="text/javascript">
    $("#check1").attr("checked"); //=> "checked"
    $("#check1").prop("checked"); //=> "true"
    $("#check2").attr("checked"); //=> "false"
    $("#check2").prop("checked"); //=> "false"
    $("input[type='checkbox']").prop("type",function(index,oldvalue){
        console.log(index+"|"+oldvalue);
    });
    //=> 0|checkbox
    //=> 1|checkbox
    $("input[type='checkbox']").prop("className",function(index,oldvalue){
        console.log(index+"|"+oldvalue);
    });
    //=> 0|taiyang
    //=> 1|yaotaiyang
</script>

push

push(element, [element2, ...])   ⇒ self

补充加元素到眼前Zepto对象的最后。

当即是一个zepto的计,不是jquery的api

ready

ready(function($){ ... })   ⇒ self

增长一个风波侦听器,当页面dom加载了毕 “DOMContentLoaded”
事件触发时触发。建议利用 $())来取代这种用法。

reduce

reduce(function(memo, item, index, array){ ... }, [initial])   ⇒ value

与 Array.reduce来一致的用法,遍历当前Zepto对象集合。memo是函数上次的返值。迭代进展遍历。

即时是一个zepto的法,不是jquery的api

remove

remove()   ⇒ self

易出当下Zepto对象中的素。有效之打dom中移除。

removeAttr

removeAttr(name)   ⇒ self

移步时Zepto对象集合中有因素的指定属性。

removeClass

removeClass([name])   ⇒ self
removeClass(function(index, oldClassName){ ... })   ⇒ self

挪动时Zepto对象集合中具有因素的指定class。如果name参数不受闹。将易有具有的class。多独class参数名称可以采用空格分隔。下例移除了点滴单class。

<input class="taiyang yueliang" id="check1" type="checkbox" checked="checked">
<input class="yaotaiyang" id="check2" type="checkbox">

<script type="text/javascript">
    $("#check1").removeClass("taiyang yueliang")
    //=>[<input class id="check1" type="checkbox" checked="checked">]
</script>

replaceWith

replaceWith(content)   ⇒ self

为此提供的情替换所有匹配的素。(包含元素本身)。content参数可以吗 before遭逢讲述的门类。

scrollTop v1.0+

scrollTop()   ⇒ number

落页面上的滚动元素或全体窗口已滚动的诸如素值。

show

show()   ⇒ self

回复Zepto对象集合中每个元素默认的“display”值。如果你用 hide将元素隐藏,用该属性可以用那出示。相当给干少了display:none

siblings

siblings([selector])   ⇒ collection

取得Zepto集合对象拥有兄弟节点。如果css选择器参数为有。过滤出符合选择器的因素。

size

size()   ⇒ number

收获Zepto对象集合中元素的多寡。

slice

slice(start, [end])   ⇒ array

array遭逢提取的方。从start开始,如果end 指出。提取不分包end职务的元素。

text

text()   ⇒ string
text(content)   ⇒ self

得到或者设置富有Zepto对象的文本内容。当content参数不吃闹。返回时Zepto对象集合中第一只因素的文本内容(包含子节点中之公文内容)。当content参数为闹,使用她替换Zepto对象集合中持有因素的公文内容。它有待点似 html,与她不同的凡其不能够就此来抱或安装
HTML。

toggle

toggle([setting])   ⇒ self

亮或隐藏匹配元素。如果 setting为true,相当于show 法。如果setting为false。相当于 hide方法。

var input = $('input[type=text]');
$('#too_long').toggle(input.val().length > 140);

toggleClass

toggleClass(names, [setting])   ⇒ self
toggleClass(function(index, oldClassNames){ ... }, [setting])   ⇒ self

于配合的因素集合中之每个元素上添加或删除一个或者多个样式类。如果class的称号在则去其,如果非存,就补加她。如果 setting的价也确实,这个功能相近于 addClass,如果也假,这个力量看似与 removeClass。

unwrap

unwrap()   ⇒ self

拿配合配元素的父级元素删除,保留自己(和兄弟元素,如果存在)在原来的职务。

$(document.body).append('<div id=wrapper><p>Content</p></div>')
$('#wrapper p').unwrap().parents()
//=> [<body>, <html>]

val

val()   ⇒ string
val(value)   ⇒ self
val(function(index, oldValue){ ... })   ⇒ self

赢得或设置匹配元素的价。当value参数不存。返回第一独因素的价值。如果是<select multiple>签,则赶回一个数组。

width

width()   ⇒ number
width(value)   ⇒ self
width(function(index, oldWidth){ ... })   ⇒ self

博Zepto对象集合中第一个元素的富裕;或者安装Zepto对象集合有因素的有钱。

$('#foo').width();
// => 123
$(window).width();
// => 768 (viewport width)
$(document).width();
// => 768 

wrap

wrap(structure)   ⇒ self
wrap(function(index){ ... })   ⇒ self v1.0+

每当每个匹配的要素外层包达一个html元素。structure参数可以是一个独立的因素或部分嵌套的要素。也得是一个html字符串片段或者dom节点。还足以是一个别用来包元素的回调函数,这个函数返回前少栽档次的卷入有。

欲提醒的是:欠措施对于dom中之节点有所好好的支持。如果用wrap() 用在一个初的素上,然后再以结果插入到document中,此时欠办法行不通。

// wrap each button in a separate span:
$('.buttons a').wrap('');

// wrap each code block in a div and pre:
$('code').wrap('<div class="highlight"><pre /></div>');

// wrap all form inputs in a span with classname
// corresponding to input type:
$('input').wrap(function(index) {
    return '';
});
//=> <input type=text />,
//   <input type=search />

// WARNING: will not work as expected!
$('<em>broken</em>').wrap('<li>').appendTo(document.body);
// do this instead:
$('<em>better</em>').appendTo(document.body).wrap('<li>');

wrapAll

wrapAll(structure)   ⇒ self

当备匹配元素外面包一重合HTML结构。

// wrap all buttons in a single div:
$('a.button').wrap('<div id=buttons />');

wrapInner

wrapInner(structure)   ⇒ self
      wrapInner(function(index){ ... })   ⇒ self v1.0+

每当匹配元素里的情外包一重叠构造。

// wrap the contents of each navigation link in a span:
$('nav a').wrapInner('');

// wrap the contents of each list item in a paragraph and emphasis:
$('ol li').wrapInner('<p><em /></p>');

以下为原始html:

<div class="yaotaiyang">
     <div class="taiyang">yao</div>
     <div class="taiyang">yao</div>
</div>

通过:

$('.taiyang).wrapInner('<div class="new" />');

得到:

<div class="yaotaiyang">
      <div class="taiyang"><div class="new">yao</div></div>
      <div class="taiyang"><div class="new">yao</div></div>
</div>  

检测方法

Detect module

 

欠检测方法好当不同之条件遭到微调你的站点或应用程序,并协助您鉴别手机与平板;以及不同之浏览器和操作系统。

// The following boolean flags are set to true if they apply,
// if not they're either set to `false` or `undefined`.
// We recommend accessing them with `!!` prefixed to coerce to a boolean. 

// general device type
$.os.phone
$.os.tablet

// specific OS
$.os.ios
$.os.android
$.os.webos
$.os.blackberry
$.os.bb10
$.os.rimtabletos

// specific device type
$.os.iphone
$.os.ipad
$.os.touchpad
$.os.kindle

// specific browser
$.browser.chrome
$.browser.firefox
$.browser.silk
$.browser.playbook

// Additionally, version information is available as well.
// Here's what's returned for an iPhone running iOS 6.1.
!!$.os.phone
// => true
!!$.os.iphone
// => true
!!$.os.ios
// => true
!!$.os.version
// => "6.1"
!!$.browser.version
// => "536.26"

事件处理

$.Event

$.Event(type, [properties])   ⇒ event

创并初始化一个指定的dom事件。如果properties参数为起,使用她来扩充出新的轩然大波目标。默认情况下,事件于安装为冒泡方式;这个得通过安装bubblesfalse来关闭。

初始化的意义可采用 trigger来触发。

$.Event('mylib:change', { bubbles: false });

$.proxy v1.0+

$.proxy(fn, context)   ⇒ function
$.proxy(context, property)   ⇒ function

纳一个函数,然后回一个新函数,并且这新函数始终维持了特定的上下文语境,新函数中this本着context参数。另外一种植样式,原始之function是context对如的办法。

var obj = {
        name: 'Zepto'
    },
    handler = function() {
        console.log("hello from + ", this.name)
    }

// ensures that the handler will be executed in the context of `obj`:
$(document).on('click', $.proxy(handler, obj));

var obj = {
    name: "yaotaiyang",
    test: function() {
        alert(this.name);
        $("#test").unbind("click", obj.test);
    }
};
$("#test").click(jQuery.proxy(obj, "test"));

bind

Deprecated, use on instead.

bind(type, function(e){ ... })   ⇒ self
bind({ type: handler, type2: handler2, ... })   ⇒ self

为一个素绑定一个处理事件。

delegate

Deprecated, use on instead.

delegate(selector, type, function(e){ ... })   ⇒ self
delegate(selector, { type: handler, type2: handler2, ... })   ⇒ self

据悉相同组特定的根元素为具备选择器匹配的素附加一个处理事件,匹配的因素或现在要前才创建。

die

Deprecated, use off instead.

die(type, function(e){ ... })   ⇒ self
die({ type: handler, type2: handler2, ... })   ⇒ self

剔除通过 live 添加的轩然大波。

live

Deprecated, use on instead.

live(type, function(e){ ... })   ⇒ self
live({ type: handler, type2: handler2, ... })   ⇒ self

类似delegate,添加一个个事件处理器到符合当下选择器的装有因素匹配,匹配的素或现在或前才创建。

off

off(type, [selector], function(e){ ... })   ⇒ self
off({ type: handler, type2: handler2, ... }, [selector])   ⇒ self
off(type, [selector])   ⇒ self
off()   ⇒ self

移除通过 on 注册之轩然大波(用bind或者用on注册的风波)。如果没参数,将移出当前因素上具有的挂号事件。

off(type, [selector], function(e){ ... }) ⇒ self

如果selector存在,则相当于delegate。
$("ul").on("click","li",function(){alert("yaotaiyang")});
以上代码相当于将li的事件代理到ul上。后续添加的li也能拥有以上方法。该事件可以通过undelegate来移除。
$("ul").undelegate();
也可用:$("ul").off();

如果selector参数不存在。则相当于bind。
$("li").on("click",function(){alert("yaotaiyang")});
该事件可以通过unbind来移除。
$("li").unbind("click");
也可以用off()来移除:$("li").off();

on方法继集成bind和delegate方法。

on

on(type, [selector], function(e){ ... })   ⇒ self
on({ type: handler, type2: handler2, ... }, [selector])   ⇒ self

长风波到Zepto对象集合上。多单事件可以透过空格的字符串方式丰富。或者因为事件类、函数对象的
方式。如果css选择器给有,事件之对象满足选择器条件时。事件才见面让触发。

事件处理程序于接触事件要素或css选择器匹配的元素的前后文中执行(this指为触发事件的要素)。

当事件处理程序返回false,
或调用preventDefault(),浏览器的默认事件将见面吃拦住。

var elem = $('#content');
// observe all clicks inside #content:
elem.on('click', function(e) {
        ...
});
// observe clicks inside navigation links in #content
elem.on('click', 'nav a', function(e) {
        ...
});
// all clicks inside links in the document
$(document).on('click', 'a', function(e) {
        ...
});

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

如果selector存在,则相当于delegate。
$("ul").on("click","li",function(){alert("yaotaiyang")});
以上代码相当于将li的事件代理到ul上。后续添加的li也能拥有以上方法。该事件可以通过undelegate来移除。
$("ul").undelegate();
也可用:$("ul").off();

如果selector参数不存在。则相当于bind。
$("li").on("click",function(){alert("yaotaiyang")});
该事件可以通过unbind来移除。
$("li").unbind("click");
也可以用off()来移除:$("li").off();

on方法继集成bind和delegate方法。

one

one(type, function(e){ ... })   ⇒ self
one({ type: handler, type2: handler2, ... })   ⇒ self

加上一个处理事件到元素。处理函数在每个元素上最为多尽同样糟糕。

trigger

trigger(event, [data]) 

在Zepto对象集合的素上接触指定的事件。事件可以是一个字符串,也可以是一个 $.Event 对象。如果data参数是,它会当参数传递给事件函数。

// add a handler for a custom event
$(document).on('mylib:change', function(e, from, to) {
    console.log('change on %o with data %s, %s', e.target, from, to)
});
// trigger the custom event
$(document.body).trigger('mylib:change', ['one', 'two']);

Zepto仅仅支持在dom元素上触事件。

triggerHandler

triggerHandler(event, [data])   ⇒ self

像 trigger,它只是触及事件,但非冒泡。

仍您更一个input上如利用该方式。

$("input").triggerHandler('focus');
// 此时input上的focus事件触发,但是input不会聚焦
$("input").trigger('focus');
// 此时input上的focus事件触发,input聚焦

unbind

Deprecated, use off instead.

unbind(type, function(e){ ... })   ⇒ self
unbind({ type: handler, type2: handler2, ... })   ⇒ self

移除通过 bind 注册的轩然大波。

undelegate

Deprecated, use off instead.

undelegate(selector, type, function(e){ ... })   ⇒ self
undelegate(selector, { type: handler, type2: handler2, ... })   ⇒ self

移除通过delegate 注册的事件。


Ajax请求

$.ajax

$.ajax(options)   ⇒ XMLHttpRequest 

施行Ajax请求。请求地址可以是本地的要跨域的,在支撑之浏览器中通过 HTTP
access
control或者经过JSONP来完成。

参数:

  • type (默认: “GET”):请求方法 (“GET”, “POST”, or other)
  • url (默认: 当前地点):发送请求的地址
  • data (默认:none):发送到服务器的数;如果是get请求,它会活动为作为参数拼接到url上。非String对象将通过 $.param 得到序列化字符串。
  • processData (默认: true):
    对于非Get请求。是否自动将 data 转换为字符串。
  • contentType (默认: “application/x-www-form-urlencoded”):
    发送信息至服务器时内容编码类型。
    (这吗堪经过安装headers headers)。通过设置 false 跳了设置默认值。
  • dataType (默认: none):预期服务器返回的数据类型(“json”, “jsonp”,
    “xml”, “html”, or “text”)
  • timeout (默认: 0): 设置请求过时间(毫秒),0表示未过期。
  • headers (默认:{}): 一个分外的”{键:值}”对投到要一起发送
  • async (默认:
    true):默认设置下,所有请求都为异步。如果急需发送同步请求,请用以此设置也 false
  • global (默认: true):请求将触发全局AJAX事件处理程序,设置为 false
    将不见面硌全局 AJAX 事件。
  • context (默认: window):
    这个目标用于安装Ajax相关回调函数的上下文(this指向)。
  • traditional (默认:false):激活传统的道通过$.param来博取序列化的 data

如果URL中含有 =?或者dataType凡“jsonp”,这重将见面透过注入一个 <script>标签来替使用
XMLHttpRequest
(查看 JSONP)。此时对 contentTypedataTypeheaders有限制,async 不深受支持。

Ajax 回调函数

卿可以指定以下的回调函数,给起底实施各个:

  1. beforeSend(xhr, settings):请求Ajax发出前调用,它接收xhr对象及settings作为参数对象。如果它们回到false ,请求将给收回。

  2. success(data, status, xhr):请求成功之后调用。传入返回后的数额,以及带有成功代码的字符串。

  3. error(xhr, errorType, error):请求出错时调用。
    (超时,解析错误,或者状态码不在HTTP 2xx)。

  4. complete(xhr, status):请求完成时调用,无论请求失败或成。

Ajax 事件

global: true时不时。在Ajax请求生命周期内,以下这些事件将给触发。

  1. ajaxStart (global):如果没另外Ajax请求时活跃将会晤为触发。

  2. ajaxBeforeSend (data: xhr, options):再发送请求前,可以于撤。

  3. ajaxSend (data: xhr, options):像 ajaxBeforeSend,但不能取消。

  4. ajaxSuccess (data: xhr, options, data):当回成功时。

  5. ajaxError (data: xhr, options, error):当起左时。

  6. ajaxComplete (data: xhr,
    options):请求都做到后,无论请求是马到成功或失败。

  7. ajaxStop (global):如果当时是最后一个活跃在的Ajax请求,将会见于触发。

默认情况下,Ajax事件在document对象上沾。然而,如果请的 context 是一个dom节点,该事件会于这个节点上触发然后再次dom中冒泡。唯一的不比是 ajaxStart & ajaxStop当时简单单全局事件。

$(document).on('ajaxBeforeSend', function(e, xhr, options) {
    // This gets fired for every Ajax request performed on the page.
    // The xhr object and $.ajax() options are available for editing.
    // Return false to cancel this request.
});

$.ajax({
    type: 'GET',
    url: '/projects',
    // data to be added to query string:
    data: {
        name: 'Zepto.js'
    },
    // type of data we are expecting in return:
    dataType: 'json',
    timeout: 300,
    context: $('body'),
    success: function(data) {
        // Supposing this JSON payload was received:
        //   {"project": {"id": 42, "html": "<div>..." }}
        // append the HTML to context object.
        this.append(data.project.html);
    },
    error: function(xhr, type) {
        alert('Ajax error!');
    }
});

// post a JSON payload:
$.ajax({
    type: 'POST',
    url: '/projects',
    // post payload:
    data: JSON.stringify({
        name: 'Zepto.js'
    }),
    contentType: 'application/json'
});

$.ajaxJSONP

Deprecated,
use $.ajax instead.

$.ajaxJSONP(options)   ⇒ mock XMLHttpRequest

行JSONP跨域获取数据。

这个方法相对 $.ajax 没有优势,建议不要使用。

$.ajaxSettings

一个蕴含Ajax请求的默认设置的靶子。大部分底安装在 $.ajax未遭都描述。以下设置为全局十分有效:

Object containing the default settings for Ajax requests. Most settings
are described in $.ajax.
The ones that are useful when set globally are:

  • timeout (默认: 0):对Ajax请求设置一个非零的值指定一个默认的晚点时间,以毫秒为单位。
  • global (默认: true):设置为false。以防范触发Ajax事件。
  • xhr (默认:XMLHttpRequest
    factory):设置也一个函数,它回到XMLHttpRequest实例(或一个配合的对象)
  • accepts: 从服务器请求的MIME类型,指定dataType值:
    • script: “text/javascript, application/javascript”
    • json: “application/json”
    • xml: “application/xml, text/xml”
    • html: “text/html”
    • text: “text/plain”

$.get

$.get(url, function(data, status, xhr){ ... })   ⇒ XMLHttpRequest
$.get(url, [data], [function(data, status, xhr){ ... }], [dataType])   ⇒ XMLHttpRequest v1.0+

施行一个Ajax
GET请求。这是一个 $.ajax的简写方式。

$.get('/whatevs.html', function(response){
        $(document.body).append(response)
});

$.getJSON

$.getJSON(url, function(data, status, xhr){ ... })   ⇒ XMLHttpRequest
$.getJSON(url, [data], function(data, status, xhr){ ... })   ⇒ XMLHttpRequest v1.0+

透过 Ajax
GET请求获取JSON数据。这是一个 $.ajax 的简写方式。

$.getJSON('/awesome.json', function(data) {
    console.log(data);
});

// fetch data from another domain with JSONP
$.getJSON('//example.com/awesome.json?callback=?', function(remoteData) {
    console.log(remoteData);
});

$.param

$.param(object, [shallow])   ⇒ string
$.param(array)   ⇒ string

创办一个序列化的数组或对象,适用于一个URL
地址询问字符串或Ajax请求。如果shallow设置也true。嵌套对象不见面叫序列化,嵌套数组的价未会见利用放括号在她们之key上。

此外,还接受 serializeArray格式的累累组,其中每个件都生
“name” 和 “value”属性。

Also accepts an array
in serializeArray format,
where each item has “name” and “value” properties.

$.param({
    foo: {
        one: 1,
        two: 2
    }
});
//=> "foo[one]=1&foo[two]=2)"

$.param({
    ids: [1, 2, 3]
});
//=> "ids[]=1&ids[]=2&ids[]=3"

$.param({
    ids: [1, 2, 3]
}, true);
//=> "ids=1&ids=2&ids=3"

$.param({
    foo: 'bar',
    nested: {
        will: 'not be ignored'
    }
});
//=> "foo=bar&nested[will]=not+be+ignored"

$.param({
    foo: 'bar',
    nested: {
        will: 'be ignored'
    }
}, true);
//=> "foo=bar&nested=[object+Object]"

$.post

$.post(url, [data], function(data, status, xhr){ ... }, [dataType])   ⇒ XMLHttpRequest

实行Ajax
POST请求。这是一个 $.ajax 的简写方式。

$.post('/create', {
    sample: 'payload'
}, function(response) {
    // process response
});

data 参数可以是一个字符串:

$.post('/create',
    $('#some_form').serialize(),
    function(response) {
        // ...
    });

load

load(url, function(data, status, xhr){ ... })   ⇒ self

经过GET Ajax载入远程 HTML 文件代码并插入到 DOM
中。另外,一个css选择器可以于url中指定,像这样,可以用匹配selector选择器的HTML内容来更新集合。

Set the html contents of the current collection to the result of a GET
Ajax call to the given URL. Optionally, a CSS selector can be specified
in the URL, like so, to use only the HTML content matching the selector
for updating the collection:

$('#some_element').load('/foo.html #bar')

当这种艺术执行,
它用追寻 foo.html 页面的内容,Zepto会获取ID为bar元素的情节,并且插入到ID为 some_element 元素,而另的被搜寻到之要素以被废弃。

设css选择器不设有。将动用完的归文本。

告留心,在从来不选择器的情下,任何javascript块都见面实施。如果带来达选择器,匹配选择器内的script将会见于删。


表单方法

serialize

serialize()   ⇒ string

在Ajax post请求中将用作提交的表单元素的值编译成 URL-encoded 字符串。

serializeArray

serializeArray()   ⇒ array

以作为提交的表单元素的值编译成所有name和value对象成的数组。不能够采用的表单元素,buttons,未当选的radio
buttons/checkboxs 将会让超越了。结果未带有file inputs的数额。

$('form').serializeArray()
//=> [{ name: 'size', value: 'micro' },
//    { name: 'name', value: 'Zepto' }]

submit

submit()   ⇒ self
submit(function(e){ ... })   ⇒ self

呢 “submit” 事件绑定一个处理函数,或者触发元素上的 “submit”
事件。当参数function没有让出时,触发时表单“submit”事件,并且实施默认的交由表单行为,除非调用了 preventDefault()

当function参数为起时,在眼前元素上她概括得为其当“submit”事件绑定一个处理函数。

 


效果

$.fx

全局动画设置:

  • $.fx.off (在支持css transition
    的浏览器中默看false):设置true来禁止所有animate() transitions。

  • $.fx.speeds:用来设置动画时间的对象。

    • _default (400 ms)
    • fast (200 ms)
    • slow (600 ms)

     

    转移现有值或者加上一个新属性去震慑使用一个字符串来安时间的动画。

    Change existing values or add new properties to affect animations
    that use a string for setting duration.

animate

animate(properties, [duration, [easing, [function(){ ... }]]])   ⇒ self
animate(properties, { duration: msec, easing: type, complete: fn })   ⇒ self
animate(animationName, { ... })   ⇒ self

本着时Zepto集合对象吃元素进行css transition属性平滑过渡。

  • properties:
    一个对象,该对象涵盖了css动画的值,或者css帧动画的称。
  • duration (默认 400):以毫秒为单位的时间,或者一个字符串。
    • fast (200 ms)
    • slow (600 ms)
    • 任何$.fx.speeds自定义属性
  • easing (默认 linear):指定动画的缓动类型,使用以下一个:
    • ease
    • linear
    • ease-in / ease-out
    • ease-in-out
    • cubic-bezier(...)
  • complete:动画就时之回调函数

Zepto 还支持以下 CSS
transform 属性:

  • translate(X|Y|Z|3d)
  • rotate(X|Y|Z|3d)
  • scale(X|Y|Z)
  • matrix(3d)
  • perspective
  • skew(X|Y)

如果duration参数为 0 或 $.fx.off 为 true(在无支持css
transitions的浏览器中默认为true),动画将非让实践;替代动画效果的目标位置会即刻生效。类似之,如果指定的动画不是经动画就,而且动画的靶子位置即可见效。这种情形下没有动画, complete法呢未见面吃调用。

设若第一独参数是字符串而不是一个目标,它用吃作一个css关键帧动画 CSS
keyframe
animation的名称。

$("#some_element").animate({
    opacity: 0.25,
    left: '50px',
    color: '#abcdef',
    rotateZ: '45deg',
    translate3d: '0,10px,0'
}, 500, 'ease-out');

Zepto只利用css过渡效果的动画片。jquery的easings不会见支撑。jquery的相对变化(“=+10px”)
syntax 也未支持。请查看 list of animatable
properties。浏览器的支持或两样,所以肯定要测试你所思要支持之浏览器。


触控

Touch events

“touch”模块添加以下事件,可以 on 和 off。

  • tap —元素tap的早晚接触。
  • singleTap and doubleTap —
    这无异于针对性事件可以用来检测元素上之单击和双击。(如果你免欲检测单击、双击,使用 tap 代替)。
  • longTap — 当一个要素于按照停过750ms触发。
  • swipeswipeLeftswipeRightswipeUpswipeDown —
    当元素让划过时触发。(可挑选给定的趋势)

这些事件也是兼具Zepto对象集合上的全速方法。

<style>
.delete {
    display: none;
}
</style>

<ul id=items>
    <li>List item 1
        DELETE
    </li>
    <li>List item 2
        DELETE
    </li>
</ul>

<script>
// show delete buttons on swipe
$('#items li').swipe(function() {
    $('.delete').hide()
    $('.delete',
        this).show()
})

// delete row on tapping delete button
$('.delete').tap(function() {
    $(this).parent('li').remove()
})
</script>

 

相关文章