The difference between jquery and Zepto (part)

1.width()/height()

• Zepto.js: Determined by the box model ( box-sizing )

JQuery: Ignore box model, always return width/height of content area (not included padding , border )

Official description of JQuery:

Note that would always .width() return the content width, regardless of the value of the CSS property box-sizing . As of JQuery 1.8, this could require retrieving the CSS width plus property and then box-sizing subtracting any potential border and padding on each element, the element has box-sizing: border-box . To avoid the penalty, use .css("width") rather than .width() .

The solution is to use it in JQuery .css(‘width‘) , not .width() .

This approach to jQuery is debatable, such as the following example, $(‘.box‘).css(‘height‘) still returning 20px , this is not a rip-off:

<style>   {    box-sizing: border-box;     padding: 10px;     height: 0;  } </style><div class= "box" ></div>

Getting the width of the border triangle

Suppose you draw a small triangle with the following HTML and CSS:

<div class= "Caret" ></div>

{  width: 0;   height: 0;   border-width: 0 20px 20px;   border-color: transparent transparent blue;   border-style: none dotted solid;}

• JQuery uses .width() and .css(‘width‘) both return 0 , and the height is the same;
• Zepto uses .width() return 40 , using .css(‘width‘) return 0px .

So, this scenario, JQuery uses .outerWidth() / .outerHeight() ; Zepto use .width() / .height() .

2.offset ()

• • Zepto.js: Return top , left , width ,height
  • JQuery: Back width ,height

$(htmlString, attributes)

• JQuery Documentation
• Zepto documentation)

DOM Operation Differences

{  var $list = $ (' <ul><li>jquery insert </li></ul> ', {    id: ') Insert-by-jquery '  });  $list. AppendTo ($ (' body '));});

The jQuery operation ul id will not be added; Zepto can be ul added on the id .

Event Trigger Differences

{  src: ' http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js ',  ID: ' Ui-jquery '}  {  console.log (' JQ script Loaded ');} );

loadthe handler function for the event is not executed when using JQuery, load and the handler for the event is executed when using Zepto.

The difference between jquery and Zepto (part)