zepto.js学习
除了$( Zepto
)对象上的直接方法外(如$.extend
),文档对象中的所有方法都是集合方法。
$.grep v1.0+
$.grep(items, function(item){ ... }) ⇒ array
获取一个新数组,新数组只包含回调函数中返回 ture 的数组项。
$.map
$.map(collection, function(item, index){ ... }) ⇒ collection
通过遍历集合中的元素,返回通过迭代函数的全部结果,(愚人码头注:一个新数组)null
和 undefined
将被过滤掉。
$.isWindow v1.0+
$.isWindow(object) ⇒ boolean
如果object参数是否为一个window对象,那么返回true。这在处理iframe时非常有用,因为每个iframe都有它们自己的window对象,使用常规方法obj === window
校验这些objects的时候会失败。
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> 结果是这样的:
注意: add方法是将元素添加到当前匹配元素的集合中,并不会改变文档结构!!!
clone v1.0+
clone() ⇒ collection
通过深度克隆来复制集合中的所有元素。
此方法不会将数据和事件处理程序复制到新的元素。这点和jquery中利用一个参数来确定是否复制数据和事件处理不相同。
concat
concat(nodes, [node2, ...]) ⇒ self
添加元素到一个Zepto对象集合形成一个新数组。如果参数是一个数组,那么这个数组中的元素将会合并到Zepto对象集合中。
这是一个Zepto提供的方法,不是jquey的API 。
contents v1.0+
contents() ⇒ collection
获得每个匹配元素集合元素的子元素,包括文字和注释节点。(愚人码头注:.contents()和.children()方法类似,只不过前者包括文本节点以及jQuery对象中产生的HTML元素。)
css
css(property) ⇒ value
css([property1, property2, ...]) ⇒ object v1.1+
css(property, value) ⇒ self
css({ property: value, property2: value2, ... }) ⇒ self
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 })
// read multiple properties:
elem.css(['backgroundColor', 'fontSize'])['fontSize'] 注:jQuery中不能这样使用。
filter
filter(selector) ⇒ collection
filter(function(index){ ... }) ⇒ collection v1.0+
过滤对象集合,返回对象集合中满足css选择器的项。如果参数为一个函数,函数返回有实际值得时候,元素才会被返回。在函数中, this
关键字指向当前的元素。
与此相反的功能,查看not.
not
not(selector) ⇒ collection
not(collection) ⇒ collection
not(function(index){ ... }) ⇒ collection
过滤当前对象集合,获取一个新的对象集合,它里面的元素不能匹配css选择器。如果另一个参数为Zepto对象集合,那么返回的新Zepto对象中的元素都不包含在该参数对象中。如果参数是一个函数。仅仅包含函数执行为false值得时候的元素,函数的 this
关键字指向当前循环元素。
与它相反的功能,查看 filter.
forEach
forEach(function(item, index, array){ ... }, [context])
遍历对象集合中每个元素,有点类似 each,但是遍历函数的参数不一样,当函数返回 false
的时候,遍历不会停止。
这是一个Zepto提供的方法,不是jquery的API。
get
get() ⇒ array
get(index) ⇒ DOM node
从当前对象集合中获取所有元素或单个元素。当index参数不存在的时,以普通数组的方式返回所有的元素。当指定index时,只返回该置的元素。这点与eq不同,该方法返回的是DOM节点,不是Zepto对象集合。
疑问: 什么时候需要Zepto对象集合,又是什么时候需要数组?
height
height() ⇒ number
height(value) ⇒ self
height(function(index, oldHeight){ ... }) ⇒ self
获取对象集合中第一个元素的高度;或者设置对象集合中所有元素的高度。注: 就是元素的纯高度,不包括border 和padding。
indexOf
indexOf(element, [fromIndex]) ⇒ number
Get the position of an element in the current collection. If fromIndex number is given, search only from that position onwards. Returns the 0-based position when found and -1
if not found. Use of index is recommended over this method.
在当前对象集合中获取一个元素的索引值(愚人码头注:从0开始计数)。如果给定formindex参数,从该位置开始往后查找,返回基于0的索引值,如果没找到,则返回-1
。index 方法是基于这个方法实现的。
这是一个Zepto的方法,不是jquer的api。
is
is(selector) ⇒ boolean
判断当前元素集合中的第一个元素是否符css选择器。对于基础支持jquery的非标准选择器类似: :visible
包含在可选的“selector”模块中。
对于jQuery的非标准伪选择器 类似于:visible 的支持包含在 "selector" 模块中。
jQuery CSS extensions 不被支持。 选择“selector”模块仅仅能支持有限几个最常用的方式。
parent
parent([selector]) ⇒ collection
获取对象集合中每个元素的直接父元素。如果css选择器参数给出。过滤出符合条件的元素。
思考: parent 返回的肯定是 元素的直接父元素,如果给定了选择器参数,那么如果直接父元素不符合该选择器,那么将返回一个空集合。
<div class="mydiv">
<ul>
<li class="cur" id="first">list item 1</li>
<li class= "cur"> list item 2</li>
<li >list item 3</li>
</ul>
<p >a paragraph</p>
</div>
$('.cur').parent()
如上当两个li元素都有 class = cur时, 返回的是长度为1的集合, 但当 p元素的也含有 class = cur时,返回集合 长度为 2,此时集合中包含了 ul 和 div。
pluck
pluck(property) ⇒ array
获取对象集合中每一个元素的属性值。返回值为 null
或undefined
值得过滤掉。
$('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
获取对象集合中第一个元素的位置。相对于 offsetParent。当绝对定位的一个元素靠近另一个元素的时候,这个方法是有用的。
Returns an object with properties: top
, left
.
prepend
prepend(content) ⇒ self
将参数内容插入到每个匹配元素的里面(愚人码头注:元素内部插入)。插入d的元素可以试html字符串片段,一个dom节点,或者一个节点的数组。
$('ul').prepend('<li>first list item</li>') 该li元素将成为 ul 的第一个子节点。
prev
prev() ⇒ collection
prev(selector) ⇒ collection v1.0+
获取对象集合中每一个元素的前一个兄弟节点,通过选择器来进行过滤。
prop v1.0+
prop(name) ⇒ value
prop(name, value) ⇒ self
prop(name, function(index, oldValue){ ... }) ⇒ self
Read or set properties of DOM elements. This should be preferred over attr in case of reading values of properties that change with user interaction over time, such as checked
and selected
.
Short and lowercase names such as for
, class
, readonly
and similar will be mapped to actual properties such as htmlFor
, className
, readOnly
, etc.
在读取一些能够在用户交互中改变的properties时,如 checked 和 selected, 应该考虑 prop方法,而不是attr方法。 此处似乎简单且轻松的给出了 prop 方法和 attr 方法的区别。
push
push(element, [element2, ...]) ⇒ self
Add elements to the end of the current collection.
添加元素到当前对象集合的最后。
这是一个zepto的方法,不是jquery的api
reduce
reduce(function(memo, item, index, array){ ... }, [initial]) ⇒ value
与 Array.reduce有相同的用法,遍历当前对象集合。memo是函数上次的返回值。迭代进行遍历。
这是一个zepto的方法,不是jquery的api
unwrap
unwrap() ⇒ self
移除集合中每个元素的直接父节点,并把他们的子元素保留在原来的位置。 基本上,这种方法删除上一的祖先元素,同时保持DOM中的当前元素。
zepto.js学习的更多相关文章
- zepto.js 学习之(一)
中文文档:http://mweb.baidu.com/zeptoapi/#attr
- 学习zepto.js(对象方法)[3]
继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法. attr(): 三种用途 get: 返回值为一个string字符串 $("<s ...
- 学习zepto.js(Hello World)
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 昨天听说了zepto.js,正好最近也比较闲 ...
- 学习zepto.js(原型方法)
学习zepto.js(原型方法)[1] 转载 新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase(): ...
- 学习zepto.js(对象方法)[5]
继续说. clone: 该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件. var $temp = $("div").clone(); //并不接收任何参数. ...
- 阅读zepto.js的core中的Core methods
学习zepto.js,參考资料:http://www.zeptojs.cn/ 跟jQuery一样.其选择符号也是$; 首先接触的是 $.() 选择 $(selector, [context]) ⇒ ...
- zepto.js swipe实现触屏tab菜单
今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功 ...
- zepto.js常用操作
zepto.js是移动端的jquery,但是并没有提供所有与jquery类似的api.Zepto设计的目的是有一个5-10k的通用库.下载并快速执行.有一个熟悉通用的API,所以你能把你主要的精力放到 ...
- 移动端开发框架Zepto.js
一.概述 Zepto.js是一个轻量的js库,它与jQuery有类似的API. zepto的设计目的是不到10K的通用库,快速下载,有一个熟悉的api-->精力专注在开发上. 流行起来的原因:轻 ...
随机推荐
- 移动端设置字体px转换rem的脚本
(function (){ var _self = this; _self.width = 640;//设置默认最大宽度 _self.fontSize = 100;//默认字体大小 _self.wid ...
- DFD
- Windows Store App JavaScript 开发:文件选取器
正如前面章节C#语言中所介绍的,文件选取器是应用与系统进行交互的一个接口,通过文件选取器可以在应用中直接与文件系统进行交互,访问不同位置的文件或文件夹,或者将文件存储在指定位置.文件选取器分为对文件进 ...
- IOS9 Swift
Swift 2.0发布:即将开源,支持Linux [日期:2015-06-09] 来源:infoq 作者:Linux [字体:大 中 小] 在6月9日凌晨举行的WWDC 2015全球开发者大 ...
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- oracle异常:ORA-01422: exact fetch returns more than requested
ORA-01422: exact fetch returns more than requested 神奇的错误,困扰了我一个下午. 问题描述:明明只有一行记录,结果是报了多条记录的错误.令我百思不得 ...
- docker-registry 搭建私有仓库服务器
我使用了两个虚拟机: 1)Ubuntu是服务器ip:192.168.84.128 2)centos是客户端ip:192.168.84.129 1.在服务端下载registry镜像 docker pu ...
- Epson机械手4轴6轴示意图
世界坐标系(World Coordinate System,简称WCS)是由三个垂直并相交的坐标轴X轴.Y轴和Z轴构成,一般显示在绘图区域的左下角,如图1-7所示.X轴和Y轴的交点就是坐标原点O,X轴 ...
- Xcode模拟器怎么模拟定位?
new file --->添加一个.gpx文件 打开你的gpx文件,然后修改你想要模拟的经纬度: 运行时选上你刚才的位置
- Android的权限检查
Application的权限: 可以在AndroidManifest.xml中用<permission>定义运行Application需要的权限. 用<uses-permission ...