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-->精力专注在开发上. 流行起来的原因:轻 ...
随机推荐
- ToolBar 修改边距
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android ...
- ireport5.6+jasperreport6.3开发(一)--中文环境配置在
ireport在pdf的情况下无法显示中文字的解决方法 1,首先下载宋体的ttf(注意ttc的不行)下载链接如下(注意你可以用其他的ttf不一定要宋体) http://files.cnblogs.co ...
- 命令行导入mysql数据
找到mysql安装目录(bin) 进入mysql mysql -u root -p 123 选中数据库 use 数据库名 导入sql source sql数据库路径
- SSH连接超时不自动断开
Putty 启用putty keepalive putty -> Connection -> Seconds between keepalives ( 0 to turn off ),默认 ...
- hive配置以及在启动过程中出现的问题
一.hive配置 1.安装环境 在hadoop-1.2.1集群上安装hive-1.2.1 2.将hive-1.2.1环境变量添加到PATH路径下 使用如下命令打开配置文件 nano /etc/prof ...
- memcached 的简介、安装、命令
一.memcached 概述 Memcache(内存,缓存) : 是一个高性能的分布式的内存对象缓存系统.通过在内存里维护一个巨大的hash表.(key=value) Hash表 key(键) val ...
- AutoCAD2006启动慢解决方案
一. 1.打开控制面板.2.选择Internet选项.3.在Internet属性对话框里,点高级标签.4.清除“检查发行商的证书吊销”选项.5.单击应用,然后单击OK.6.重新启动,运行应用程序. 二 ...
- 个人介绍和Github使用流程
我叫石莉静,来自网络工程143班,学号1413042067 我的兴趣爱好有看电影.动漫,听音乐,摄影,寻找美食等等. 个人编程能力:非常真诚的说,我的编程能力蛮差的,用C++写过一共写过...(很少很 ...
- [深度优先搜索] POJ 3620 Avoid The Lakes
Avoid The Lakes Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8173 Accepted: 4270 D ...
- window下关闭nginx
nginx -s stop taskkill /F /IM nginx.exe > nul