SlideShare una empresa de Scribd logo
1 de 49
Descargar para leer sin conexión
Ing. César Eduardo Suárez Trujillo
http://www.the5thwave.com/
¿QUE ES JQUERY?

jQuery es un framework de JavaScript, creado inicialmente
por John Resig. Este framework permite una fácil
manipulacion de los documentos HTML y de la estructura DOM
(Document object model).
OTRAS ALTERNATIVAS
Existen muchos otros frameworks para javascript en el mundo
como son:
• Mootools (usado en Joomla)
• Prototype (usado por magento)
• Yui(Yahoo! UI Library)
• Dojo
• Rico
¿POR QUE JQUERY?
•   Es usado por el 55% de los sitios web dentro del listado de los
    10.000 más visitados en el mundo.
•   Es gratuito, de código abierto y bajo licencia MIT o GNU General
    Public License
•   Microsoft y Nokia lo integran en sus plataformas de desarrollo
•   Constantes actualizaciones
•   Tiene dos proyectos relacionados llamados jQueryui y jQuery
    Mobile.
•   Write Less, Do More (frase de batalla)
•   appendTo – empresa dedicada a jQuery
•   Mucho plugins en la web
1      PRIMERO PASOS

Primero debemos saber que existen varias empresas que
hospedan las librerias de jQuery para nuestro uso, tanto en la
versión completa, como simplificada.
Google
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.
js
Microsoft
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js
jQuery CDN
http://code.jquery.com/jquery-1.7.2.min.js
Teniendo la ruta del framework, simplemente lo vinculamos a
nuestra Pagina (ya recuerda usar el estándar de HTML5):
 <!DOCTYPE html>
 <html>
     <head>
     <meta charset="utf-8">
     <title>{titulo}</title>
     <script type=’text/javascript’ src=‘{ruta}/jQuery.js¡’>
     </script>
     </head>
     <body>
           <p>
           jQuery se ha cargado.
           </p>
     </body>
 </html>
<!DOCTYPE html>
<html>
      <head>
      <meta charset="utf-8">
      <title>{titulo}</title>
      <script type=’text/javascript’ src=‘{ruta}/jQuery.js¡’>
      <script>
            $(document).ready(
            function() {
                 $(‘p’).text(‘mama estoy triunfando!’);
            }
);</script>

      </script>
      </head>
      <body>
            <p>
            jQuery se ha cargado.
            </p>
      </body>
</html>
Como funciona:

1. La etiqueta $ es equivalente a colocar jQuery, si abrimos la librería
encontramos al final:
window.jQuery = window.$ = jQuery;

2. $(document).ready : como al momento de cargar jquery y en la posición
donde esta el código el documento aun no se ha cargado completamente,
esta función simplemente nos dice que cuando termina de cargar el
documento ejecuta el código que tiene dentro.

3. $(‘p’) busca dentro del documento una referencia a esta etiqueta. Si
queremos buscar por id usamos $(“#id”) o por clase $(“.class”).

4. $(‘p’).text(“mamá estoy triunfando”) , al resultado encontrado le coloca
El texto correspondiente. Si quisieramos hacer un cambio de estilo
podriamos decir $(‘p’).addClass(‘nombreClase’)
Selección y filtros

Realmente jquery puede entenderse como un conjunto de consultas aunque
va mas haya.

Dentro de esto tenemos la etiqueta básica $(“div”) que nos permite
hacer la selección de uno o un conjunto de elementos , pero también
Existe la función find(“li”) que realiza un filtrado de es contenido.

            $(‘ul#tmpFavorites’).find(‘li’).addClass(‘tmpFound’);



  Para la mayoría de casos el primer elemento es el 0
Ejemplo

Dentro de Body                      Script
<div class="container">            <script>
<ul class="emphasis container">    $('ul.emphasis')
                                        .children('li')
      <li>item</li>
                                              .eq(3)
      <li>item 2</li>
      <li>item 2</li>                         .prev().text(‘agregado con jQuery');
      <li>item 4</li>                    console.log($('ul').parents('.container'));
<li>item 5</li>                          console.log($('ul').closest('.container'));
<li>                               </script>
      <ul>
      <li>item anidado</li>
      </ul>
</li>
</ul>
</div>
Selección por orden
:first: Selecciona el primer elemento.
:last: Selecciona el ultimo elemento
:even: Selecciona los elementos pares incluido el 0
:odd: Selecciona los elementos impares
:eq(index): Selecciona un elemento especifico en la posición que se
coloca.
:gt(index): Selecciona los elementos mayores a este numero de
elemento
:lt(index):Selecciona los elementos menores a este elemento.
:input: Selecciona los elementos <input />, <select>,
<textarea>, and <button>
:text: Selecciona los elementos cuyo atributo es text
:radio: Selecciona los elementos tipo radio
:checkbox: Selecciona los elementos tipo checkbox
:checked: Selecciona los elementos que han sido seleccionados
2             EVENTOS EN JQUERY

    jQuery busca soportar y ser eficiente en todos los browsers, y por ende
    su API de no solo cumple con esta característica sino que es realmente
    intuitiva.
    Ejemplo con javascript puro:

window.onload = function()
{
     document.getElementById(‘tmpSearch’).onfocus = function() {
          if (this.value == “Search”) {
                  this.value = “”;
          }
     };
     document.getElementById(‘tmpSearch’).onblur = function() {
          if (!this.value) {
          this.value = ‘Search’;
          }
     };
};
Con esto podríamos hacer lo mismo usando jQuery


                 $('#tmpSearch').on("focus",function(){
                   $(this).attr("value","")
                })
                 $('#tmpSearch').on("blur",function(){
                   $(this).attr("value","texto")
                })

En versiones anteriores a la 1.7 se usaba bind() para registrar un listener
Y unbind() para quitar el evento, aunque igual se pueden seguir usando sin
problema.
Tipos de eventos


Evento de clic .click /.dblclick
Evento de selección de elemento .focus
Eventos del teclado .keydown .keyup .keypress
Eventos del mouse .mousedown .mouseenter
.mouseleave .mousemove .mouseover .mouseup
Eventos Asociados
Muchas veces es mejor utilizar funciones como .click() pero cuando
se requiere varios evento, métodos como .hover() o toggle() son la
solución.
           $(‘#toggleme’).toggle(
           function() {
           $(‘#outputdiv’).text(‘Hizo clic una vez.’);
           },
           function(){
           $(‘#outputdiv’).text(‘Hizo clic dos veces.’);
           },
           function(){
           $(‘#outputdiv’).text(‘Hizo clic tres veces’);
           });
.live or .die

Agrega un evento a los elementos que cumplen el criterio tanto en el
momento como en el futuro(para elementos creados dinámicamente).
Con die siemplemente los eliminamos.


                .live( events, handler(eventObject) )
               .live( events, data, handler(eventObject) )

                .die( eventType [, handler] )
                .die( eventTypes )
TRIGGER
También podemos trigiar (TRIGGER) un evento (verbo inventado), es decir
llamarlo
A la fuerza desde cualquier parte del código, por ejemplo:

          $(document).ready(
              function() {
              $(‘input’).focus(
                   function() {
                   $(this).addClass(“tmpFocused”);
                   }
              );

               $(‘input’).trigger(‘focus’);
               }
          );
3      MANIPULANDO CONTENIDO Y
       ATRIBUTOS

jQuery Ofrece todo lo necesario para interactuar con el
contenido desde el DOM, con la ventaja de no tener que
preocuparte por el browser
Atributos
Para modificar atributos usamos:
                  $(this).attr(“id”, “tmpExample”);
 Si simplemente se quiere obtener ela tributo:
        $(this).text(“This element’s ID is:"+$(this).attr(“id”); );
 Para modificar múltiples atributos
                  $(“a”).attr({
                       id: “tmpExample”,
                       title: “Some Tooltip Text”,
                       href:
                       “http://www.example.com”
                  });
 Para eliminar un atributo simplemente se usa removeAttr()
CLASES
De la misma forma que los atributos, jQuery provee funciones para agregar
Y eliminar clases a los resultado de una búsqueda.
        $(document).ready(
             function() {
                   $(‘table’).hover(
                           function() {
                                  $(‘td’).addClass(‘tmpHover’);
                           },
                           function() {
                                  $(‘td’).removeClass(‘tmpHover’);
                           }
                   )
                   .click(
                           function() {
                           $(‘td’).toggleClass(‘tmpSelected’);
                           }
                   );
             }
        );
HTML y Texto
En la manipulación de contenido HTML y texto, tenemos las siguiente
Funciones:

               •   html()
               •   text()
               •   append(),prepend()
               •   after(), before()
               •   insertAfter(), insertBefore()
               •   wrap(), wrapAll(), wrapInner()
Ejemplo de contenido envuelto (.wrap)



<p>
Dogs are forever in the push up position.
</p>                                           $(document).ready(
<p>                                                function() {
I haven’t slept for ten days, because that              $(“p”).wrap(“<div></div>”);
would be too long.                                 }
</p>                                           );
<p>
I once saw a forklift lift a crate of forks.
And it was way
too literal for me.
</p>
clone()

El método .clone() automáticamente asume que lo que
Se quiere hacer es copiar el elemento y sus descendientes.
Si a su vez se requiere clonar los eventos asociados a este,
Se debe pasar como parámetro true.

$(‘tr#tmp’).clone(true).removeAttr(‘id’).appendTo(‘tbody’);
4      ARREGLOS Y ITERACIONES

Por defecto el trabajo con arreglos con javascript puede ser
algo tedioso. jQuery ofrece una API con varias metodos
asociados a la manipulación de estos elementos.
.each()

 La funcion .each() es una un metodo muy util para recorrer arreglos o incluso
 hacer una iteracion sobre una selección .

<ul>                                     $(document).ready(
     <li>Drive My Car</li>                   function() {
     <li>You Won’t See Me</li>                    $(“li”).each(
     <li>Nowhere Man</li>                         function() {
     <li>I’m Looking Through You</li>             $(this).addClass(‘tmpSong’);
     <li>If I Needed Someone</li>                 }
     <li>Run for Your Life</li>                   );
</ul>                                        }
                                         );
.grep( )

  Encuentra los elementos de un arreglo que satisfacen el filtro de la función

Ejemplo:
   <script>
   var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1
   ];
   $("div").text(arr.join(", "));

   arr = jQuery.grep(arr, function(n, i){
    return (n != 5 && i > 4);
   });
   $("p").text(arr.join(", "));
   </script>
.map()

 Permite trasladar todos los items en un arreglo u objeto a uno nuevo arreglo
<script>
  var arr = [ "a", "b", "c", "d", "e" ];
  $("div").text(arr.join(", "));

  arr = jQuery.map(arr, function(n, i){
   return (n.toUpperCase() + i);
  });
  $("p").text(arr.join(", "));
  arr = jQuery.map(arr, function (a) {
   return a + a;
  });
  $("span").text(arr.join(", "));
</script>
5      CSS

¿Que seria de una pagina sin estilos?
Los estilos son forma parte fundamental tanto visual como
comportamental de una pagina. Por eso jQuery ofrece la
posibilidade de manipular las hojas de estilos desde
javascript de una manera sencilla.
.css( )

El metodo .css() modficar o obtener cualquier propiedad de un elemento de la
Busqueda.


                 $(‘div’).css({
                 backgroundColor: ‘lightblue’,
                 border: ‘1px solid lightgrey’,
                 padding: ‘5px’
                 });
outerWidth() y outerHeight()

 Estos dos métodos son realmente útiles por que con ellos podemos
 obtener el total entre el ancho, el padding y el border de un elemento
 de la búsqueda.

               $(document).ready(
               function() {
               alert(
               ‘outerWidth: ‘ + $(‘div’).outerWidth() + “n” +
               ‘outerHeight: ‘ + $(‘div’).outerHeight()
               );
               }
               );
6      AJAX

AJAX acrónimo de Asynchronous JavaScript And XML, yes un
tecnologia que nos permite hacer llamados asincronicos de
contenido para nuestra pagina web sin tener que recargar la
pagina, para crear RIA.
Así funciona esto
La información en AJAX

Podemos usar indiferente POST ó GET como formas de hacer las
peticiones, y aunque el nombre sugiere que la información resultante
es un XML, esto realmente es opcional, pues podemos trabajar
facilmente con JSON (JavaScript Object Notation) y HTML
XML
Lo primero que debemos hacer, es cargar un documento XML y
procesarlo en nuestra aplicación, si un documento XML esta mal
formado, este obviamente no podrá ser procesado.

El siguiente ejemplo ilustra la carga de un archivo con los
departamentos del país seleccionado.

          $.get(“datos.xml”, function($xml) {}, “xml”);

                    $.ajax({
                     url: datos.xml,
                    success: function($xml) {},
                     dataType: xml
                    });
Javascript
                                                        function() {
                         HTML                                 $("#hLocationCountryID").change(
                                                              function() {
                                                                $.get(
<div id="hLocationCountryIDWrapper">                            "datos"+this.value+".xml",
    <label for="hLocationCountryID">                            function($xml) {
                                                                   $xml = $($xml);
     </label>                                                      var $iso2 =
     <select id="hLocationCountryID" size="1"           $xml.find("hLocationCountryISO2").text();
     name="hLocationCountryID"
class="hFormSelectInput">                                           $("select#hLocationStateID").empty();
     <option value="0">Seleccione un pais</option>                  // Set the states…
     <option value="1">colombia</option>                            $xml.find("hLocationState").each(
     </select>                                                         function() {
  </div>                                                                   $("select#hLocationStateID").append(
                                                                           "<option value=" + $
  <div>                                                       (this).attr("hLocationStateID") + ">" +
  <label for="hLocationStateID">Departamento:</label>                      $(this).text() +
  <select name="hLocationStateID"                                          "</option>"
id="hLocationStateID">                                                     );
  </select>                                                            }
  </div>                                                            );
                                                                 },
                                                                 "xml"
                                                                 ); } ); }
XML


<?xml version="1.0" encoding="UTF-8"?>
<response>
  <hLocationCountryISO2>CA</hLocationCountryISO2>
  <hLocationCountryISO3>CAN</hLocationCountryISO3>
  <hLocationStateLabel>Departamento</hLocationStateLabel>
  <hLocationState hLocationStateID="0"> </hLocationState>
  <hLocationState hLocationStateID="66">SANTADER</hLocationState>
  <hLocationState hLocationStateID="67">ANTIOQUIA</hLocationState>
  <hLocationState hLocationStateID="68">CUNDINAMARCA</hLocationState>
  <hLocationState hLocationStateID="69">ATLANTICO</hLocationState>
  <hLocationState hLocationStateID="70">BOLIVAR</hLocationState>
  <hLocationState hLocationStateID="71">VALLE</hLocationState>
</response>
JSON
JSON(JavaScript Object Notation) fue creado por el año 2001, y es
un formato de intercambio de archivos que utiliza la notación de
javascript. Para mayor información sobre el estándar json.org

           {"menu": {
             "id": "file",
             "value": "File",
             "popup": {
               "menuitem": [
                 {"value": "New", "onclick": "CreateNewDoc()"},
                 {"value": "Open", "onclick": "OpenDoc()"},
                 {"value": "Close", "onclick": "CloseDoc()"}
               ]
             }
            }}
Para trabajar con jSon Jquery ofrece varios metodos como:

jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )

Esto es equivalente a:

$.ajax({ url: url, dataType: 'json’, data: data, success: callback});
Con json, por ejemplo para este ejercicio lo que se busca
Es obtener una serie de datos, para luego desplegarlo en
Nuestro documento HTML.

    $.ajax({
                 type: "POST",
                 dataType: 'json',
                 data: "opt=2,
                 url: "asynctask.php",
                 context: document.body,
                 success: function(data){

                  //Por json
                  $.each(data, function(i, item) {
   Console.log(item.nombre)
   ...
Creamos un archivo que se llama asynctask.php que es el que
invocaremos asincronicamente y que generara unos datos tipo
json
$imagenes=$conectar->getImagenes($_POST['pag'],$_POST['can'],2);
    $i=0;
     $jsondata="";
    foreach($imagenes as $img){

$jsondata[$i]['str']=$img['strFoto'];
      $jsondata[$i]['nombre']=$img['strNombre'];
         $j=0;
    }

    echo json_encode($jsondata);
7      EFECTOS

El hecho de generar transiciones o darle un toque animado a
nuestra pagina, es algo fundamental
show(), hide(), and toggle().

 Los 3 métodos básico para desplegar contenido en este framework.
 Interactua directamente con la propieda display del CSS (visible- invisible).


                   .show( duration [, callback] )

                   .show( [duration] [, easing] [, callback] )
sliding
Desliza hacia abajo
          .slideDown( [duration] [, callback] )
          .slideDown( [duration] [, easing] [, callback] )
Desliza hacia arriba
          .slideUp( [duration] [, easing] [, callback] )
          .slideUp( [duration] [, callback] )

Desliza según este o no visible el contenido

           .slideToggle( [duration] [, callback] )
          .slideToggle( [duration] [, easing] [, callback] )
fadeOut(), fadeIn()
 Se muestra cambiando la opacidad gradualmente

        .fadeIn( [duration] [, callback] )
        .fadeIn( [duration] [, easing] [, callback] )
        .fadeOut( [duration] [, callback] )
        .fadeOut( [duration] [, easing] [, callback] )
Podriamos esocger la opacidad objetivo con este metodo
          .fadeTo( duration, opacity [, callback] )
          .fadeTo( duration, opacity [, easing] [, callback]
          )
Animate()

Permite crear una animación a su gusto, modificando ciertas propiedades
de la hoja de estilos

        .animate( properties [, duration] [, easing] [, complete] )
        .animate( properties, options )
8     HANDLERBARS

Puede ser muy engorroso, concatenar elementos HTML para
luego desde javascript agregarlos a nuestro documento, por
eso existen proyectos como handlerbars que nos permiten
crear micro plantillas.




                         http://handlebarsjs.com/
<script id="plantilla" type="text/x-
handlebars-template">

         <li>
                 <h2>{{fullName author}}</h2>
                 <p>{{{tweet}}}</p>

                 {{#if quote}}
                       <h5>{{quote}}</h5>
                 {{else}}
                       <h5>Author does not have
a quote.</h5>
                 {{/if}}
         </li>
9                      PROYECTO SLIDER


Creemos nuestro propio slider de imágenes, ya es hora de crear
Nuestras propias implementaciones.

Más contenido relacionado

La actualidad más candente (19)

Dom JavaScript
Dom JavaScriptDom JavaScript
Dom JavaScript
 
Dom html - java script
Dom   html - java scriptDom   html - java script
Dom html - java script
 
DOM HTML Javascript
DOM HTML JavascriptDOM HTML Javascript
DOM HTML Javascript
 
J query
J queryJ query
J query
 
Jquery
JqueryJquery
Jquery
 
Integrando React.js en aplicaciones Symfony (deSymfony 2016)
Integrando React.js en aplicaciones Symfony (deSymfony 2016)Integrando React.js en aplicaciones Symfony (deSymfony 2016)
Integrando React.js en aplicaciones Symfony (deSymfony 2016)
 
Introduccion a j_query
Introduccion a j_queryIntroduccion a j_query
Introduccion a j_query
 
Jquery para principianes
Jquery para principianesJquery para principianes
Jquery para principianes
 
jQuery
jQueryjQuery
jQuery
 
Clase 14 doctrine - subir archivos
Clase 14   doctrine - subir archivosClase 14   doctrine - subir archivos
Clase 14 doctrine - subir archivos
 
Tutorial de jquery
Tutorial de jqueryTutorial de jquery
Tutorial de jquery
 
03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQuery03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQuery
 
Doctrine2 sf2Vigo
Doctrine2 sf2VigoDoctrine2 sf2Vigo
Doctrine2 sf2Vigo
 
Introduccion a DOM y AJAX - Javier Oliver Fulguera
Introduccion a DOM y AJAX  -  Javier Oliver FulgueraIntroduccion a DOM y AJAX  -  Javier Oliver Fulguera
Introduccion a DOM y AJAX - Javier Oliver Fulguera
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Jquery 2
Jquery 2Jquery 2
Jquery 2
 
Lenguaje JavaScript parte 2
Lenguaje JavaScript parte 2Lenguaje JavaScript parte 2
Lenguaje JavaScript parte 2
 
Jsp directiva page
Jsp directiva pageJsp directiva page
Jsp directiva page
 
Acciones JSP
Acciones JSPAcciones JSP
Acciones JSP
 

Destacado

Mesures d'urgence contre le chômage
Mesures d'urgence contre le chômageMesures d'urgence contre le chômage
Mesures d'urgence contre le chômageUbiconseil
 
LMS and Motivation in Eductation (FR version) - FERNANDO NUNES
LMS and Motivation in Eductation (FR version) - FERNANDO NUNESLMS and Motivation in Eductation (FR version) - FERNANDO NUNES
LMS and Motivation in Eductation (FR version) - FERNANDO NUNESFernando Nunes
 
Centillion Attestation 2011
Centillion Attestation 2011Centillion Attestation 2011
Centillion Attestation 2011Paul George
 
Publicitador
PublicitadorPublicitador
PublicitadorThinnkers
 
Les enjeux et bénéfices de la segmentation moderne - Social Drink Up Adobe 16...
Les enjeux et bénéfices de la segmentation moderne - Social Drink Up Adobe 16...Les enjeux et bénéfices de la segmentation moderne - Social Drink Up Adobe 16...
Les enjeux et bénéfices de la segmentation moderne - Social Drink Up Adobe 16...AugustaConsulting
 
Petits mots de voisins
Petits mots de voisinsPetits mots de voisins
Petits mots de voisinsciffer louis
 
PROFESSIONAL THESIS MBA Overview & Intro Only
PROFESSIONAL THESIS MBA Overview & Intro OnlyPROFESSIONAL THESIS MBA Overview & Intro Only
PROFESSIONAL THESIS MBA Overview & Intro OnlyMarie-Emilie Orard
 
Tema 5 segunda parte
Tema 5 segunda parteTema 5 segunda parte
Tema 5 segunda parteJulio Sanchez
 

Destacado (20)

Mesures d'urgence contre le chômage
Mesures d'urgence contre le chômageMesures d'urgence contre le chômage
Mesures d'urgence contre le chômage
 
LYONNAISEx5
LYONNAISEx5LYONNAISEx5
LYONNAISEx5
 
Témoignage LMO (62)
Témoignage LMO (62)Témoignage LMO (62)
Témoignage LMO (62)
 
LMS and Motivation in Eductation (FR version) - FERNANDO NUNES
LMS and Motivation in Eductation (FR version) - FERNANDO NUNESLMS and Motivation in Eductation (FR version) - FERNANDO NUNES
LMS and Motivation in Eductation (FR version) - FERNANDO NUNES
 
Les 37 situations insolites.
Les 37 situations insolites.Les 37 situations insolites.
Les 37 situations insolites.
 
Centillion Attestation 2011
Centillion Attestation 2011Centillion Attestation 2011
Centillion Attestation 2011
 
ASCII
ASCIIASCII
ASCII
 
Hoergaar
HoergaarHoergaar
Hoergaar
 
Tema 9 ii gm (esquema)
Tema 9 ii gm (esquema)Tema 9 ii gm (esquema)
Tema 9 ii gm (esquema)
 
Publicitador
PublicitadorPublicitador
Publicitador
 
Chine inconmensurable
Chine  inconmensurableChine  inconmensurable
Chine inconmensurable
 
Les enjeux et bénéfices de la segmentation moderne - Social Drink Up Adobe 16...
Les enjeux et bénéfices de la segmentation moderne - Social Drink Up Adobe 16...Les enjeux et bénéfices de la segmentation moderne - Social Drink Up Adobe 16...
Les enjeux et bénéfices de la segmentation moderne - Social Drink Up Adobe 16...
 
Petits mots de voisins
Petits mots de voisinsPetits mots de voisins
Petits mots de voisins
 
PROFESSIONAL THESIS MBA Overview & Intro Only
PROFESSIONAL THESIS MBA Overview & Intro OnlyPROFESSIONAL THESIS MBA Overview & Intro Only
PROFESSIONAL THESIS MBA Overview & Intro Only
 
1 3-12
1 3-121 3-12
1 3-12
 
Tema 11
Tema 11Tema 11
Tema 11
 
Rodaje De Octopuchy
Rodaje De OctopuchyRodaje De Octopuchy
Rodaje De Octopuchy
 
Fantomes
FantomesFantomes
Fantomes
 
Tema 5 segunda parte
Tema 5 segunda parteTema 5 segunda parte
Tema 5 segunda parte
 
Montréal
MontréalMontréal
Montréal
 

Similar a Jquery parte 1

Similar a Jquery parte 1 (20)

Seminario jquery, html5 y wicket
Seminario jquery, html5 y wicketSeminario jquery, html5 y wicket
Seminario jquery, html5 y wicket
 
Drupal7 para desarrolladores
Drupal7 para desarrolladoresDrupal7 para desarrolladores
Drupal7 para desarrolladores
 
Guiajquery
GuiajqueryGuiajquery
Guiajquery
 
En 20 minutos ... jQuery
En 20 minutos ... jQueryEn 20 minutos ... jQuery
En 20 minutos ... jQuery
 
Javascript OOP
Javascript OOPJavascript OOP
Javascript OOP
 
Intro aplicaciones web con php
Intro aplicaciones web con phpIntro aplicaciones web con php
Intro aplicaciones web con php
 
Introducción a DJango
Introducción a DJangoIntroducción a DJango
Introducción a DJango
 
Clase 15
Clase 15Clase 15
Clase 15
 
1 -programacion_oo
1  -programacion_oo1  -programacion_oo
1 -programacion_oo
 
Taller de Jquery
Taller de JqueryTaller de Jquery
Taller de Jquery
 
Javascript Básico
Javascript BásicoJavascript Básico
Javascript Básico
 
El Mal Odiado Javascript
El Mal Odiado JavascriptEl Mal Odiado Javascript
El Mal Odiado Javascript
 
Curso de HTML5
Curso de HTML5Curso de HTML5
Curso de HTML5
 
Samuel bailon sanchez
Samuel bailon sanchezSamuel bailon sanchez
Samuel bailon sanchez
 
Samuel bailon sanchez
Samuel bailon sanchezSamuel bailon sanchez
Samuel bailon sanchez
 
Samuel bailon sanchez
Samuel bailon sanchezSamuel bailon sanchez
Samuel bailon sanchez
 
Samuel bailon sanchez
Samuel bailon sanchezSamuel bailon sanchez
Samuel bailon sanchez
 
Clase 7 objetos globales de javaScript
Clase 7 objetos globales de javaScriptClase 7 objetos globales de javaScript
Clase 7 objetos globales de javaScript
 
Introducción a prototype javascript
Introducción a prototype javascriptIntroducción a prototype javascript
Introducción a prototype javascript
 
Mootools Y Otros Frameworks JS
Mootools Y Otros Frameworks JSMootools Y Otros Frameworks JS
Mootools Y Otros Frameworks JS
 

Más de Cesar Eduardo Suarez T (8)

SEO Bascio
SEO BascioSEO Bascio
SEO Bascio
 
SEO Basico
SEO BasicoSEO Basico
SEO Basico
 
Phonegap
PhonegapPhonegap
Phonegap
 
Git
Git Git
Git
 
Phonegap
PhonegapPhonegap
Phonegap
 
Introduccion a Internet
Introduccion a InternetIntroduccion a Internet
Introduccion a Internet
 
CakePHP parte 2
CakePHP parte 2CakePHP parte 2
CakePHP parte 2
 
CakePHP
CakePHPCakePHP
CakePHP
 

Último

Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...RaymondCode
 
Calculadora cientifica corregida para enviar.docx
Calculadora cientifica  corregida para enviar.docxCalculadora cientifica  corregida para enviar.docx
Calculadora cientifica corregida para enviar.docxzoecaicedosalazar
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfangelinebocanegra1
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfymiranda2
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2montoyagabriela340
 
DESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOS
DESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOSDESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOS
DESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOSreinamanuela20
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfalejandrogomezescoto
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSLincangoKevin
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfcastrodanna185
 
Trabajo de La Electricidad y La Electrónica
Trabajo de La Electricidad y La ElectrónicaTrabajo de La Electricidad y La Electrónica
Trabajo de La Electricidad y La ElectrónicaCamilaCordoba30
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosLCristinaForchue
 
La Electricidad y La Electrónica por el grado 10-5
La Electricidad y La Electrónica por el grado 10-5La Electricidad y La Electrónica por el grado 10-5
La Electricidad y La Electrónica por el grado 10-5CamilaCordoba30
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfodalistar77
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfOBr.global
 
PPT de introducción a la unidad 1 de 5 Basico.pptx
PPT de introducción a la unidad 1 de 5 Basico.pptxPPT de introducción a la unidad 1 de 5 Basico.pptx
PPT de introducción a la unidad 1 de 5 Basico.pptxProfeVivianaRS
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidaddanik1023m
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.marianarodriguezc797
 
¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu software
¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu software¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu software
¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu softwareFrancisco Javier Barrena
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfJoseAlejandroPerezBa
 

Último (20)

Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
Actividad 14: Diseño de Algoritmos Paralelos Actividad 14: Diseño de Algoritm...
 
Calculadora cientifica corregida para enviar.docx
Calculadora cientifica  corregida para enviar.docxCalculadora cientifica  corregida para enviar.docx
Calculadora cientifica corregida para enviar.docx
 
Carta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdfCarta de Premio y Excel angeline 11-2pdf
Carta de Premio y Excel angeline 11-2pdf
 
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdfPresentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
Presentación - Diseño de Algoritmos Paralelos - Grupo 2.pdf
 
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier FolchBEDEC Proyecto y obra , novedades 2024 - Xavier Folch
BEDEC Proyecto y obra , novedades 2024 - Xavier Folch
 
La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2La tablet trabajo en grupo del grado 9-2
La tablet trabajo en grupo del grado 9-2
 
DESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOS
DESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOSDESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOS
DESARROLLO DE BLOG DE ANÁLISIS Y ARTEFACTOS TECNOLOGICOS
 
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdfActividad 14_ Diseño de Algoritmos Paralelos.pdf
Actividad 14_ Diseño de Algoritmos Paralelos.pdf
 
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOSPRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
PRESENTACION DEL TEMA LOS MEJORES SIMULADORES DE CIRCUITOS ELCTRONICOS
 
Análisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdfAnálisis de artefactos tecnologicos .pdf
Análisis de artefactos tecnologicos .pdf
 
Trabajo de La Electricidad y La Electrónica
Trabajo de La Electricidad y La ElectrónicaTrabajo de La Electricidad y La Electrónica
Trabajo de La Electricidad y La Electrónica
 
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimosEl diseño de Algoritmos Paralelos.pdf - analisis de algortimos
El diseño de Algoritmos Paralelos.pdf - analisis de algortimos
 
La Electricidad y La Electrónica por el grado 10-5
La Electricidad y La Electrónica por el grado 10-5La Electricidad y La Electrónica por el grado 10-5
La Electricidad y La Electrónica por el grado 10-5
 
Los mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdfLos mejores simuladores de circuitos electrónicos.pdf
Los mejores simuladores de circuitos electrónicos.pdf
 
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdfInmersión global en ciberseguridad e IA en la conferencia RSA.pdf
Inmersión global en ciberseguridad e IA en la conferencia RSA.pdf
 
PPT de introducción a la unidad 1 de 5 Basico.pptx
PPT de introducción a la unidad 1 de 5 Basico.pptxPPT de introducción a la unidad 1 de 5 Basico.pptx
PPT de introducción a la unidad 1 de 5 Basico.pptx
 
Inteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidadInteligencia artificial dentro de la contabilidad
Inteligencia artificial dentro de la contabilidad
 
Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.Tecnológia 2024.docx.
Tecnológia 2024.docx.Tecnológia 2024.docx.
 
¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu software
¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu software¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu software
¡Cookiegeddon! Bye a las cookies de terceros y cómo afectará a tu software
 
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdfTENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
TENDENCIAS DE IA Explorando el futuro de la tecnologia.pdf
 

Jquery parte 1

  • 1. Ing. César Eduardo Suárez Trujillo
  • 3. ¿QUE ES JQUERY? jQuery es un framework de JavaScript, creado inicialmente por John Resig. Este framework permite una fácil manipulacion de los documentos HTML y de la estructura DOM (Document object model).
  • 4. OTRAS ALTERNATIVAS Existen muchos otros frameworks para javascript en el mundo como son: • Mootools (usado en Joomla) • Prototype (usado por magento) • Yui(Yahoo! UI Library) • Dojo • Rico
  • 5. ¿POR QUE JQUERY? • Es usado por el 55% de los sitios web dentro del listado de los 10.000 más visitados en el mundo. • Es gratuito, de código abierto y bajo licencia MIT o GNU General Public License • Microsoft y Nokia lo integran en sus plataformas de desarrollo • Constantes actualizaciones • Tiene dos proyectos relacionados llamados jQueryui y jQuery Mobile. • Write Less, Do More (frase de batalla) • appendTo – empresa dedicada a jQuery • Mucho plugins en la web
  • 6. 1 PRIMERO PASOS Primero debemos saber que existen varias empresas que hospedan las librerias de jQuery para nuestro uso, tanto en la versión completa, como simplificada. Google http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min. js Microsoft http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js jQuery CDN http://code.jquery.com/jquery-1.7.2.min.js
  • 7. Teniendo la ruta del framework, simplemente lo vinculamos a nuestra Pagina (ya recuerda usar el estándar de HTML5): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{titulo}</title> <script type=’text/javascript’ src=‘{ruta}/jQuery.js¡’> </script> </head> <body> <p> jQuery se ha cargado. </p> </body> </html>
  • 8. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{titulo}</title> <script type=’text/javascript’ src=‘{ruta}/jQuery.js¡’> <script> $(document).ready( function() { $(‘p’).text(‘mama estoy triunfando!’); } );</script> </script> </head> <body> <p> jQuery se ha cargado. </p> </body> </html>
  • 9. Como funciona: 1. La etiqueta $ es equivalente a colocar jQuery, si abrimos la librería encontramos al final: window.jQuery = window.$ = jQuery; 2. $(document).ready : como al momento de cargar jquery y en la posición donde esta el código el documento aun no se ha cargado completamente, esta función simplemente nos dice que cuando termina de cargar el documento ejecuta el código que tiene dentro. 3. $(‘p’) busca dentro del documento una referencia a esta etiqueta. Si queremos buscar por id usamos $(“#id”) o por clase $(“.class”). 4. $(‘p’).text(“mamá estoy triunfando”) , al resultado encontrado le coloca El texto correspondiente. Si quisieramos hacer un cambio de estilo podriamos decir $(‘p’).addClass(‘nombreClase’)
  • 10. Selección y filtros Realmente jquery puede entenderse como un conjunto de consultas aunque va mas haya. Dentro de esto tenemos la etiqueta básica $(“div”) que nos permite hacer la selección de uno o un conjunto de elementos , pero también Existe la función find(“li”) que realiza un filtrado de es contenido. $(‘ul#tmpFavorites’).find(‘li’).addClass(‘tmpFound’); Para la mayoría de casos el primer elemento es el 0
  • 11. Ejemplo Dentro de Body Script <div class="container"> <script> <ul class="emphasis container"> $('ul.emphasis') .children('li') <li>item</li> .eq(3) <li>item 2</li> <li>item 2</li> .prev().text(‘agregado con jQuery'); <li>item 4</li> console.log($('ul').parents('.container')); <li>item 5</li> console.log($('ul').closest('.container')); <li> </script> <ul> <li>item anidado</li> </ul> </li> </ul> </div>
  • 12. Selección por orden :first: Selecciona el primer elemento. :last: Selecciona el ultimo elemento :even: Selecciona los elementos pares incluido el 0 :odd: Selecciona los elementos impares :eq(index): Selecciona un elemento especifico en la posición que se coloca. :gt(index): Selecciona los elementos mayores a este numero de elemento :lt(index):Selecciona los elementos menores a este elemento. :input: Selecciona los elementos <input />, <select>, <textarea>, and <button> :text: Selecciona los elementos cuyo atributo es text :radio: Selecciona los elementos tipo radio :checkbox: Selecciona los elementos tipo checkbox :checked: Selecciona los elementos que han sido seleccionados
  • 13. 2 EVENTOS EN JQUERY jQuery busca soportar y ser eficiente en todos los browsers, y por ende su API de no solo cumple con esta característica sino que es realmente intuitiva. Ejemplo con javascript puro: window.onload = function() { document.getElementById(‘tmpSearch’).onfocus = function() { if (this.value == “Search”) { this.value = “”; } }; document.getElementById(‘tmpSearch’).onblur = function() { if (!this.value) { this.value = ‘Search’; } }; };
  • 14. Con esto podríamos hacer lo mismo usando jQuery $('#tmpSearch').on("focus",function(){ $(this).attr("value","") }) $('#tmpSearch').on("blur",function(){ $(this).attr("value","texto") }) En versiones anteriores a la 1.7 se usaba bind() para registrar un listener Y unbind() para quitar el evento, aunque igual se pueden seguir usando sin problema.
  • 15. Tipos de eventos Evento de clic .click /.dblclick Evento de selección de elemento .focus Eventos del teclado .keydown .keyup .keypress Eventos del mouse .mousedown .mouseenter .mouseleave .mousemove .mouseover .mouseup
  • 16. Eventos Asociados Muchas veces es mejor utilizar funciones como .click() pero cuando se requiere varios evento, métodos como .hover() o toggle() son la solución. $(‘#toggleme’).toggle( function() { $(‘#outputdiv’).text(‘Hizo clic una vez.’); }, function(){ $(‘#outputdiv’).text(‘Hizo clic dos veces.’); }, function(){ $(‘#outputdiv’).text(‘Hizo clic tres veces’); });
  • 17. .live or .die Agrega un evento a los elementos que cumplen el criterio tanto en el momento como en el futuro(para elementos creados dinámicamente). Con die siemplemente los eliminamos. .live( events, handler(eventObject) ) .live( events, data, handler(eventObject) ) .die( eventType [, handler] ) .die( eventTypes )
  • 18. TRIGGER También podemos trigiar (TRIGGER) un evento (verbo inventado), es decir llamarlo A la fuerza desde cualquier parte del código, por ejemplo: $(document).ready( function() { $(‘input’).focus( function() { $(this).addClass(“tmpFocused”); } ); $(‘input’).trigger(‘focus’); } );
  • 19. 3 MANIPULANDO CONTENIDO Y ATRIBUTOS jQuery Ofrece todo lo necesario para interactuar con el contenido desde el DOM, con la ventaja de no tener que preocuparte por el browser
  • 20. Atributos Para modificar atributos usamos: $(this).attr(“id”, “tmpExample”); Si simplemente se quiere obtener ela tributo: $(this).text(“This element’s ID is:"+$(this).attr(“id”); ); Para modificar múltiples atributos $(“a”).attr({ id: “tmpExample”, title: “Some Tooltip Text”, href: “http://www.example.com” }); Para eliminar un atributo simplemente se usa removeAttr()
  • 21. CLASES De la misma forma que los atributos, jQuery provee funciones para agregar Y eliminar clases a los resultado de una búsqueda. $(document).ready( function() { $(‘table’).hover( function() { $(‘td’).addClass(‘tmpHover’); }, function() { $(‘td’).removeClass(‘tmpHover’); } ) .click( function() { $(‘td’).toggleClass(‘tmpSelected’); } ); } );
  • 22. HTML y Texto En la manipulación de contenido HTML y texto, tenemos las siguiente Funciones: • html() • text() • append(),prepend() • after(), before() • insertAfter(), insertBefore() • wrap(), wrapAll(), wrapInner()
  • 23. Ejemplo de contenido envuelto (.wrap) <p> Dogs are forever in the push up position. </p> $(document).ready( <p> function() { I haven’t slept for ten days, because that $(“p”).wrap(“<div></div>”); would be too long. } </p> ); <p> I once saw a forklift lift a crate of forks. And it was way too literal for me. </p>
  • 24. clone() El método .clone() automáticamente asume que lo que Se quiere hacer es copiar el elemento y sus descendientes. Si a su vez se requiere clonar los eventos asociados a este, Se debe pasar como parámetro true. $(‘tr#tmp’).clone(true).removeAttr(‘id’).appendTo(‘tbody’);
  • 25. 4 ARREGLOS Y ITERACIONES Por defecto el trabajo con arreglos con javascript puede ser algo tedioso. jQuery ofrece una API con varias metodos asociados a la manipulación de estos elementos.
  • 26. .each() La funcion .each() es una un metodo muy util para recorrer arreglos o incluso hacer una iteracion sobre una selección . <ul> $(document).ready( <li>Drive My Car</li> function() { <li>You Won’t See Me</li> $(“li”).each( <li>Nowhere Man</li> function() { <li>I’m Looking Through You</li> $(this).addClass(‘tmpSong’); <li>If I Needed Someone</li> } <li>Run for Your Life</li> ); </ul> } );
  • 27. .grep( ) Encuentra los elementos de un arreglo que satisfacen el filtro de la función Ejemplo: <script> var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ]; $("div").text(arr.join(", ")); arr = jQuery.grep(arr, function(n, i){ return (n != 5 && i > 4); }); $("p").text(arr.join(", ")); </script>
  • 28. .map() Permite trasladar todos los items en un arreglo u objeto a uno nuevo arreglo <script> var arr = [ "a", "b", "c", "d", "e" ]; $("div").text(arr.join(", ")); arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); }); $("p").text(arr.join(", ")); arr = jQuery.map(arr, function (a) { return a + a; }); $("span").text(arr.join(", ")); </script>
  • 29. 5 CSS ¿Que seria de una pagina sin estilos? Los estilos son forma parte fundamental tanto visual como comportamental de una pagina. Por eso jQuery ofrece la posibilidade de manipular las hojas de estilos desde javascript de una manera sencilla.
  • 30. .css( ) El metodo .css() modficar o obtener cualquier propiedad de un elemento de la Busqueda. $(‘div’).css({ backgroundColor: ‘lightblue’, border: ‘1px solid lightgrey’, padding: ‘5px’ });
  • 31. outerWidth() y outerHeight() Estos dos métodos son realmente útiles por que con ellos podemos obtener el total entre el ancho, el padding y el border de un elemento de la búsqueda. $(document).ready( function() { alert( ‘outerWidth: ‘ + $(‘div’).outerWidth() + “n” + ‘outerHeight: ‘ + $(‘div’).outerHeight() ); } );
  • 32. 6 AJAX AJAX acrónimo de Asynchronous JavaScript And XML, yes un tecnologia que nos permite hacer llamados asincronicos de contenido para nuestra pagina web sin tener que recargar la pagina, para crear RIA.
  • 34. La información en AJAX Podemos usar indiferente POST ó GET como formas de hacer las peticiones, y aunque el nombre sugiere que la información resultante es un XML, esto realmente es opcional, pues podemos trabajar facilmente con JSON (JavaScript Object Notation) y HTML
  • 35. XML Lo primero que debemos hacer, es cargar un documento XML y procesarlo en nuestra aplicación, si un documento XML esta mal formado, este obviamente no podrá ser procesado. El siguiente ejemplo ilustra la carga de un archivo con los departamentos del país seleccionado. $.get(“datos.xml”, function($xml) {}, “xml”); $.ajax({ url: datos.xml, success: function($xml) {}, dataType: xml });
  • 36. Javascript function() { HTML $("#hLocationCountryID").change( function() { $.get( <div id="hLocationCountryIDWrapper"> "datos"+this.value+".xml", <label for="hLocationCountryID"> function($xml) { $xml = $($xml); </label> var $iso2 = <select id="hLocationCountryID" size="1" $xml.find("hLocationCountryISO2").text(); name="hLocationCountryID" class="hFormSelectInput"> $("select#hLocationStateID").empty(); <option value="0">Seleccione un pais</option> // Set the states… <option value="1">colombia</option> $xml.find("hLocationState").each( </select> function() { </div> $("select#hLocationStateID").append( "<option value=" + $ <div> (this).attr("hLocationStateID") + ">" + <label for="hLocationStateID">Departamento:</label> $(this).text() + <select name="hLocationStateID" "</option>" id="hLocationStateID"> ); </select> } </div> ); }, "xml" ); } ); }
  • 37. XML <?xml version="1.0" encoding="UTF-8"?> <response> <hLocationCountryISO2>CA</hLocationCountryISO2> <hLocationCountryISO3>CAN</hLocationCountryISO3> <hLocationStateLabel>Departamento</hLocationStateLabel> <hLocationState hLocationStateID="0"> </hLocationState> <hLocationState hLocationStateID="66">SANTADER</hLocationState> <hLocationState hLocationStateID="67">ANTIOQUIA</hLocationState> <hLocationState hLocationStateID="68">CUNDINAMARCA</hLocationState> <hLocationState hLocationStateID="69">ATLANTICO</hLocationState> <hLocationState hLocationStateID="70">BOLIVAR</hLocationState> <hLocationState hLocationStateID="71">VALLE</hLocationState> </response>
  • 38. JSON JSON(JavaScript Object Notation) fue creado por el año 2001, y es un formato de intercambio de archivos que utiliza la notación de javascript. Para mayor información sobre el estándar json.org {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }}
  • 39. Para trabajar con jSon Jquery ofrece varios metodos como: jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] ) Esto es equivalente a: $.ajax({ url: url, dataType: 'json’, data: data, success: callback});
  • 40. Con json, por ejemplo para este ejercicio lo que se busca Es obtener una serie de datos, para luego desplegarlo en Nuestro documento HTML. $.ajax({ type: "POST", dataType: 'json', data: "opt=2, url: "asynctask.php", context: document.body, success: function(data){ //Por json $.each(data, function(i, item) { Console.log(item.nombre) ...
  • 41. Creamos un archivo que se llama asynctask.php que es el que invocaremos asincronicamente y que generara unos datos tipo json $imagenes=$conectar->getImagenes($_POST['pag'],$_POST['can'],2); $i=0; $jsondata=""; foreach($imagenes as $img){ $jsondata[$i]['str']=$img['strFoto']; $jsondata[$i]['nombre']=$img['strNombre']; $j=0; } echo json_encode($jsondata);
  • 42. 7 EFECTOS El hecho de generar transiciones o darle un toque animado a nuestra pagina, es algo fundamental
  • 43. show(), hide(), and toggle(). Los 3 métodos básico para desplegar contenido en este framework. Interactua directamente con la propieda display del CSS (visible- invisible). .show( duration [, callback] ) .show( [duration] [, easing] [, callback] )
  • 44. sliding Desliza hacia abajo .slideDown( [duration] [, callback] ) .slideDown( [duration] [, easing] [, callback] ) Desliza hacia arriba .slideUp( [duration] [, easing] [, callback] ) .slideUp( [duration] [, callback] ) Desliza según este o no visible el contenido .slideToggle( [duration] [, callback] ) .slideToggle( [duration] [, easing] [, callback] )
  • 45. fadeOut(), fadeIn() Se muestra cambiando la opacidad gradualmente .fadeIn( [duration] [, callback] ) .fadeIn( [duration] [, easing] [, callback] ) .fadeOut( [duration] [, callback] ) .fadeOut( [duration] [, easing] [, callback] ) Podriamos esocger la opacidad objetivo con este metodo .fadeTo( duration, opacity [, callback] ) .fadeTo( duration, opacity [, easing] [, callback] )
  • 46. Animate() Permite crear una animación a su gusto, modificando ciertas propiedades de la hoja de estilos .animate( properties [, duration] [, easing] [, complete] ) .animate( properties, options )
  • 47. 8 HANDLERBARS Puede ser muy engorroso, concatenar elementos HTML para luego desde javascript agregarlos a nuestro documento, por eso existen proyectos como handlerbars que nos permiten crear micro plantillas. http://handlebarsjs.com/
  • 48. <script id="plantilla" type="text/x- handlebars-template"> <li> <h2>{{fullName author}}</h2> <p>{{{tweet}}}</p> {{#if quote}} <h5>{{quote}}</h5> {{else}} <h5>Author does not have a quote.</h5> {{/if}} </li>
  • 49. 9 PROYECTO SLIDER Creemos nuestro propio slider de imágenes, ya es hora de crear Nuestras propias implementaciones.