Clase 7 Introducción a JQuery

funciones básicas de JQuery

Transcript

1. Introducción a JQUERY Guias de estilo Desarrollo web con JAVASCRIPT nivel 1 Marcos Grillo
2. Introducción a JQUERY Guias de estilo 1 Introducción a JQUERY Introducción a JQUERY 2 Guias de estilo Guía de estilo de jquery Guía de estilo de Google
3. Introducción a JQUERY Guias de estilo Introducción a JQUERY Introducción a JQUERY Javascript se puede comportar distinto en varios navegadores.
4. Introducción a JQUERY Guias de estilo Introducción a JQUERY Introducción a JQUERY Javascript se puede comportar distinto en varios navegadores. Es necesario manejar distintos códigos para tener el mismo funcionamiento.
5. Introducción a JQUERY Guias de estilo Introducción a JQUERY Introducción a JQUERY Javascript se puede comportar distinto en varios navegadores. Es necesario manejar distintos códigos para tener el mismo funcionamiento. Surge la librería jquery. Contiene diversas funciones y facilita el manejo de DOM, animaciones, AJAX y multiples navegadores.
6. Introducción a JQUERY Guias de estilo Introducción a JQUERY Introducción a JQUERY Javascript se puede comportar distinto en varios navegadores. Es necesario manejar distintos códigos para tener el mismo funcionamiento. Surge la librería jquery. Contiene diversas funciones y facilita el manejo de DOM, animaciones, AJAX y multiples navegadores. http://jquery.com/
7. Introducción a JQUERY Guias de estilo Introducción a JQUERY Introducción a JQUERY Javascript se puede comportar distinto en varios navegadores. Es necesario manejar distintos códigos para tener el mismo funcionamiento. Surge la librería jquery. Contiene diversas funciones y facilita el manejo de DOM, animaciones, AJAX y multiples navegadores. http://jquery.com/ La librería define una sola función llamada jQuery(), y la librería genera un shortcut para esa función: ’$’
8. Introducción a JQUERY Guias de estilo Introducción a JQUERY Introducción a JQUERY La función jQuery recibe como parámetro un selector de css, un elemento, un string html o una función
9. Introducción a JQUERY Guias de estilo Introducción a JQUERY Introducción a JQUERY La función jQuery recibe como parámetro un selector de css, un elemento, un string html o una función Lo que sea que se le pase va a devolver un objeto JQUERY sobre el cual se le puede llamar una función de la librería 1 var divs = $ ( " div " ) ; 2 var divs = jQuery ( div ) ; 3 var jobject = $ ( this ) ; 4 var img = $ ( "<img/> " , { src : url , css : { borderWidth : 5 } , c l i c k : handleClick } ) ; 5 $ ( function ( ) { console . log ( " Esto es como un onLoad" ) ; } ) ;
10. Introducción a JQUERY Guias de estilo Introducción a JQUERY Introducción a JQuery Funciones importantes en jQuery: 1 each ( function ( idx ) { return true ; } )
11. Introducción a JQUERY Guias de estilo Introducción a JQUERY Introducción a JQuery Funciones importantes en jQuery: 1 each ( function ( idx ) { return true ; } ) Si retorna false se cancela el ciclo (como si fuera un break), en this se tiene el objeto
12. Introducción a JQUERY Guias de estilo Introducción a JQUERY Introducción a JQuery Funciones importantes en jQuery: 1 each ( function ( idx ) { return true ; } ) Si retorna false se cancela el ciclo (como si fuera un break), en this se tiene el objeto 1 map( function ( idx ) { return this . id ; } )
13. Introducción a JQUERY Guias de estilo Introducción a JQUERY Introducción a JQuery Funciones importantes en jQuery: 1 each ( function ( idx ) { return true ; } ) Si retorna false se cancela el ciclo (como si fuera un break), en this se tiene el objeto 1 map( function ( idx ) { return this . id ; } ) Hace un append de los elementos devueltos en cada iteración.
14. Introducción a JQUERY Guias de estilo Introducción a JQUERY Introducción a JQuery Se usa attr para obtener o modificar atributos html, css para obtener o modificar los atributos css y addClass y removeClass para agregar y remover clases 1 $ ( "img" ) . attr ( " src " , "img2 . gif " ) ; 2 $ ( "img" ) . attr ( { src : "img3 . gif " , al t : " Advertisement " } ) ; 3 $ ( "img" ) . attr ( " target " , function ( ) { i f ( this . host == " localhost " ) return " _self " ; return " _blank " ; } ) ; 1 $ ( "img" ) . css ( " font - variant " , " smallcaps " ) ; 1 $ ( "h1" ) . addClass ( " h i l i t e " ) ; 2 $ ( "p" ) . removeClass ( " h i l i t e " ) ;
15. Introducción a JQUERY Guias de estilo Introducción a JQUERY Introducción a JQuery En una forma se puede obtener o cambiar un valor usando val(). 1 $ ( " input : text " ) . val ( ) ; 2 $ ( " input : text " ) . val ( " I n v a l i d email " ) ;
16. Introducción a JQUERY Guias de estilo Introducción a JQUERY Introducción a JQuery Para modificar el dom se tiene: 1 $ ( target ) . method( content ) 2 3 append ( ) : Inserta content al f i n a l de target 4 prepend ( ) : Inserta content al principio de target 5 after ( ) : Inserta content antes de target 6 before ( ) : Inserta content antes de target 7 replaceWith ( ) : Reemplaza target por content
17. Introducción a JQUERY Guias de estilo Guía de estilo de jquery http://contribute.jquery.org/style-guide/js/
18. Introducción a JQUERY Guias de estilo Guía de estilo de google https://google-styleguide.googlecode.com/svn/trunk/- javascriptguide.xml