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中的当前元素。