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的索引值,如果没找到,则返回-1index 方法是基于这个方法实现的。

这是一个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

获取对象集合中每一个元素的属性值。返回值为 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

获取对象集合中第一个元素的位置。相对于 offsetParent。当绝对定位的一个元素靠近另一个元素的时候,这个方法是有用的。

Returns an object with properties: topleft.

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 forclassreadonly and similar will be mapped to actual properties such as htmlForclassNamereadOnly, etc.

在读取一些能够在用户交互中改变的properties时,如 checked 和 selected, 应该考虑 prop方法,而不是attr方法。    此处似乎简单且轻松的给出了 prop 方法和 attr 方法的区别。

 
时间: 2024-08-19 05:08:02

zepto.js学习的相关文章

学习zepto.js(Hello World)

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 昨天听说了zepto.js,正好最近也比较闲,所以就学习一下这个著名DOM操作库,由于本人刚接触这个,但又不想单纯的说如何使用,所以本人会按照API顺序来说明方法如何使用并试着将对于源码的理解写上来; $(): 与jQuery的$()几乎一样,但zepto的选择器是直接使用的原生querySelectorAll(),所以,一些jQuery自定

学习zepto.js(原型方法)

学习zepto.js(原型方法)[1] 转载 新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase(): 方法接收一个字符串,将连字符格式的字符串转为驼峰格式的字符串: $.camelCase("login-name"); // ->loginName $.camelCase("loginName"); // ->不作处理 (本人发现zepto中的原型方法都是

学习zepto.js(对象方法)[3]

继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法. attr(): 三种用途 get: 返回值为一个string字符串 $("<span id="special"></span>").attr("id");//--> "special" 注意:只能返回对象中第一个节点的属性值 set: 返回值为一个zepto对象 $("<spa

学习zepto.js(对象方法)[5]

继续说. clone: 该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件. var $temp = $("div").clone(); //并不接收任何参数. 方法的实现就是循环调用方法对象.然后将所有的dom元素克隆并返回 而且使用的深度克隆,就是说,会将节点下方的子节点统统克隆过来. closest: 方法接收1-2个参数,第一个为selector(选择器),第二个为context(上下文); 方法会从调用节点开始,逐级向上匹配. 如果只传入selector,

zepto.js swipe实现触屏tab菜单

今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功能.前几天,有朋友告诉我百度基于zepto.js做了一个webapp的UI,大家也可以看下:“http://gmu.baidu.com/”,有点像jquery ui的东西,大家有兴趣可以学习啊... 我们今天,用zepto.js的swipe来实现新浪手机网的tab菜单,大家可以先看下新浪的手机版“h

阅读zepto.js的core中的Core methods

学习zepto.js,參考资料:http://www.zeptojs.cn/ 跟jQuery一样.其选择符号也是$; 首先接触的是 $.()  选择 $(selector, [context]) ? collection $(<Zepto collection>) ? same collection $(<DOM nodes>) ? collection $(htmlString) ? collection Zepto(function($){ ... }) $('div') //

移动端开发框架Zepto.js

一.概述 Zepto.js是一个轻量的js库,它与jQuery有类似的API. zepto的设计目的是不到10K的通用库,快速下载,有一个熟悉的api-->精力专注在开发上. 流行起来的原因:轻量:只支持现代浏览器:非常方便的搭配其他框架(phoneGap)来编写代码:优秀的源代码,性能良好. zepto和jQuery的对比: 浏览器兼容:zepto偏移动端,jQuery偏PC端: 文件大小:zepto 10k jQuery 30k  : 部分API接口:参数和执行结果有可能不一致: 生态圈:j

Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.

Zepto.js入门介绍

GitHub Zepto Zepto的一些可选功能是专门针对移动端浏览器的:因为它的最初目标在移动端提供一个精简的类似jquery的js库. Zepto不支持旧版本的Internet Explorer浏览器(<10). 不支持jQuery CSS 扩展 > 然而,可选的“selector”模块有限提供了支持几个最常用的伪选择器,而且可以被丢弃,与现有的代码或插件的兼容执行. 如果$变量尚未定义,Zepto只设置了全局变量$指向它本身. > 允许您同时使用的Zepto和有用的遗留代码,例如