zeptoJs

最新推荐文章于 2022-06-07 09:47:24 发布

fanlinqiang

最新推荐文章于 2022-06-07 09:47:24 发布

阅读量496

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/flqbestboy/article/details/78213154

本文介绍了轻量级JavaScript库Zepto.js的基本概念、安装方法及常见用法，包括核心功能、事件处理、Ajax交互等，并对比了其与jQuery的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

如果你会用jquery，那么你也会用zepto。

官网：http://zeptojs.com/

中文api：http://www.css88.com/doc/zeptojs_api/

github：https://github.com/madrobby/zepto

通过npm安装

npm i zepto -S

但安装后会发现，很多功能不能用，如：$.os.phone

这是因为npm安装时默认的可选组件（Zepto modules）如下：

module	default	description
zepto	✔	Core module; contains most methods
event	✔	Event handling via `on()` & `off()`
ajax	✔	XMLHttpRequest and JSONP functionality
form	✔	Serialize & submit web forms
ie	✔	Add support for Internet Explorer 10+ on desktop and Windows Phone 8.
detect		Provides `$.os` and `$.browser` information
fx		The `animate()` method
fx_methods		Animated `show`, `hide`, `toggle`, and `fade*()` methods.
assets		Experimental support for cleaning up iOS memory after removing image elements from the DOM.
data		A full-blown `data()` method, capable of storing arbitrary objects in memory.
deferred		Provides `$.Deferred` promises API. Depends on the "callbacks" module. When included, `$.ajax()` supports a promise interface for chaining callbacks.
callbacks		Provides `$.Callbacks` for use in "deferred" module.
selector		Experimental jQuery CSS extensions support for functionality such as `$('div:first')` and `el.is(':visible')`.
touch		Fires tap– and swipe–related events on touch devices. This works with both `touch` (iOS, Android) and `pointer` events (Windows Phone).
gesture		Fires pinch gesture events on touch devices
stack		Provides `andSelf` & `end()` chaining methods
ios3		String.prototype.trim and Array.prototype.reduce methods (if they are missing) for compatibility with iOS 3.x.

自定义组件：

方案一：

1、先从github上下载源码（或通过git方式）

2、解压后进入目录，找到并打开make文件，大约在41行左右修改所要定制的模块（添加模块名并用空格隔开即可），保存、退出

原配置： modules = (env['MODULES'] || 'zepto event ajax form ie').split(' ')

这里配置： modules = (env['MODULES'] || 'zepto event ajax form ie detect fx fx_methods assets data deferred callbacks selector touch gesture stack ios3').split(' ')

3、在当前目录下打开cmd

执行 npm install 命令后再执行npm run-script dist 命令进行构建

此时，生成的dist就是按照定制，打包后的文件

方案二：

1、下载源码

2、在源码解压目录，运行

npm install
npm run-script dist

生成默认的配置包，在dist目录下。

3、自定义配置

# do a custom build
$ MODULES="zepto event data" npm run-script dist

在windows下运行

SET MODULES=zepto event data
npm run-script dist

部分方法

zepto与jquery的用法一致，但对jquery中的方法进行了精简和补充

jQuery CSS extensions 不被支持。选择“selector”模块仅仅能支持有限几个最常用的方式。

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

$.contains v1.0+

$.contains(parent, node)   ⇒ boolean

contains 获取iframe中的dom节点尤为有用

检查父节点是否包含给定的dom节点，如果两者是相同的节点，则返回 false

$.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' }

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')

offsetParent v1.0+

offsetParent()   ⇒ collection

找到第一个定位过的祖先元素，意味着它的css中的position 属性值为“relative”, “absolute” or “fixed”

获取对象集合每个元素所有的祖先元素。如果css选择器参数给出，过滤出符合条件的元素。

如果想获取直接父级元素，使用 parent。如果只想获取到第一个符合css选择器的元素，使用closest。

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

parent

parent([selector])   ⇒ collection

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

parents

parents([selector])   ⇒ collection

获取对象集合每个元素所有的祖先元素。如果css选择器参数给出，过滤出符合条件的元素。

如果想获取直接父级元素，使用 parent。如果只想获取到第一个符合css选择器的元素，使用closest。

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

data

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

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

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

“true”, “false”, and “null” 被转换为相应的类型；
数字值转换为实际的数字类型；
JSON值将会被解析，如果它是有效的JSON；
其它的一切作为字符串返回。
Zepto 基本实现`data()`只能存储字符串。如果你要存储任意对象，请引入可选的“data”模块到你构建的Zepto中。

ready

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

添加一个事件侦听器，当页面DOM加载完毕 “DOMContentLoaded” 事件触发时触发。建议使用 $()来代替这种用法。

获取对象集合每个元素所有的祖先元素。如果css选择器参数给出，过滤出符合条件的元素。

如果想获取直接父级元素，使用 parent。如果只想获取到第一个符合css选择器的元素，使用closest。

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

Detect methods

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.ipod // [v1.1]
$.os.touchpad
$.os.kindle

// specific browser
$.browser.chrome
$.browser.firefox
$.browser.safari // [v1.1]
$.browser.webview // (iOS) [v1.1]
$.browser.silk
$.browser.playbook
$.browser.ie // [v1.1]

// 此外，版本信息是可用的。
// 下面是运行iOS 6.1的iPhone所返回的。
!!$.os.phone         // => true
!!$.os.iphone        // => true
!!$.os.ios           // => true
$.os.version       // => "6.1"
$.browser.version  // => "536.26"

Touch

引入zepto后会在window上挂载tap weiper事件，使原生js也可使用这两个事件

Touch events

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

tap —元素tap的时候触发。
singleTap and doubleTap — 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击，使用 tap 代替)。
longTap — 当一个元素被按住超过750ms触发。
swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过时触发。(可选择给定的方向)

这些事件也是所有Zepto对象集合上的快捷方法。

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

<ul id=items>
  <li>List item 1 <span class=delete>DELETE</span></li>
  <li>List item 2 <span class=delete>DELETE</span></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>