1. <table id="73vry"><tr id="73vry"><optgroup id="73vry"></optgroup></tr></table>

          2. <label id="73vry"><tr id="73vry"></tr></label>
              1. <meter id="73vry"><dfn id="73vry"></dfn></meter><rp id="73vry"><cite id="73vry"><menu id="73vry"></menu></cite></rp>

                Zepto是一個(gè)輕量級的針對現代高級瀏覽器的JavaScript庫, 它與jquery有著(zhù)類(lèi)似的api。 如果你會(huì )用jquery,那么你也會(huì )用zepto。

                設計的目的是提供jquery的類(lèi)似的APIs,但并不是100%覆蓋jquery為目的。zepto設計的目的是有一個(gè)5-10k的通用庫、下載并執行快、有一個(gè)熟悉通用的API,所以你能把你主要的精力放到應用開(kāi)發(fā)上。

                用一個(gè)script標簽引入Zepto到你的頁(yè)面的底部:

                ...
                    </body>
                    <script src=zepto.min.js></script>
                    </html>
                

                如果你需要兼容ie瀏覽器,你可以用回jquery。 需要注意ie10以后不再支持條件注釋(為了提高與HTML5 的可互操作性和兼容性,Internet Explorer 10 標準模式和Quirks 模式中刪除了對條件注釋的支持),因此,我們建議以下的document.write方法:

                <script>
                    document.write('<script src='
                    +
                    ('__proto__' in
                    {} ? 'zepto' :
                    'jquery') +
                    '.js><\/script>')
                    </script>
                

                目標平臺

                桌面瀏覽器

                移動(dòng)端瀏覽器

                需要注意的是Zepto的一些可選功能是專(zhuān)門(mén)針對移動(dòng)端瀏覽器的;因為它的最初目標在移動(dòng)端提供一個(gè)精簡(jiǎn)的類(lèi)似jquery的js庫。

                在瀏覽器上(Safari和Chrome)上開(kāi)發(fā)頁(yè)面應用或者使用PhoneGap構建基于html的web-view本地應用,使用Zepto是一個(gè)不錯的選擇。

                總之,除了ie瀏覽器外,Zepto希望在所有的現代瀏覽器中作為一種基礎環(huán)境來(lái)使用。

                手動(dòng)建立Zepto

                zepto.jszepto.min.js提供以上使用方式。 然而,為了更好的程序效果和自由性,可以在使用Zepto源碼構建Zepto.js和zepto.min.js的時(shí)候選擇模塊并作測試, 使用UglifyJS根據你的需要來(lái)生成(當服務(wù)端開(kāi)啟gzipped后,最精簡(jiǎn)的代碼)代碼。

                關(guān)于如何建立Zepto的the README,包含運行測試和補丁。.

                創(chuàng )建插件

                可以通過(guò)添加方法作為$.fn的屬性來(lái)寫(xiě)插件:

                ;(function($){
                    $.extend($.fn,
                    {
                    foo: function(){
                    // `this` refers to the current Zepto collection.
                    // When possible, return the Zepto collection to allow chaining.
                    return
                    this.html('bar')
                    }
                    })
                    })(Zepto)
                

                為了更好開(kāi)始開(kāi)發(fā)插件,先看下source of Zepto's core module,并確認讀過(guò)coding style guidelines


                核心方法

                $()

                $(selector, [context])   ? collection
                      $(<Zepto collection>)   ? same collection
                      $(<DOM nodes>)   ? collection
                      $(htmlString)   ? collection
                      $(htmlString, attributes)   ? collection v1.0+
                      Zepto(function($){ ... })  
                  

                通過(guò)執行css選擇器包裝dom節點(diǎn),創(chuàng )建元素或者從一個(gè)html片段來(lái)創(chuàng )建一個(gè)Zepto對象。

                Zepto集合是一個(gè)類(lèi)似數組的對象,它具有鏈式方法來(lái)操作它指向的dom,除了$對象上的直接方法外(如$.extend),文檔對象中的所有方法都是集合方法。

                如果選擇器中存在content參數(css選擇器,dom,或者Zepto集合對象),那么只在所給的節點(diǎn)背景下進(jìn)行css選擇器;這個(gè)功能有點(diǎn)像使用$(context).find(selector)。

                可以通過(guò)一個(gè)html字符串片段來(lái)創(chuàng )建一個(gè)dom節點(diǎn)。也可以通過(guò)給定一組屬性映射來(lái)創(chuàng )建節點(diǎn)。最快的創(chuàng )建但元素,使用<div><div/>形式。

                當一個(gè)函數附加在 DOMContentLoaded 事件的處理流程中。如果頁(yè)面已經(jīng)加載完畢,這個(gè)方法將會(huì )立即被執行。

                $('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”模塊有限提供支持,如一些常用的偽選擇器,可以與現有的代碼或插件兼容執行。

                $.camelCase v1.0+

                $.camelCase(string)   ? string
                  

                將一組字符串變成“駱駝”命名法的新字符串,如果該字符已經(jīng)是“駱駝”命名法,則不變化。

                $.camelCase('hello-there')
                        //=> "helloThere"
                        $.camelCase('helloThere')
                        //=> "helloThere"
                    

                $.contains v1.0+

                $.contains(parent, node)   ? boolean
                  

                檢查父節點(diǎn)是否包含給定的dom節點(diǎn),如果兩者相同,則返回 false。

                $.each

                $.each(collection, function(index, item){ ... })   ? collection
                  

                遍歷數組元素或以key-value值對方式遍歷對象?;卣{函數返回 false 時(shí)停止遍歷。

                $.each(['a',
                        'b',
                        'c'],
                        function(index,
                        item){
                        console.log('item %d is: %s',
                        index, item)
                        })
                
                        var hash = {
                        name:
                        'zepto.js',
                        size: 'micro'
                        }
                        $.each(hash,
                        function(key,
                        value){
                        console.log('%s: %s',
                        key, value)
                        })
                    

                $.extend

                $.extend(target, [source, [source2, ...]])   ? target
                      $.extend(true, target, [source, ...])   ? target v1.0+
                  

                通過(guò)源對象擴展目標對象的屬性,源對象屬性將覆蓋目標對象屬性。

                默認情況下為,復制為淺復制。如果第一個(gè)參數為true表示深度復制。

                var target
                        = { one:
                        'patridge' },
                        source = {
                        two: 'turtle doves'
                        }
                
                        $.extend(target,
                        source)
                        //=> { one: 'patridge',
                        //     two: 'turtle doves' }
                    

                $.fn

                Zepto.fn是一個(gè)對象,它擁有Zepto對象上所有可用的方法。如 addClass(), attr(),和其它方法。在這個(gè)對象添加一個(gè)方法,所有的Zepto對象上都能用到該方法。

                這里有一個(gè)實(shí)現 empty() 方法的例子:

                $.fn.empty
                          = function(){
                          return
                          this.each(function(){
                          this.innerHTML =
                          '' })
                          }
                      

                $.grep v1.0+

                $.grep(items, function(item){ ... })   ? array
                $.grep([1,2,3],
                        function(){
                        return item > 1
                });
                        //=>[2,3]
                    
                

                獲取一個(gè)新數組,新數組只包含回調函數中返回 ture 的數組項。

                $.inArray v1.0+

                $.inArray(element, array, [fromIndex])   ? number
                  

                搜索數組中指定值并返回它的索引(如果沒(méi)有找到則返回-1)。

                [fromIndex] 參數可選,表示從哪個(gè)索引值開(kāi)始向后查找。

                $.inArray("abc",["bcd","abc","edf","aaa"]);
                          //=>1
                
                          $.inArray("abc",["bcd","abc","edf","aaa"],1);
                          //=>1
                
                          $.inArray("abc",["bcd","abc","edf","aaa"],2);
                          //=>-1
                         

                $.isArray

                $.isArray(object)   ? boolean
                  

                如果object是array,則返回ture。

                $.isFunction

                $.isFunction(object)   ? boolean
                  

                如果object是function,則返回ture。

                $.isPlainObject v1.0+

                $.isPlainObject(object)   ? boolean
                  

                測試對象是否是純粹的對象(通過(guò) "{}" 或者 "new Object" 創(chuàng )建的),如果是,則返回true。

                $.isPlainObject({})
                        // => true
                        $.isPlainObject(new
                        Object) // => true
                        $.isPlainObject(new
                        Date) // => false
                        $.isPlainObject(window)
                        // => false
                    

                $.isWindow v1.0+

                $.isWindow(object)   ? boolean
                  

                確定參數是否為一個(gè)窗口(window對象),如果是則返回true。

                這在處理iframe時(shí)非常有用,因為每個(gè)iframe都有它們自己的window對象,使用常規方法obj==window校驗這些objects的時(shí)候會(huì )失敗。

                $.map

                $.map(collection, function(item, index){ ... })   ? collection
                  

                通過(guò)遍歷集合中的元素,通過(guò)函數返回一個(gè)新的數組,null and undefined 將被過(guò)濾掉。

                $.map([1,2,3,4,5],function(item,index){
                        if(item>1){return item*item;}
                }); 
                // =>[4, 9, 16, 25]
                
                $.map({"yao":1,"tai":2,"yang":3},function(item,index){
                    if(item>1){return item*item;}
                }); 
                // =>[4, 9]

                $.parseJSON v1.0+

                $.parseJSON(string)   ? object
                  

                類(lèi)似本地JSON.parse 方法,接受一個(gè)標準格式的 JSON 字符串,并返回解析后的 JavaScript 對象。

                $.trim v1.0+

                $.trim(string)   ? string
                  

                刪除字符串開(kāi)始和末尾的空白符。類(lèi)似String.prototype.trim()。

                $.type v1.0+

                $.type(object)   ? string
                  

                獲取JavaScript 對象的類(lèi)型??赡艿念?lèi)型有: null undefined boolean number string function array date regexp object error。

                對于其它對象,它只是簡(jiǎn)單報告為“object”,如果你想知道一個(gè)對象是否是一個(gè)javascript普通對象,使用 isPlainObject。

                add

                add(selector, [context])   ? self
                  

                添加元素到匹配的元素集合。如果content參數存在,只在content中進(jìn)行查找,否則在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>

                 

                addClass

                addClass(name)   ? self
                      addClass(function(index, oldClassName){ ... })   ? self
                  

                為每個(gè)匹配的元素添加指定的class類(lèi)名。多個(gè)class類(lèi)名通過(guò)空格分隔。

                after

                after(content)   ? self
                  

                在每個(gè)匹配的元素后插入內容。內容可以為html字符串,dom節點(diǎn),或者節點(diǎn)組成的數組。

                $('form label').after('<p>A note below the label</p>')
                    

                append

                append(content)   ? self
                  

                在每個(gè)匹配的元素末尾插入內容。內容可以為html字符串,dom節點(diǎn),或者節點(diǎn)組成的數組。

                $('ul').append('<li>new list item</li>')
                    

                appendTo

                appendTo(target)   ? self
                  

                將匹配的元素插入到目標元素的末尾(里面的后面)。這個(gè)有點(diǎn)像 append,但是插入的目標與其相反。

                $('<li>new list item</li>').appendTo('ul')
                    

                attr

                attr(name)   ? string
                      attr(name, value)   ? self
                      attr(name, function(index, oldValue){ ... })   ? self
                      attr({ name: value, name2: value2, ... })   ? self
                  

                讀取或設置dom的屬性。如果沒(méi)有給定value參數,則讀取Zepto對象第集合一個(gè)元素的屬性值。當給定了value參數。則設置Zepto對象集合中所有元素所有元素的屬性值。當value參數為null,那么這個(gè)屬性將被移除(類(lèi)似removeAttr),多個(gè)屬性能以通過(guò)對象值對的方式進(jìn)行設置。

                要讀取dom的屬性如 checkedselected, 使用 prop。

                var form =
                        $('form')
                        form.attr('action')
                        //=> read value
                        form.attr('action',
                        '/create') //=> set value
                        form.attr('action',
                        null) //=> remove attribute
                
                        // multiple attributes:
                        form.attr({
                        action:
                        '/create',
                        method: 'post'
                        })
                    

                before

                before(content)   ? self
                  

                在匹配每個(gè)元素的前面(外面)插入內容。內容可以為html字符串,dom節點(diǎn),或者節點(diǎn)組成的數組。

                $('table').before('<p>See the following table:</p>')
                    

                children

                children([selector])   ? collection
                  

                獲得每個(gè)匹配元素集合元素的直接子元素,如果selector存在,只返回符合css選擇器的元素。

                $('ol').children('*:nth-child(2n)')
                        //=> every other list item from every ordered list
                    

                clone v1.0+

                clone()   ? collection
                  

                通過(guò)深度克隆來(lái)復制集合中的所有元素。

                此方法不會(huì )有數據和事件處理程序復制到新的元素。這點(diǎn)和jquery中利用一個(gè)參數來(lái)確定是否復制數據和事件處理不相同。

                closest

                closest(selector, [context])   ? collection
                      closest(collection)   ? collection v1.0+
                      closest(element)   ? collection v1.0+
                  

                從元素本身開(kāi)始,逐級向上級元素匹配,并返回最先匹配selector的祖先元素。如果context節點(diǎn)參數存在。那么直考慮該節點(diǎn)的后代。這個(gè)方法與 parents(selector)有點(diǎn)相像,但他只返回最先匹配的祖先元素。

                 

                如果參數是一個(gè)Zepto對象集合或者一個(gè)元素,結果必須匹配給定的元素而不是選擇器。

                var input =
                        $('input[type=text]')
                        input.closest('form')
                    

                concat

                concat(nodes, [node2, ...])   ? self
                  

                添加元素到一個(gè)Zepto對象集合形成一個(gè)新數組。如果參數是一個(gè)數組,那么這個(gè)數組中的元素將會(huì )合并到Zepto對象集合中。

                這是一個(gè)Zepto提供的方法,不是jquey的API 。

                contents v1.0+

                contents()   ? collection
                  

                獲得每個(gè)匹配元素集合元素的子元素,包括文字和注釋節點(diǎn)。.contents()和.children()方法類(lèi)似,只不過(guò)前者包括文本節點(diǎn)以及jQuery對象中產(chǎn)生的HTML元素。

                css

                css(property)   ? value
                      css(property, value)   ? self
                      css({ property: value, property2: value2, ... })   ? self
                  

                讀取或設置dom元素的css屬性。當value參數不存在的時(shí)候,返回Zepto對象集合中第一個(gè)元素的css屬性。當value參數存在時(shí),設置Zepto對象集合中每一個(gè)元素的對應css屬性。多條css屬性可以利用對象值對的方式進(jìn)行設置。

                當value為空(空字符串,nullundefined),那個(gè)css屬性將會(huì )被移出。當value參數為一個(gè)無(wú)單位的數字,如果該css屬性需要單位,“px”將會(huì )自動(dòng)添加到該屬性上。

                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 })
                    

                data

                data(name)   ? value
                      data(name, value)   ? self
                  

                讀取或寫(xiě)入dom的 data-* 屬性。行為有點(diǎn)像 attr ,但是屬性名稱(chēng)前面加上 data-。

                當讀取屬性值時(shí),會(huì )有下列轉換:v1.0+

                • “true”, “false”, and “null” 被轉換為相應的類(lèi)型;
                • 數字值轉換為實(shí)際的數字類(lèi)型;
                • JSON值將會(huì )被解析,如果它是有效的JSON;
                • 其它的一切作為字符串返回。

                  Zepto 基本實(shí)現`data()`只能存儲字符串。如果你要存儲任意對象,請引入可選的“data”模塊到你構建的Zepto中。

                each

                each(function(index, item){ ... })   ? self
                  

                遍歷一個(gè)Zepto集合對象,為每一個(gè)匹配元素執行一個(gè)函數。this關(guān)鍵字指向當前item(作為函數的第二個(gè)參數傳遞)。如果函數返回 false,遍歷結束。

                $('form input').each(function(index){
                        console.log('input %d is: %o',
                        index, this)
                        })
                    

                empty

                empty()   ? self
                  

                從Zepto對象集合中移除所有的dom子節點(diǎn)。

                eq

                eq(index)   ? collection
                  

                從當前Zepto對象集合中獲取給定索引號的元素。

                $('li').eq(0)
                        //=> only the first list item
                        $('li').eq(-1)
                        //=> only the last list item
                    

                filter

                filter(selector)   ? collection
                      filter(function(index){ ... })   ? collection v1.0+
                  

                過(guò)濾Zepto集合對象,返回的Zepto集合對象里面的項滿(mǎn)足參數中的css選擇器。如果參數為一個(gè)函數,函數返回有實(shí)際值得時(shí)候,元素才會(huì )被返回。在函數中, this 關(guān)鍵字指向當前的元素。

                與此相反的功能,查看not.

                find

                find(selector)   ? collection
                      find(collection)   ? collection v1.0+
                      find(element)   ? collection v1.0+
                  

                獲得當前Zepto集合對象內查找符合css選擇器的每個(gè)元素的后代。

                如果參數為Zepto集合對象或者元素,過(guò)濾它們,只有當它們在當前Zepto集合對象中時(shí),才回被返回。

                var form =
                        $('#myform')
                        form.find('input, select')
                    

                first

                first()   ? collection
                  

                獲取當前Zepto對象集合中的第一個(gè)元素。

                $('form').first()
                    

                forEach

                forEach(function(item, index, array){ ... }, [context])  
                  

                遍歷當前Zepto集合對象的買(mǎi)個(gè)元素,有點(diǎn)類(lèi)似 each,但是遍歷函數的參數不一樣,當函數返回 false 的時(shí)候,遍歷不會(huì )停止。

                這是一個(gè)Zepto提供的方法,不是jquery的API。

                get

                get()   ? array
                      get(index)   ? DOM node
                  

                從當前Zepto對象集合中獲取所有元素或單個(gè)元素。當index參數不存在的時(shí)候,以普通數組的方式返回所有的元素。當指定index時(shí),只返回該置的元素。這點(diǎn)與與eq不同,該方法返回的不是Zepto集合對象。

                var elements =
                        $('h2')
                        elements.get()
                        //=> get all headings as an array
                        elements.get(0)
                        //=> get first heading node
                    

                has v1.0+

                has(selector)   ? collection
                      has(node)   ? collection
                  

                判斷當前Zepto對象集合的子元素是否有符合選擇器的元素,或者是否包含指定的dom節點(diǎn),如果有,則返回新的Zepto集合對象,該對象過(guò)濾掉不含有選擇器匹配元素或者不含有指定dom節點(diǎn)的對象。

                $('ol > li').has('a[href]')
                        //=> get only LI elements that contain links
                    

                hasClass

                hasClass(name)   ? boolean
                  

                檢查Zepto對象集合中是否有元素含有指定的class。

                <ul>    
                    <li>list item 1</li>    
                    <li class="yaotaiyang">list item 2</li>    
                    <li>list item 3</li>  
                </ul>  
                <p>a paragraph</p>
                
                <script type="text/javascript">
                	$("li").hasClass("yaotaiyang");
                	//=> true
                </script>

                height

                height()   ? number
                      height(value)   ? self
                      height(function(index, oldHeight){ ... })   ? self
                  

                獲取Zepto對象集合中第一個(gè)元素的高度;或者設置Zepto對象集合中所有元素的高度。

                $('#foo').height()
                        // => 123
                        $(window).height()
                        // => 838 (viewport height)
                        $(document).height()
                        // => 22302
                    

                hide

                hide()   ? self
                  

                通過(guò)設置css的屬性displaynone來(lái)將Zepto對象集合中的元素隱藏。

                Hide elements in this collection by setting their display CSS property to none.

                html

                html()   ? string
                      html(content)   ? self
                      html(function(index, oldHtml){ ... })   ? self
                  

                獲取或設置Zepto對象集合中元素的HTML內容。當content參數沒(méi)有給定時(shí),返回IZepto對象集合中第一個(gè)元素的innerHtm。當content參數給定時(shí)。用其替換Zepto對象集合中每個(gè)元素的content。content可以是append中描述的所有類(lèi)型。

                // autolink everything that looks like a Twitter username
                        $('.comment p').html(function(idx,
                        oldHtml){
                        return
                        oldHtml.replace(/(^|\W)@(\w{1,15})/g,
                        '$1@<a )
                        })
                    

                index

                index([element])   ? number

                獲取一個(gè)元素的位置。當elemen參數沒(méi)有給出時(shí),返回當前元素在兄弟節點(diǎn)中的位置。當element參數給出時(shí),返回它在當前Zepto對象集合中的位置。如果沒(méi)有該元素,則返回-1。

                $('li:nth-child(2)').index()
                        //=> 1
                    

                indexOf

                indexOf(element, [fromIndex])   ? number
                  

                在當前Zepto中獲取一個(gè)元素的位置。如果formindex參數給出,從該位置往后查找,返回基于0的位置,如果沒(méi)找到,則返回-1。index 方法是基于這個(gè)方法實(shí)現的。

                這是一個(gè)Zepto的方法,不是jquer的api。

                insertAfter

                insertAfter(target)   ? self

                插入Zepto對象集合中的元素到指定的每個(gè)元素后面的dom中。這個(gè)有點(diǎn)像 after,但是使用方式相反。

                $('<p>Emphasis mine.</p>').insertAfter('blockquote')
                    

                insertBefore

                insertBefore(target)   ? self

                插入Zepto對象集合中的元素到指定的每個(gè)元素前面的dom中。這個(gè)有點(diǎn)像 before,但是使用方式相反。

                $('<p>See the following table:</p>').insertBefore('table')
                    

                is

                is(selector)   ? boolean
                  

                判斷當前Zepto元素集合中的第一個(gè)元素是否符css選擇器。對于基礎支持jquery的非標準選擇器類(lèi)似: :visible包含在可選的“selector”模塊中。

                jQuery CSS extensions 不被支持。 選擇“selector”模塊僅僅能支持有限幾個(gè)最常用的方式。

                last

                last()   ? collection

                獲取Zepto集合對象中最后一個(gè)元素。

                $('li').last()
                    

                map

                map(function(index, item){ ... })   ? collection 

                遍歷Zepto對象集合中的所有元素。通過(guò)遍歷函數返回值形成一個(gè)新的集合對象。在遍歷函數中this關(guān)鍵之指向當前循環(huán)的item(遍歷函數中的第二個(gè)參數)。遍歷中返回 nullundefined,遍歷將被打斷。

                // get text contents of all elements in collection
                        elements.map(function(){
                        return
                        $(this).text()
                        }).get().join(', ')
                    

                next

                next()   ? collection
                      next(selector)   ? collection v1.0+

                獲取Zepto對象集合中每一個(gè)元素的下一個(gè)兄弟節點(diǎn)(可以選擇性的帶上過(guò)濾選擇器)。

                $('dl dt').next()
                        //=> the DD elements
                    

                not

                not(selector)   ? collection
                      not(collection)   ? collection
                      not(function(index){ ... })   ? collection
                  

                過(guò)濾當前Zepto對象集合,獲取一個(gè)新的Zepto對象集合,它里面的元素不能匹配css選擇器。如果另一個(gè)參數為Zepto集合對象,那么返回的新Zepto對象中的元素都不包含在該參數對象中。如果參數是一個(gè)函數。僅僅包含函數執行為false值得時(shí)候的元素,函數的 this 關(guān)鍵字指向當前循環(huán)元素。

                與它相反的功能,查看 filter.

                offset

                offset()   ? object
                      offset(coordinates)   ? self v1.0+
                      offset(function(index, oldOffset){ ... })   ? self v1.0+
                  

                獲得當前元素相對于document的位置。返回一個(gè)對象含有: top, left, widthheight

                當給定一個(gè)對象屬性lefttop使用這些值來(lái)相對于document對每一個(gè)元素進(jìn)行定位。

                offsetParent v1.0+

                offsetParent()   ? collection
                  

                找到第一個(gè)定位過(guò)的祖先元素,在ccs中意味著(zhù)它的position 值為“relative”, “absolute” or “fixed”

                parent

                parent([selector])   ? collection

                獲取Zepto對象集合中每個(gè)元素的直接父元素。如果css選擇器參數給出。過(guò)濾出符合條件的元素。

                parents

                parents([selector])   ? collection

                獲取Zepto對象集合每個(gè)元素所有的祖先元素。如果css選擇器參數給出,過(guò)濾出符合條件的元素。

                如果想獲取直接父級元素,使用 parent。如果只想獲取到第一個(gè)符合css選擇器的元素,使用closest。

                $('h1').parents()
                        //=> [<div#container>, <body>, <html>]
                    

                pluck

                pluck(property)   ? array
                  

                獲取Zepto對象集合中每一個(gè)元素的屬性值。返回值為 nullundefined值得過(guò)濾掉。

                $('body > *').pluck('nodeName')
                        // => ["DIV", "SCRIPT"]
                
                        // implementation of Zepto's `next` method
                        $.fn.next
                        = function(){
                        return
                        $(this.pluck('nextElementSibling'))
                        }
                    

                這是一個(gè)Zepto的方法,不是jquery的api

                position v1.0+

                position()   ? object
                  

                獲取Zepto對象集合中第一個(gè)元素的位置。相對于 offsetParent。當絕對定位的一個(gè)素靠近另一個(gè)元素的時(shí)候,這個(gè)方法是有用的。

                返回一個(gè)的對象有這些屬性:top, left。

                var pos =
                        element.position()
                
                        // position a tooltip relative to the element
                        $('#tooltip').css({
                        position:
                        'absolute',
                        top:
                        pos.top -
                        30,
                        left:
                        pos.left
                        })
                    

                prepend

                prepend(content)   ? self
                  

                將參數內容插入到每個(gè)匹配元素的前面(元素內部)。插入d的元素可以試html字符串片段,一個(gè)dom節點(diǎn),或者一個(gè)節點(diǎn)的數組。

                $('ul').prepend('<li>first list item</li>')
                    

                prependTo

                prependTo(target)   ? self
                  

                將所有元素插入到目標前面(元素內)。這有點(diǎn)像prepend,但是是相反的方式。

                $('<li>first list item</li>').prependTo('ul')
                    

                prev

                prev()   ? collection
                      prev(selector)   ? collection v1.0+

                獲取Zepto對象集合中每一個(gè)元素的前一個(gè)兄弟節點(diǎn),通過(guò)選擇器來(lái)進(jìn)行過(guò)濾。

                prop v1.0+

                prop(name)   ? value
                      prop(name, value)   ? self
                      prop(name, function(index, oldValue){ ... })   ? self
                  

                讀取或設置dom元素的屬性值。它在讀取屬性值的情況下優(yōu)先于 attr,因為這些屬性值會(huì )因為用戶(hù)的交互發(fā)生改變,如checked and selected。

                <input class="taiyang" id="check1" type="checkbox" checked="checked">
                <input class="yaotaiyang" id="check2" type="checkbox"> <script type="text/javascript"> $("#check1").attr("checked"); //=> "checked" $("#check1").prop("checked"); //=> "true" $("#check2").attr("checked"); //=> "false" $("#check2").prop("checked"); //=> "false" $("input[type='checkbox']").prop("type",function(index,oldvalue){ console.log(index+"|"+oldvalue); }); //=> 0|checkbox //=> 1|checkbox $("input[type='checkbox']").prop("className",function(index,oldvalue){ console.log(index+"|"+oldvalue); }); //=> 0|taiyang //=> 1|yaotaiyang </script>

                 

                push

                push(element, [element2, ...])   ? self
                  

                添加元素到當前Zepto對象的最后。

                這是一個(gè)zepto的方法,不是jquery的api

                ready

                ready(function($){ ... })   ? self

                添加一個(gè)事件偵聽(tīng)器,當頁(yè)面dom加載完畢 “DOMContentLoaded” 事件觸發(fā)時(shí)觸發(fā)。建議使用 $()來(lái)代替這種用法。

                reduce

                reduce(function(memo, item, index, array){ ... }, [initial])   ? value
                  

                Array.reduce有相同的用法,遍歷當前Zepto對象集合。memo是函數上次的返回值。迭代進(jìn)行遍歷。

                這是一個(gè)zepto的方法,不是jquery的api

                remove

                remove()   ? self
                  

                移出當前Zepto對象中的元素。有效的從dom中移除。

                removeAttr

                removeAttr(name)   ? self
                  

                移動(dòng)當前Zepto對象集合中所有元素的指定屬性。

                removeClass

                removeClass([name])   ? self
                      removeClass(function(index, oldClassName){ ... })   ? self
                  

                移動(dòng)當前Zepto對象集合中所有元素的指定class。如果name參數未給出。將移出所有的class。多個(gè)class參數名稱(chēng)可以利用空格分隔。下例移除了兩個(gè)class。

                <input class="taiyang yueliang" id="check1" type="checkbox" checked="checked">
                <input class="yaotaiyang" id="check2" type="checkbox"> <script type="text/javascript"> $("#check1").removeClass("taiyang yueliang") //=>[<input class id="check1" type="checkbox" checked="checked">] </script>

                replaceWith

                replaceWith(content)   ? self
                  

                用提供的內容替換所有匹配的元素。(包含元素本身)。content參數可以為 before中描述的類(lèi)型。

                scrollTop v1.0+

                scrollTop()   ? number
                  

                獲取頁(yè)面上的滾動(dòng)元素或者整個(gè)窗口已經(jīng)滾動(dòng)的像素值。

                show

                show()   ? self

                恢復Zepto對象集合中每個(gè)元素默認的“display”值。如果你用 hide將元素隱藏,用該屬性可以將其顯示。相當于干掉了display:none。

                siblings

                siblings([selector])   ? collection
                  

                獲取Zepto集合對象所有兄弟節點(diǎn)。如果css選擇器參數給出。過(guò)濾出符合選擇器的元素。

                size

                size()   ? number

                獲取Zepto對象集合中元素的數量。

                slice

                slice(start, [end])   ? array

                array中提取的方法。從start開(kāi)始,如果end 指出。提取不包含end位置的元素。

                text

                text()   ? string
                      text(content)   ? self
                  

                獲取或者設置所有Zepto對象的文本內容。當content參數未給出。返回當前Zepto對象集合中第一個(gè)元素的文本內容(包含子節點(diǎn)中的文本內容)。當content參數給出,使用它替換Zepto對象集合中所有元素的文本內容。它有待點(diǎn)似 html,與它不同的是它不能用來(lái)獲取或設置 HTML。

                toggle

                toggle([setting])   ? self

                顯示或隱藏匹配元素。如果 setting為true,相當于show 法。如果setting為false。相當于 hide方法。

                var input =
                        $('input[type=text]')
                        $('#too_long').toggle(input.val().length
                        > 140)
                    

                toggleClass

                toggleClass(names, [setting])   ? self
                      toggleClass(function(index, oldClassNames){ ... }, [setting])   ? self
                  

                在匹配的元素集合中的每個(gè)元素上添加或刪除一個(gè)或多個(gè)樣式類(lèi)。如果class的名稱(chēng)存在則刪除它,如果不存在,就添加它。如果 setting的值為真,這個(gè)功能類(lèi)似于 addClass,如果為假,這個(gè)功能類(lèi)似與 removeClass。

                unwrap

                unwrap()   ? self

                將匹配元素的父級元素刪除,保留自身(和兄弟元素,如果存在)在原來(lái)的位置。

                $(document.body).append('<div id=wrapper><p>Content</p></div>')
                        $('#wrapper p').unwrap().parents()
                        //=> [<body>, <html>]
                    

                val

                val()   ? string
                      val(value)   ? self
                      val(function(index, oldValue){ ... })   ? self
                  

                獲取或設置匹配元素的值。當value參數不存在。返回第一個(gè)元素的值。如果是<select multiple>標簽,則返回一個(gè)數組。

                width

                width()   ? number
                      width(value)   ? self
                      width(function(index, oldWidth){ ... })   ? self

                獲取Zepto對象集合中第一個(gè)元素的寬;或者設置Zepto對象集合所有元素的寬。

                $('#foo').width()
                        // => 123
                        $(window).width()
                        // => 768 (viewport width)
                        $(document).width()
                        // => 768 
                    

                wrap

                wrap(structure)   ? self
                      wrap(function(index){ ... })   ? self v1.0+
                  

                在每個(gè)匹配的元素外層包上一個(gè)html元素。structure參數可以是一個(gè)單獨的元素或者一些嵌套的元素。也可以是一個(gè)html字符串片段或者dom節點(diǎn)。還可以是一個(gè)生成用來(lái)包元素的回調函數,這個(gè)函數返回前兩種類(lèi)型的包裹片段。

                需要提醒的是:該方法對于dom中的節點(diǎn)有著(zhù)很好的支持。如果將wrap() 用在一個(gè)新的元素上,然后再將結果插入到document中,此時(shí)該方法無(wú)效。

                // wrap each button in a separate span:
                        $('.buttons a').wrap('<span>')
                
                        // wrap each code block in a div and pre:
                        $('code').wrap('<div class=highlight><pre /></div>')
                
                        // wrap all form inputs in a span with classname
                        // corresponding to input type:
                        $('input').wrap(function(index){
                        return '<span class=' +
                        this.type +
                        'field />'
                        })
                        //=> <span class=textfield><input type=text /></span>,
                        //   <span class=searchfield><input type=search /></span>
                
                        // WARNING: will not work as expected!
                        $('<em>broken</em>').wrap('<li>').appendTo(document.body)
                        // do this instead:
                        $('<em>better</em>').appendTo(document.body).wrap('<li>')
                    

                wrapAll

                wrapAll(structure)   ? self

                在所有匹配元素外面包一層HTML結構。

                // wrap all buttons in a single div:
                        $('a.button').wrap('<div id=buttons />')
                    

                wrapInner

                wrapInner(structure)   ? self
                      wrapInner(function(index){ ... })   ? self v1.0+
                  

                在匹配元素里的內容外包一層結構。

                    // wrap the contents of each navigation link in a span:
                        $('nav a').wrapInner('<span>')
                
                        // wrap the contents of each list item in a paragraph and emphasis:
                        $('ol li').wrapInner('<p><em /></p>')
                以下為原始html:
                          <div class="yaotaiyang">
                          <div class="taiyang">yao</div>
                          <div class="taiyang">yao</div>
                          </div>
                
                          通過(guò):$('.taiyang).wrapInner('<div class="new" />');
                
                          得到:
                          <div class="yaotaiyang">
                          <div class="taiyang"><div class="new">yao</div></div>
                          <div class="taiyang"><div class="new">yao</div></div>
                          </div>    

                檢測方法

                Detect module

                 

                該檢測方法可以在不同的環(huán)境中微調你的站點(diǎn)或者應用程序,并幫助你識別手機和平板;以及不同的瀏覽器和操作系統。

                // The following boolean flags are set to true if they apply,
                        // if not they're either set to `false` or `undefined`.
                        // We recommend accessing them with `!!` prefixed to coerce to a boolean. 
                
                        // general device type
                        $.os.phone
                        $.os.tablet
                
                        // specific OS
                        $.os.ios
                        $.os.android
                        $.os.webos
                        $.os.blackberry
                        $.os.bb10
                        $.os.rimtabletos
                
                        // specific device type
                        $.os.iphone
                        $.os.ipad
                        $.os.touchpad
                        $.os.kindle
                
                        // specific browser
                        $.browser.chrome
                        $.browser.firefox
                        $.browser.silk
                        $.browser.playbook
                
                        // Additionally, version information is available as well.
                        // Here's what's returned for an iPhone running iOS 6.1.
                        !!$.os.phone
                        // => true
                        !!$.os.iphone
                        // => true
                        !!$.os.ios
                        // => true
                        !!$.os.version
                        // => "6.1"
                        !!$.browser.version
                        // => "536.26"
                    

                事件處理

                $.Event

                $.Event(type, [properties])   ? event

                創(chuàng )建并初始化一個(gè)指定的dom事件。如果properties參數給出,使用它來(lái)擴展出新的事件對象。默認情況下,事件被設置為冒泡方式;這個(gè)可以通過(guò)設置bubblesfalse來(lái)關(guān)閉。

                初始化的功能可以使用 trigger來(lái)觸發(fā)。

                $.Event('mylib:change',
                        { bubbles: false
                        });
                    

                $.proxy v1.0+

                $.proxy(fn, context)   ? function
                      $.proxy(context, property)   ? function
                  

                接受一個(gè)函數,然后返回一個(gè)新函數,并且這個(gè)新函數始終保持了特定的上下文語(yǔ)境,新函數中this指向context參數。另外一種形式,原始的function是context對像的方法。

                var obj =
                        {name:
                        'Zepto'},
                        handler =
                        function(){
                        console.log("hello from + ",
                        this.name)
                        }
                
                        // ensures that the handler will be executed in the context of `obj`:
                        $(document).on('click',
                        $.proxy(handler,
                        obj));
                
                    var obj = {name: "yaotaiyang",
                		test: function() {
                			alert( this.name );      
                			$("#test").unbind("click", obj.test); 
                		}
                		};    
                $("#test").click( jQuery.proxy( obj, "test" ));
                        

                bind ????

                Deprecated, use on instead.

                bind(type, function(e){ ... })   ? self
                      bind({ type: handler, type2: handler2, ... })   ? self
                  

                為一個(gè)元素綁定一個(gè)處理事件。

                delegate ????

                Deprecated, use on instead.

                delegate(selector, type, function(e){ ... })   ? self
                      delegate(selector, { type: handler, type2: handler2, ... })   ? self
                  

                基于一組特定的根元素為所有選擇器匹配的元素附加一個(gè)處理事件,匹配的元素可能現在或將來(lái)才創(chuàng )建。

                die ????

                Deprecated, use off instead.

                die(type, function(e){ ... })   ? self
                      die({ type: handler, type2: handler2, ... })   ? self
                  

                刪除通過(guò) live 添加的事件。

                live ????

                Deprecated, use on instead.

                live(type, function(e){ ... })   ? self
                      live({ type: handler, type2: handler2, ... })   ? self

                類(lèi)似delegate,添加一個(gè)個(gè)事件處理器到符合目前選擇器的所有元素匹配,匹配的元素可能現在或將來(lái)才創(chuàng )建。

                off

                off(type, [selector], function(e){ ... })   ? self
                      off({ type: handler, type2: handler2, ... }, [selector])   ? self
                      off(type, [selector])   ? self
                      off()   ? self
                  

                移除通過(guò) on 注冊的事件(用bind或者用on注冊的事件)。如果沒(méi)有參數,將移出當前元素上所有的注冊事件。

                off(type, [selector], function(e){ ... }) ? self
                
                        如果selector存在,則相當于delegate。
                $("ul").on("click","li",function(){alert("yaotaiyang")});
                以上代碼相當于將li的事件代理到ul上。后續添加的li也能擁有以上方法。該事件可以通過(guò)undelegate來(lái)移除。
                $("ul").undelegate();
                也可用:$("ul").off();
                
                如果selector參數不存在。則相當于bind。
                $("li").on("click",function(){alert("yaotaiyang")});
                該事件可以通過(guò)unbind來(lái)移除。
                $("li").unbind("click");
                也可以用off()來(lái)移除:$("li").off();
                
                on方法繼集成bind和delegate方法。

                on

                on(type, [selector], function(e){ ... })   ? self
                      on({ type: handler, type2: handler2, ... }, [selector])   ? self
                  

                添加事件到Zepto對象集合上。多個(gè)事件可以通過(guò)空格的字符串方式添加?;蛘咭允录?lèi)型、函數對象的 方式。如果css選擇器給出,事件的對象滿(mǎn)足選擇器條件時(shí)。事件才會(huì )被觸發(fā)。

                事件處理程序在觸發(fā)事件元素或者css選擇器匹配的元素的上下文中執行(this指向觸發(fā)事件的元素)。

                當事件處理程序返回false, 或調用preventDefault(),瀏覽器的默認事件將會(huì )被阻止。

                var elem =
                        $('#content')
                        // observe all clicks inside #content:
                        elem.on('click',
                        function(e){
                        ... })
                        // observe clicks inside navigation links in #content
                        elem.on('click',
                        'nav a',
                        function(e){
                        ... })
                        // all clicks inside links in the document
                        $(document).on('click',
                        'a',
                        function(e){
                        ... })
                    
                on(type, [selector], function(e){ ... }) ? self
                
                        如果selector存在,則相當于delegate。
                $("ul").on("click","li",function(){alert("yaotaiyang")});
                以上代碼相當于將li的事件代理到ul上。后續添加的li也能擁有以上方法。該事件可以通過(guò)undelegate來(lái)移除。
                $("ul").undelegate();
                也可用:$("ul").off();
                
                如果selector參數不存在。則相當于bind。
                $("li").on("click",function(){alert("yaotaiyang")});
                該事件可以通過(guò)unbind來(lái)移除。
                $("li").unbind("click");
                也可以用off()來(lái)移除:$("li").off();
                
                on方法繼集成bind和delegate方法。

                one

                one(type, function(e){ ... })   ? self
                      one({ type: handler, type2: handler2, ... })   ? self
                  

                添加一個(gè)處理事件到元素。處理函數在每個(gè)元素上最多執行一次。

                trigger

                trigger(event, [data])  
                  

                在Zepto對象集合的元素上觸發(fā)指定的事件。事件可以是一個(gè)字符串,也可以是一個(gè) $.Event 對象。如果data參數存在,它會(huì )作為參數傳遞給事件函數。

                // add a handler for a custom event
                        $(document).on('mylib:change',
                        function(e,
                        from, to){
                        console.log('change on %o with data %s, %s',
                        e.target,
                        from, to)
                        })
                        // trigger the custom event
                        $(document.body).trigger('mylib:change',
                        ['one',
                        'two'])
                    

                Zepto僅僅支持在dom元素上觸發(fā)事件。

                triggerHandler

                triggerHandler(event, [data])   ? self

                trigger,它只觸發(fā)事件,但不冒泡。

                比如你再一個(gè)input上如果使用該方法。

                
                        $("input").triggerHandler('focus');
                        // 此時(shí)input上的focus事件觸發(fā),但是input不會(huì )聚焦
                		$("input").trigger('focus');
                        // 此時(shí)input上的focus事件觸發(fā),input聚焦

                unbind ????

                Deprecated, use off instead.

                unbind(type, function(e){ ... })   ? self
                      unbind({ type: handler, type2: handler2, ... })   ? self
                  

                移除通過(guò) bind 注冊的事件。

                undelegate ????

                Deprecated, use off instead.

                undelegate(selector, type, function(e){ ... })   ? self
                      undelegate(selector, { type: handler, type2: handler2, ... })   ? self

                移除通過(guò)delegate 注冊的事件。


                Ajax請求

                $.ajax

                $.ajax(options)   ? XMLHttpRequest 

                執行Ajax請求。請求地址可以是本地的或者跨域的,在支持的瀏覽器中通過(guò) HTTP access control或者通過(guò) JSONP來(lái)完成。

                參數:

                • type (默認: “GET”):請求方法 (“GET”, “POST”, or other)
                • url (默認: 當前地址):發(fā)送請求的地址
                • data (默認:none):發(fā)送到服務(wù)器的數據;如果是get請求,它會(huì )自動(dòng)被作為參數拼接到url上。非String對象將通過(guò) $.param 得到序列化字符串。
                • processData (默認: true): 對于非Get請求。是否自動(dòng)將 data 轉換為字符串。
                • contentType (默認: “application/x-www-form-urlencoded”): 發(fā)送信息至服務(wù)器時(shí)內容編碼類(lèi)型。 (這也可以通過(guò)設置headers headers)。通過(guò)設置 false 跳過(guò)設置默認值。
                • dataType (默認: none):預期服務(wù)器返回的數據類(lèi)型(“json”, “jsonp”, “xml”, “html”, or “text”)
                • timeout (默認: 0): 設置請求超時(shí)時(shí)間(毫秒),0表示不超時(shí)。
                • headers (默認:{}): 一個(gè)額外的"{鍵:值}"對映射到請求一起發(fā)送
                • async (默認: true):默認設置下,所有請求均為異步。如果需發(fā)送同步請求,請將此設置為 false。
                • global (默認: true):請求將觸發(fā)全局AJAX事件處理程序,設置為 false 將不會(huì )觸發(fā)全局 AJAX 事件。
                • context (默認: window): 這個(gè)對象用于設置Ajax相關(guān)回調函數的上下文(this指向)。
                • traditional (默認:false):激活傳統的方式通過(guò)$.param來(lái)得到序列化的 data。

                如果URL中含有 =?或者dataType是“jsonp”,這講求將會(huì )通過(guò)注入一個(gè) <script>標簽來(lái)代替使用 XMLHttpRequest (查看 JSONP)。此時(shí)對 contentType, dataType, headers有限制,async 不被支持。

                Ajax 回調函數

                你可以指定以下的回調函數,給出的執行順序:

                1. beforeSend(xhr, settings):請求發(fā)出前調用,它接收xhr對象和settings作為參數對象。如果它返回 false ,請求將被取消。

                2. success(data, status, xhr):請求成功之后調用。傳入返回后的數據,以及包含成功代碼的字符串。

                3. error(xhr, errorType, error):請求出錯時(shí)調用。 (超時(shí),解析錯誤,或者狀態(tài)碼不在HTTP 2xx)。

                4. complete(xhr, status):請求完成時(shí)調用,無(wú)論請求失敗或成功。

                Ajax 事件

                global: true時(shí)。在A(yíng)jax請求生命周期內,以下這些事件將被觸發(fā)。

                1. ajaxStart (global):如果沒(méi)有其他Ajax請求當前活躍將會(huì )被觸發(fā)。

                2. ajaxBeforeSend (data: xhr, options):再發(fā)送請求前,可以被取消。

                3. ajaxSend (data: xhr, options):像 ajaxBeforeSend,但不能取消。

                4. ajaxSuccess (data: xhr, options, data):當返回成功時(shí)。

                5. ajaxError (data: xhr, options, error):當有錯誤時(shí)。

                6. ajaxComplete (data: xhr, options):請求已經(jīng)完成后,無(wú)論請求是成功或者失敗。

                7. ajaxStop (global):如果這是最后一個(gè)活躍著(zhù)的Ajax請求,將會(huì )被觸發(fā)。

                默認情況下,Ajax事件在document對象上觸發(fā)。然而,如果請求的 context 是一個(gè)dom節點(diǎn),該事件會(huì )在此節點(diǎn)上觸發(fā)然后再dom中冒泡。唯一的例外是 ajaxStart & ajaxStop這兩個(gè)全局事件。

                $(document).on('ajaxBeforeSend',
                        function(e,
                        xhr, options){
                        // This gets fired for every Ajax request performed on the page.
                        // The xhr object and $.ajax() options are available for editing.
                        // Return false to cancel this request.
                        })
                
                        $.ajax({
                        type:
                        'GET',
                        url:
                        '/projects',
                        // data to be added to query string:
                        data: {
                        name: 'Zepto.js'
                        },
                        // type of data we are expecting in return:
                        dataType:
                        'json',
                        timeout: 300,
                        context:
                        $('body'),
                        success: function(data){
                        // Supposing this JSON payload was received:
                        //   {"project": {"id": 42, "html": "<div>..." }}
                        // append the HTML to context object.
                        this.append(data.project.html)
                        },
                        error:
                        function(xhr,
                        type){
                        alert('Ajax error!')
                        }
                        })
                
                        // post a JSON payload:
                        $.ajax({
                        type:
                        'POST',
                        url:
                        '/projects',
                        // post payload:
                        data:
                        JSON.stringify({
                        name: 'Zepto.js'
                        }),
                        contentType: 'application/json'
                        })
                    

                $.ajaxJSONP ????

                Deprecated, use $.ajax instead.

                $.ajaxJSONP(options)   ? mock XMLHttpRequest
                  

                執行JSONP跨域獲取數據。

                此方法相對 $.ajax 沒(méi)有優(yōu)勢,建議不要使用。

                $.ajaxSettings

                一個(gè)包含Ajax請求的默認設置的對象。大部分的設置在 $.ajax中已經(jīng)描述。以下設置為全局非常有用:

                Object containing the default settings for Ajax requests. Most settings are described in $.ajax. The ones that are useful when set globally are:

                • timeout (默認: 0):對Ajax請求設置一個(gè)非零的值指定一個(gè)默認的超時(shí)時(shí)間,以毫秒為單位。
                • global (默認: true):設置為false。以防止觸發(fā)Ajax事件。
                • xhr (默認:XMLHttpRequest factory):設置為一個(gè)函數,它返回XMLHttpRequest實(shí)例(或一個(gè)兼容的對象)
                • accepts: 從服務(wù)器請求的MIME類(lèi)型,指定dataType值:
                  • script: “text/javascript, application/javascript”
                  • json: “application/json”
                  • xml: “application/xml, text/xml”
                  • html: “text/html”
                  • text: “text/plain”

                $.get

                $.get(url, function(data, status, xhr){ ... })   ? XMLHttpRequest
                      $.get(url, [data], [function(data, status, xhr){ ... }], [dataType])   ? XMLHttpRequest v1.0+
                  

                執行一個(gè)Ajax GET請求。這是一個(gè) $.ajax的簡(jiǎn)寫(xiě)方式。

                $.get('/whatevs.html',
                        function(response){
                        $(document.body).append(response)
                        })
                    

                $.getJSON

                $.getJSON(url, function(data, status, xhr){ ... })   ? XMLHttpRequest
                      $.getJSON(url, [data], function(data, status, xhr){ ... })   ? XMLHttpRequest v1.0+
                  

                通過(guò) Ajax GET請求獲取JSON數據。這是一個(gè) $.ajax 的簡(jiǎn)寫(xiě)方式。

                $.getJSON('/awesome.json',
                        function(data){
                        console.log(data)
                        })
                
                        // fetch data from another domain with JSONP
                        $.getJSON('//example.com/awesome.json?callback=?',
                        function(remoteData){
                        console.log(remoteData)
                        })
                    

                $.param

                $.param(object, [shallow])   ? string
                      $.param(array)   ? string
                  

                創(chuàng )建一個(gè)序列化的數組或對象,適用于一個(gè)URL 地址查詢(xún)字符串或Ajax請求。如果shallow設置為true。嵌套對象不會(huì )被序列化,嵌套數組的值不會(huì )使用放括號在他們的key上。

                此外,還接受 serializeArray格式的數組,其中每個(gè)項都有 “name” 和 “value”屬性。

                Also accepts an array in serializeArray format, where each item has “name” and “value” properties.

                $.param({
                        foo: {
                        one: 1,
                        two: 2 }})
                        //=> "foo[one]=1&foo[two]=2)"
                
                        $.param({
                        ids:
                        [1,2,3]
                        })
                        //=> "ids[]=1&ids[]=2&ids[]=3"
                
                        $.param({
                        ids:
                        [1,2,3]
                        }, true)
                        //=> "ids=1&ids=2&ids=3"
                
                        $.param({
                        foo:
                        'bar',
                        nested: {
                        will: 'not be ignored'
                        }})
                        //=> "foo=bar&nested[will]=not+be+ignored"
                
                        $.param({
                        foo:
                        'bar',
                        nested: {
                        will: 'be ignored'
                        }}, true)
                        //=> "foo=bar&nested=[object+Object]"
                    

                $.post

                $.post(url, [data], function(data, status, xhr){ ... }, [dataType])   ? XMLHttpRequest
                  

                執行Ajax POST請求。這是一個(gè) $.ajax 的簡(jiǎn)寫(xiě)方式。

                $.post('/create',
                        { sample:
                        'payload' },
                        function(response){
                        // process response
                        })
                    

                data 參數可以是一個(gè)字符串:

                $.post('/create',
                        $('#some_form').serialize(),
                        function(response){
                        // ...
                        })
                    

                load

                load(url, function(data, status, xhr){ ... })   ? self
                  

                通過(guò)GET Ajax載入遠程 HTML 文件代碼并插入至 DOM 中。另外,一個(gè)css選擇器可以在url中指定,像這樣,可以使用匹配selector選擇器的HTML內容來(lái)更新集合。

                Set the html contents of the current collection to the result of a GET Ajax call to the given URL. Optionally, a CSS selector can be specified in the URL, like so, to use only the HTML content matching the selector for updating the collection:

                $('#some_element').load('/foo.html #bar')
                    

                當這種方法執行, 它將檢索 foo.html 頁(yè)面的內容,Zepto會(huì )獲取ID為bar元素的內容,并且插入到ID為 some_element 元素,而其他的被檢索到的元素將被廢棄。

                如果css選擇器不存在。將使用完整的返回文本。

                請注意,在沒(méi)有選擇器的情況下,任何javascript塊都會(huì )執行。如果帶上選擇器,匹配選擇器內的script將會(huì )被刪除。


                表單方法

                serialize

                serialize()   ? string
                  

                在A(yíng)jax post請求中將用作提交的表單元素的值編譯成 URL-encoded 字符串。

                serializeArray

                serializeArray()   ? array

                將用作提交的表單元素的值編譯成擁有name和value對象組成的數組。不能使用的表單元素,buttons,未選中的radio buttons/checkboxs 將會(huì )被跳過(guò)。結果不包含file inputs的數據。

                $('form').serializeArray()
                        //=> [{ name: 'size', value: 'micro' },
                        //    { name: 'name', value: 'Zepto' }]
                    

                submit

                submit()   ? self
                      submit(function(e){ ... })   ? self
                  

                為 "submit" 事件綁定一個(gè)處理函數,或者觸發(fā)元素上的 "submit" 事件。當參數function沒(méi)有給出時(shí),觸發(fā)當前表單“submit”事件,并且執行默認的提交表單行為,除非調用了 preventDefault()。

                當function參數給出時(shí),在當前元素上它簡(jiǎn)單得為其在“submit”事件綁定一個(gè)處理函數。

                 


                效果

                $.fx

                全局動(dòng)畫(huà)設置:

                • $.fx.off (在支持css transition 的瀏覽器中默認為false):設置true來(lái)禁止所有animate() transitions。

                • $.fx.speeds:用來(lái)設置動(dòng)畫(huà)時(shí)間的對象。

                  • _default (400 ms)
                  • fast (200 ms)
                  • slow (600 ms)

                   

                  改變現有值或者添加一個(gè)新屬性去影響使用一個(gè)字符串來(lái)設置時(shí)間的動(dòng)畫(huà)。

                  Change existing values or add new properties to affect animations that use a string for setting duration.

                animate

                animate(properties, [duration, [easing, [function(){ ... }]]])   ? self
                      animate(properties, { duration: msec, easing: type, complete: fn })   ? self
                      animate(animationName, { ... })   ? self
                  

                對當前Zepto集合對象中元素進(jìn)行css transition屬性平滑過(guò)渡。

                • properties: 一個(gè)對象,該對象包含了css動(dòng)畫(huà)的值,或者css幀動(dòng)畫(huà)的名稱(chēng)。
                • duration (默認 400):以毫秒為單位的時(shí)間,或者一個(gè)字符串。
                  • fast (200 ms)
                  • slow (600 ms)
                  • 任何$.fx.speeds自定義屬性
                • easing (默認 linear):指定動(dòng)畫(huà)的緩動(dòng)類(lèi)型,使用以下一個(gè):
                • complete:動(dòng)畫(huà)完成時(shí)的回調函數

                Zepto 還支持以下 CSS transform 屬性:

                • translate(X|Y|Z|3d)
                • rotate(X|Y|Z|3d)
                • scale(X|Y|Z)
                • matrix(3d)
                • perspective
                • skew(X|Y)

                如果duration參數為 0$.fx.off 為 true(在不支持css transitions的瀏覽器中默認為true),動(dòng)畫(huà)將不被執行;替代動(dòng)畫(huà)效果的目標位置會(huì )即刻生效。類(lèi)似的,如果指定的動(dòng)畫(huà)不是通過(guò)動(dòng)畫(huà)完成,而且動(dòng)畫(huà)的目標位置即可生效。這種情況下沒(méi)有動(dòng)畫(huà), complete方法也不會(huì )被調用。

                如果第一個(gè)參數是字符串而不是一個(gè)對象,它將被當作一個(gè)css關(guān)鍵幀動(dòng)畫(huà) CSS keyframe animation的名稱(chēng)。

                $("#some_element").animate({
                        opacity: 0.25,
                        left:
                        '50px',
                        color:
                        '#abcdef',
                        rotateZ:
                        '45deg',
                        translate3d: '0,10px,0'
                        }, 500,
                        'ease-out')
                    

                Zepto只使用css過(guò)渡效果的動(dòng)畫(huà)。jquery的easings不會(huì )支持。jquery的相對變化("=+10px") syntax 也不支持。請查看 list of animatable properties。瀏覽器的支持可能不同,所以一定要測試你所想要支持的瀏覽器。


                觸控

                Touch events

                “touch”模塊添加以下事件,可以 onoff。

                • tap —元素tap的時(shí)候觸發(fā)。
                • singleTap and doubleTap — 這一對事件可以用來(lái)檢測元素上的單擊和雙擊。(如果你不需要檢測單擊、雙擊,使用 tap 代替)。
                • longTap — 當一個(gè)元素被按住超過(guò)750ms觸發(fā)。
                • swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 當元素被劃過(guò)時(shí)觸發(fā)。(可選擇給定的方向)

                這些事件也是所有Zepto對象集合上的快捷方法。

                <style>.delete
                        { display:
                        none;
                        }</style>
                
                        <ul
                        id=items>
                        <li>List item 1 <span
                        class=delete>DELETE</span></li>
                        <li>List item 2 <span
                        class=delete>DELETE</span></li>
                        </ul>
                
                        <script>
                        // show delete buttons on swipe
                        $('#items li').swipe(function(){
                        $('.delete').hide()
                        $('.delete',
                        this).show()
                        })
                
                        // delete row on tapping delete button
                        $('.delete').tap(function(){
                        $(this).parent('li').remove()
                        })
                        </script>
                    
                久热香蕉在线视频免费,在线观看日本高清mv视频,久久精品伊人一区二区三区,国产人与动牲交