欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-03 18:34:13
...

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”模块有限提供支持,如一些常用的伪选择器,可以与现有的代码或插件兼容执行。