zepto framework

I. Overview of zepto framework

1. Zepto is a lightweight for modern advanced Browser JavaScript
2. Library compatibility:
• Zepto.js is specifically launched for modern smartphone browsers JavaScript framework
• Some of Zepto’s optional features are specifically for mobile browsers, because the original goal is to provide a streamlined jQuery alternative specifically for mobile websites
3. Advantages:
• Smaller JavaScript framework
• Fully compatible with jQuery syntax
• Simplify a large number of browser compatibility codes, Lighter
• Encapsulates mobile terminal gestures
4. Download:
< li>
Click Download to open the download page on the www.zeptojs.cn website
• The downloaded zepto file only needs to include core, Modules such as Ajax, Event, Form, IE. Which does not include Effects and Touch modules. Therefore, when using these features of zepto in the future, you need to add related plug-ins or re-download the full version of zepto
5. Introduction:
6. CDN acceleration service: http:// cdn.uedsc.com/zepto/ [CDN Content Delivery Network]

Second, the difference between zepto and jQuery

1. For mobile applications, Zepto has some basic touch events that can be used for touch screen interaction. Zepto does not support IE browser
2. The difference in Dom operation: jQuery will not take effect when adding id, but Zepto will take effect
3. The difference in event triggering: load when using jQuery The event processing function will not be executed; the load event processing function will be executed when Zepto is used
4. The difference of event delegation: In Zepto, all the delegate events on the selector are sequentially Put it in a queue, and delegate to multiple independent events in jquery
5. The difference between width() and height()

   < /li>

   • Zepto is determined by the box model (box-sizing). Use .width() to return the assigned width, and .css(‘width’) to return the result that includes borders, etc.
   • jQuery will ignore the box model and always return the width/height of the content area (excluding padding and border)
6. The difference between offset()

< ul>

7. Zepto returns {top,left,width,height}
8. jQuery returns {width,height}
9. Zepto cannot get the width and height of hidden elements, jQuery can
10. Zepto does not define an extend method for prototypes And jQuery has
11. Zepto’s each method can only traverse arrays, not JSON objects

< /ol>

Three, zepto and jQuery same methods or attributes

• $(selector, [context])
• $()
• $()
• $(htmlString)
• < span>$(htmlString, attributes)
• Zepto(function($){ … })

  < /li>



Four, zepto unique special effects

• CSS transform
• translate(X|Y |Z|3d)
• rotate(X|Y|Z|3d)
• scale(X|Y|Z)
• skew(X|Y )
• The tap event is similar to the click event on the PC side, it means that a finger touches an element will be triggered
• Touch
• tap: Triggered when the element is touched
• singleTap and doubleTap: This pair of events can be used to detect clicks and doubles on elements

li>

• longTap: Triggered when an element is pressed for more than 750ms
• swipe, swipeLeft, swipeRight, swipeUp , SwipeDown: trigger when the element is swiped

V. Complete Zepto file

• The default core file Zepto downloaded from www.zeptojs.cn cannot be used here. Why?
• The default zepto file does not include Effects and Touch modules
• < div> By visiting the github address: https://github.com/madrobby/zepto to download the required complete zepto file