輕量級的移動架構--zepto.js

標籤：

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”模組有限提供支援，如一些常用的偽選取器，可以與現有的代碼或外掛程式相容執行。

輕量級的移動架構--zepto.js