Clase 8- jQuery(parte 2) y guias de estilo

Transcript

1. Manejo de JQUERY Guias de estilo Desarrollo web con JAVASCRIPT nivel 1 Marcos Grillo
2. Manejo de JQUERY Guias de estilo 1 Manejo de JQUERY Manejo de JQUERY 2 Guias de estilo Guía de estilo de jquery Guía de estilo de Google
3. Manejo de JQUERY Guias de estilo Manejo de JQUERY Manejo de JQUERY Se puede copiar un elemento usando clone. 1 var x = $ ( "#id1 " ) . clone ( ) ;
4. Manejo de JQUERY Guias de estilo Manejo de JQUERY Manejo de JQUERY Se puede copiar un elemento usando clone. 1 var x = $ ( "#id1 " ) . clone ( ) ; Para mover un elemento simplemente se obtiene el objeto y se usa append o after o before o alguna de las funciones vistas. 1 var x = $ ( "#id1 " ) ; 2 $ ( "body" ) . append ( x ) ;
5. Manejo de JQUERY Guias de estilo Manejo de JQUERY Manejo de JQUERY Se puede copiar un elemento usando clone. 1 var x = $ ( "#id1 " ) . clone ( ) ; Para mover un elemento simplemente se obtiene el objeto y se usa append o after o before o alguna de las funciones vistas. 1 var x = $ ( "#id1 " ) ; 2 $ ( "body" ) . append ( x ) ; empty elimina a todos los hijos, remove elimina 1 item 1 $ ( "body" ) . empty ( ) ; 2 $ ( "#id1 " ) . remove ( ) ;
6. Manejo de JQUERY Guias de estilo Manejo de JQUERY Manejo de eventos para registrar clicks sobre objetos, se llama a la función click, es posible definir parametros para que se pasen al momento de llamar la función 1 $ ( "#id1 " ) . c l i c k ( function ( event ) { console . log ( " elemento clickeado " ) ; } ) ; 2 $ ( "#id1 " ) . c l i c k ( { param1 : "parametro" ,param2 : " parametro2" } , function ( event ) { 3 var param1 = event . data . param1 ; 4 var param2 = event . data . param2 ; 5 console . log ( "params : " + param1 + " , " + param2 ) ; 6 } ) ;
7. Manejo de JQUERY Guias de estilo Manejo de JQUERY Manejo de eventos Otras funciones para registrar eventos son: blur, change, click, dblclick, error, focus, focusin, focusout, keydown, keypress, keyup, load, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, resize, scroll, select, submit, unload
8. Manejo de JQUERY Guias de estilo Manejo de JQUERY Animaciones show, hide, toggle, slideDown, slideUp, slideToggle, fadeIn, fadeOut juegan con la variable display de css. 1 $ ( "#id1 " ) . toggle ( ) ; 2 $ ( "#id1 " ) . slideToggle ( ) ;
9. Manejo de JQUERY Guias de estilo Manejo de JQUERY Animaciones show, hide, toggle, slideDown, slideUp, slideToggle, fadeIn, fadeOut juegan con la variable display de css. 1 $ ( "#id1 " ) . toggle ( ) ; 2 $ ( "#id1 " ) . slideToggle ( ) ; Es posible definir tiempos para animaciones, por ejemplo: 1 jQuery . fx . speeds [ "medium- fast " ] = 300; 2 $ ( "#id1 " ) . fadeIn ( "medium- fast " , function ( ) { console . log ( " after fade " ) ; } )
10. Manejo de JQUERY Guias de estilo Manejo de JQUERY Animaciones show, hide, toggle, slideDown, slideUp, slideToggle, fadeIn, fadeOut juegan con la variable display de css. 1 $ ( "#id1 " ) . toggle ( ) ; 2 $ ( "#id1 " ) . slideToggle ( ) ; Es posible definir tiempos para animaciones, por ejemplo: 1 jQuery . fx . speeds [ "medium- fast " ] = 300; 2 $ ( "#id1 " ) . fadeIn ( "medium- fast " , function ( ) { console . log ( " after fade " ) ; } )
11. Manejo de JQUERY Guias de estilo Guía de estilo de jquery http://contribute.jquery.org/style-guide/js/
12. Manejo de JQUERY Guias de estilo Guía de estilo de google https://google-styleguide.googlecode.com/svn/trunk/- javascriptguide.xml