Zepto was originally a library developed for the mobile terminal and is a lightweight alternative to jQuery because its API is similar to jQuery and the file size is smaller.
same
Zepto was originally a library developed for the mobile terminal and is a lightweight alternative to jQuery because its API is similar to jQuery and the file size is smaller. The biggest advantage of Zepto is its file size, which is only more than 8k, which is the smallest one in the current fully functional library. Although it is not large, the tools provided by Zepto are sufficient to meet the needs of the development program. Most of the APIs and methods commonly used in jQuery are available in Zepto, and there are some in Zepto that are not in jQuery. In addition, because most of Zepto's APIs are compatible with jQuery, it is extremely easy to use. If you are familiar with jQuery, you can easily master Zepto. You can reuse many methods in jQuery in the same way, and you can chain methods together to get more concise code without even looking at its documentation.
different
1. For mobile programs, Zepto has some basic touch events that can be used for touch screen interaction (tap events, swipe events). Zepto does not support IE browsers. This is not a cross-browser problem caused by Zepto developer Thomas Fucks It was an ambiguity, but a deliberate decision to reduce the file size, just like the jQuery team stopped supporting the old versions of IE (6 7 8) in version 2.0. Because Zepto uses jQuery syntax, it recommends jQuery as a fallback on IE in its documentation. In that way, the program can still run in IE, while other browsers can enjoy the advantages of Zepto in file size, but the APIs of the two are not fully compatible, so be careful when using this method, and do sufficient test.
2. The difference in Dom operation: jQuery will not take effect when adding id, but Zepto will take effect.
(function($) {
$(function() {
var $insert = $('<p>jQuery 插入</p>', {
id: 'insert-by-jquery'
});
$insert.appendTo($('body'));
});
})(window.jQuery);
// <p>jQuery 插入<p>
Zepto(function($) {
var $insert = $('<p>Zepto 插入</p>', {
id: 'insert-by-zepto'
});
$insert.appendTo($('body'));
});
// <p id="insert-by-zepto">Zepto 插入</p>3. The difference in event triggering: when using jQuery, the handler of the load event will not be executed; when using Zepto, the handler of the load event will be executed.
(function($) {
$(function() {
$script = $('<script />', {
src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
id: 'ui-jquery'
});
$script.appendTo($('body'));
$script.on('load', function() {
console.log('jQ script loaded');
});
});
})(window.jQuery);
Zepto(function($) {
$script = $('<script />', {
src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
id: 'ui-zepto'
});
$script.appendTo($('body'));
$script.on('load', function() {
console.log('zepto script loaded');
});
});4. The difference between event delegation
var $doc = $(document);
$doc.on('click', '.a', function () {
alert('a事件');
$(this).removeClass('a').addClass('b');
});
$doc.on('click', '.b', function () {
alert('b事件');
});In Zepto, when a is clicked, the contents of "a event" and "b event" pop up in turn, indicating that although the event delegate is on .a, it also triggers the delegation on .b. But in jQuery, only the "a event" will be triggered by the delegate above .a. In Zepto, all click delegate events on the document are put into a queue one by one. When clicking, first check whether the current element is .a, and execute it if it matches, and then check whether it is .b, and execute it if it matches. In jQuery, two click events are entrusted to the document, and after clicking, the selector is used to match, and the entrusted event of the corresponding element is executed.
5. The difference between width () and height ()
Zepto is determined by the box model (box-sizing), use .width () to return the assigned width, use .css ('width') to return the result of adding border, etc.; jQuery will ignore the box model, and always return the width/height of the content area (excluding padding, border).
6. The difference between offset()
Zepto returns {top,left,width,height}; jQuery returns {width,height}.
7. Zepto cannot get the width and height of hidden elements, but jQuery can.
8. There is no extend method defined for the prototype in Zepto, but jQuery has it.
9. Zepto's each method can only traverse arrays, not JSON objects.
10. Zepto uses the prop method as much as possible when operating the selected and checked attributes of dom, and takes precedence over attr when reading attribute values. Zepto can't get the selected option of the select element with jQuery-like $('option [selected]'), because the selected attribute is not a standard attribute of css. $('option').not (function (){ return !this.selected }) should be used instead.
11. Selectors not supported by Zepto
Write plugins with jQuery
;(function($){
$.fn.extend({
highLight: function(options){
if(!isValid(options)){
return this;
}
var opts = $.extend({}, defaults, options);
return this.each(function(){
var $this = $(this);
$this.css({
backgroundColor: opts.background,
color: opts.color
})
var markup = $this.html();
markup = $.fn.highLight.format(markup);
$this.html(markup);
})
}
});
var defaults = {
color: '#fff',
background: '#000'
};
$.fn.highLight.format=function(str){
return '<strong>'+str+'</strong>'
}
function isValid(options){
return !options || (options && typeof options === 'object') ? true: false
}
})(jQuery)
// 调用
$.fn.highLight.format = function(txt){
return '<i>'+txt+'</i>'
}
$('p').highLight({ color: 'red', background: '#ccc' })The article is transferred from the blog garden, author: we are young The similarities and differences between jQuery and Zepto
https://www.cnblogs.com/colima/p/5289386.html