轻量级的移动框架--zepto.js

时间：2021-07-02 01:01:01

Zepto是一个轻量级的支持移动WebKit浏览器javascript移动端框架，框架支持jQuery语法，该框架的压缩包zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小只有5~10K, 可以说非常的小, 但是功能很齐全, 多出来了一些触摸屏的事件 , 它唯一不支持的就是万恶的IE, 不过用它来开发iPhone和Android网页绝对是首选了.

核心方法

$()

$(selector, [context]) ⇒ collection

      $(<Zepto collection>) ⇒ same collection

      $(<DOM nodes>) ⇒ collection

      $(htmlString) ⇒ collection

      $(htmlString, attributes) ⇒ collection [v1.0]

      Zepto(function($){ ... })

通过执行css选择器包装dom节点，创建元素或者从一个html片段来创建一个Zepto对象。

Zepto集合是一个类似数组的对象，它具有链式方法来操作它指向的dom，除了$对象上的直接方法外(如$.extend)，文档对象中的所有方法都是集合方法。

如果选择器中存在content参数(css选择器，dom，或者Zepto集合对象)，那么只在所给的节点背景下进行css选择器；这个功能有点像使用$(context).find(selector)。

可以通过一个html字符串片段来创建一个dom节点。也可以通过给定一组属性映射来创建节点。最快的创建但元素，使用<div> 或 <div/>形式。

当一个函数附加在 DOMContentLoaded 事件的处理流程中。如果页面已经加载完毕，这个方法将会立即被执行。

$('div')  //=> all DIV elements on the page

        $('#foo') //=> element with ID "foo"

        // create element:

        $("<p>Hello</p>") //=> the new P element

        // create element with attributes:

        $("<p />", { text:"Hello", id:"greeting", css:{color:'darkblue'} })

        //=> <p id=greeting style="color:darkblue">Hello</p>

        // execute callback when the page is ready:

        Zepto(function($){

        alert('Ready to Zepto!')

        })

不支持jQuery CSS 扩展，但是可以选的“selector”模块有限提供支持，如一些常用的伪选择器，可以与现有的代码或插件兼容执行。

相关文章