Zepto fue originalmente una biblioteca desarrollada para el terminal móvil y es una alternativa ligera a jQuery porque su API es similar a jQuery y el tamaño del archivo es más pequeño.
mismo
Zepto fue originalmente una biblioteca desarrollada para el terminal móvil y es una alternativa ligera a jQuery porque su API es similar a jQuery y el tamaño del archivo es más pequeño. La mayor ventaja de Zepto es su tamaño de archivo, que es solo más de 8k, que es el más pequeño en la biblioteca actual completamente funcional.Aunque no es grande, las herramientas proporcionadas por Zepto son suficientes para satisfacer las necesidades del programa de desarrollo. . La mayoría de las API y los métodos comúnmente utilizados en jQuery están disponibles en Zepto y hay algunos en Zepto que no están en jQuery. Además, debido a que la mayoría de las API de Zepto son compatibles con jQuery, es extremadamente fácil de usar.Si está familiarizado con jQuery, puede dominar Zepto fácilmente. Puede reutilizar muchos métodos en jQuery de la misma manera y puede encadenar métodos para obtener un código más conciso sin siquiera mirar su documentación.
diferente
1. Para los programas móviles, Zepto tiene algunos eventos táctiles básicos que se pueden usar para la interacción de la pantalla táctil (eventos de toque, eventos de deslizamiento). Zepto no es compatible con los navegadores IE. Este no es un problema entre navegadores causado por el desarrollador de Zepto, Thomas Fucks It. fue una ambigüedad, pero una decisión deliberada de reducir el tamaño del archivo, al igual que el equipo de jQuery dejó de admitir las versiones anteriores de IE (6 7 8) en la versión 2.0. Debido a que Zepto usa la sintaxis de jQuery, recomienda jQuery como alternativa a IE en su documentación. De esa manera, el programa aún puede ejecutarse en IE, mientras que otros navegadores pueden disfrutar de las ventajas de Zepto en el tamaño de archivo, pero las API de los dos no son totalmente compatibles, así que tenga cuidado al usar este método y haga suficientes pruebas.
2. La diferencia en la operación de Dom: jQuery no tendrá efecto al agregar id, pero Zepto sí tendrá efecto.
(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. La diferencia en la activación de eventos: al usar jQuery, el controlador del evento de carga no se ejecutará, al usar Zepto, se ejecutará el controlador del evento de carga.
(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. La diferencia entre la delegación de eventos
var $doc = $(document);
$doc.on('click', '.a', function () {
alert('a事件');
$(this).removeClass('a').addClass('b');
});
$doc.on('click', '.b', function () {
alert('b事件');
});En Zepto, cuando se hace clic en a, los contenidos de "a event" y "b event" aparecen alternativamente, lo que indica que aunque el evento delegado está en .a, también activa la delegación en .b. Pero en jQuery, solo el delegado anterior a .a se activará para mostrar el "evento a". En Zepto, todos los eventos de delegado de clic en el documento se colocan en una cola uno por uno. Al hacer clic, primero verifique si el elemento actual es .a, y ejecútelo si coincide, y luego verifique si es .b, y ejecute si coincide. En jQuery, se confían dos eventos de clic al documento y, después de hacer clic, se usa el selector para hacer coincidir y se ejecuta el evento confiado del elemento correspondiente.
5. La diferencia entre ancho () y alto ()
Zepto está determinado por el modelo de caja (box-sizing), use .width () para devolver el ancho asignado, use .css ('width') para devolver el resultado de agregar borde, etc., jQuery ignorará el modelo de caja, y siempre devuelva el ancho/alto del área de contenido (excluyendo relleno, borde).
6. La diferencia entre desplazamiento()
Zepto devuelve {arriba, izquierda, ancho, alto}; jQuery devuelve {ancho, alto}.
7. Zepto no puede obtener el ancho y el alto de los elementos ocultos, pero jQuery sí.
8. No hay un método de extensión definido para el prototipo en Zepto, pero jQuery lo tiene.
9. Cada método de Zepto solo puede atravesar matrices, no objetos JSON.
10. Zepto usa el método prop tanto como sea posible cuando opera los atributos seleccionados y marcados de dom, y tiene prioridad sobre attr cuando lee los valores de los atributos. Zepto no puede obtener la opción seleccionada del elemento seleccionado con jQuery $('opción [seleccionada]'), porque el atributo seleccionado no es un atributo estándar de css. $('option').not (function (){ return !this.selected }) debe usarse en su lugar.
11. Selectores no compatibles con Zepto
Escribir complementos con 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' })Se transfiere el articulo del blog jardin, autor: somos jovenes Las similitudes y diferencias entre jQuery y Zepto
https://www.cnblogs.com/colima/p/5289386.html