La diferencia entre zepto y jquery, los diferentes usos de zepto para 8 resúmenes

1.Los objetos Zepto no pueden personalizar eventos

Por ejemplo, ejecución: $({}).bind('cust', function(){});

Resultado: Error de tipo: El objeto no tiene el método 'addEventListener'

Solución. Cree un nodo como objeto de evento a partir del flujo de documentos:

Ejemplo: $('').bind('cust', function. () {});

2. Expresión del selector de Zepto: [nombre=valor] donde el valor debe estar entre comillas dobles "" o comillas simples ""

Por ejemplo, ejecutar: $('').bind('cust', function(){});

Por ejemplo, ejecutar: $('').bind('cust', function(){} );

p>

2. ('[data-userid=123123123]')

Resultado: Error: Error de sintaxis: Excepción DOM 12

Solución: $('[data-userid="123123123]"') o $("[data-userid=' 123123123']")

2-1. El selector de zepto no puede seleccionar $("div[name !=' abc']")"

2-2.zepto no puede usar el método similar a jq $('option[selected]') para obtener la opción seleccionada del elemento seleccionado porque el atributo seleccionado no es un atributo estándar Debido a que el atributo seleccionado no es un atributo estándar de CSS

Deberías usar $('option').not(function(){ return !this.selected })

Por ejemplo: jq:$ this.find('opción[seleccionado]').attr ('data-v') * 1

zepto:$this.find('opción') .not(function(){return !this .selected}).attr('data-v') * 1

Sin embargo, para obtener los elementos seleccionados con el atributo deshabilitado, puede usar $this. find("option:not(:disabled) "), porque deshabilitado es un atributo estándar

3. Zepto está escrito de acuerdo con los navegadores estándar, por lo que el método de tamaño de nodo solo proporciona ancho() y alto(). , omitiendo InnerWidth() y InnerHeight (), externalWidth(), InnerHeight() y InnerHeight(). InnerHeight(),outerWidth(),outerHeight()

Zepto.js: determinado por el tamaño del cuadro

jQery: ignora el tamaño del cuadro y siempre devuelve el ancho/alto del contenido área (excluyendo relleno y bordes). Utilice .css('width') en lugar de .width().

3-1. Obtén el ancho y alto del triángulo del borde

Supongamos que dibujas un pequeño triángulo usando el siguiente HTML y CSS:

.caret { ancho: 0; alto: 0; ancho del borde: 0 20px 20px; color del borde: azul transparente transparente; ninguno con puntos sólidos; p >jQuery usa .width() y .css('width') para devolver la misma altura;

Zepto usa .width() para devolver, .css('width') devuelve 0px.

Entonces, en este caso, jQuery usa .outerWidth() / .outerHeight(); Zepto usa .width() / .height() .

3-2.offset()

Zepto.js: Devuelve arriba, izquierda, ancho, alto

jQuery: Devuelve ancho, alto

3-3.Elementos ocultos

Zepto.js: No se puede obtener el ancho y el alto;

jQuery: Se puede obtener.

4. Cada método de Zepto solo puede atravesar matrices, no objetos JSON.

5. Descripción del parámetro del método animado de Zepto:

$("# some_element"). animar ({ opacidad: 0.25, izquierda: '50px', color: '#abcdef', '#abcdef'). color: '#abcdef', rotarZ: '45deg', traducir3d: '0,10px, 0' }, 500, 'ease-out')

$this_bd.animate({ height:iTthis_bd_h+'px',complete:siblingsUp() },700) ; function siblingsUp(){ $this_bd.siblings('.bd').animate({height:'0px'},50); };
 Notaremos que el completo de zepto se ejecutará primero antes. la animación animada, por lo que la función de devolución de llamada debe escribirse más tarde, por ejemplo:
$('.warter').animate({margin:'150px 0 0 -80px',opacity: '1', rotar:'-45deg'},800,'ease-in-out',function(){alert(1);});
6. El nombre de la función de devolución de llamada jsonp de zepto no puede ser Personalización
7. Diferencias en la operación DOM
código jq:
(function($) { $( function() { var $list = $(' 
 
inserción de jQuery
', { id: 'insertar por jquery' }); $list.appendTo($('body') }); );
 No se agregará la identificación en la operación ul de jQuery.  
Código Zepto:
Zepto(función($) { var $lista = $('
Inserción Zepto
', { id: 'insert-by-zepto' }); $ list.appendTo($('body'); });
Zepto puede agregar id a ul.
8. Diferencias de activación de eventos
código jq:
(function($) { $(function() { $script = $('