jquery parte 1

49
Ing. César Eduardo Suárez Trujillo

Upload: cesar-eduardo-suarez-t

Post on 13-Jan-2015

3.063 views

Category:

Technology


8 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Jquery parte 1

Ing. César Eduardo Suárez Trujillo

Page 2: Jquery parte 1

http://www.the5thwave.com/

Page 3: Jquery parte 1

¿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).

Page 4: Jquery parte 1

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

Page 5: Jquery parte 1

¿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

Page 6: Jquery parte 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.Googlehttp://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js Microsofthttp://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js jQuery CDNhttp://code.jquery.com/jquery-1.7.2.min.js

1

Page 7: Jquery parte 1

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>

Page 8: Jquery parte 1

<!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>

Page 9: Jquery parte 1

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 colocaEl texto correspondiente. Si quisieramos hacer un cambio de estilo podriamos decir $(‘p’).addClass(‘nombreClase’)

Page 10: Jquery parte 1

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énExiste 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

Page 11: Jquery parte 1

Ejemplo

<div class="container">

<ul class="emphasis container">

<li>item</li>

<li>item 2</li><li>item 2</li>

<li>item 4</li>

<li>item 5</li>

<li><ul><li>item anidado</li></ul>

</li></ul></div>

<script> $('ul.emphasis') .children('li')

.eq(3) .prev().text(‘agregado con jQuery'); console.log($('ul').parents('.container')); console.log($('ul').closest('.container'));</script>

Dentro de Body Script

Page 12: Jquery parte 1

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

Page 13: Jquery parte 1

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:

2

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’;}

};};

Page 14: Jquery parte 1

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

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

Con esto podríamos hacer lo mismo usando jQuery

En versiones anteriores a la 1.7 se usaba bind() para registrar un listenerY unbind() para quitar el evento, aunque igual se pueden seguir usando sinproblema.

Page 15: Jquery parte 1

Tipos de eventos

Evento de clic .click /.dblclickEvento de selección de elemento .focusEventos del teclado .keydown .keyup .keypressEventos del mouse .mousedown .mouseenter .mouseleave .mousemove .mouseover .mouseup

Page 16: Jquery parte 1

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’);});

Page 17: Jquery parte 1

.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 )

Page 18: Jquery parte 1

También podemos trigiar (TRIGGER) un evento (verbo inventado), es decir llamarloA la fuerza desde cualquier parte del código, por ejemplo:

$(document).ready(function() {$(‘input’).focus(

function() {$(this).addClass(“tmpFocused”);}

);

$(‘input’).trigger(‘focus’);}

);

TRIGGER

Page 19: Jquery parte 1

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

3

Page 20: Jquery parte 1

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()

Atributos

Page 21: Jquery parte 1

CLASES

De la misma forma que los atributos, jQuery provee funciones para agregarY 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’);}

);}

);

Page 22: Jquery parte 1

HTML y Texto

En la manipulación de contenido HTML y texto, tenemos las siguienteFunciones:

• html()• text()• append(),prepend()• after(), before()• insertAfter(), insertBefore()• wrap(), wrapAll(), wrapInner()

Page 23: Jquery parte 1

Ejemplo de contenido envuelto (.wrap)

<p>Dogs are forever in the push up position.</p><p>I haven’t slept for ten days, because that would be too long.</p><p>I once saw a forklift lift a crate of forks. And it was waytoo literal for me.</p>

$(document).ready(function() {

$(“p”).wrap(“<div></div>”);}

);

Page 24: Jquery parte 1

clone()

El método .clone() automáticamente asume que lo queSe 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’);

Page 25: Jquery parte 1

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.

4

Page 26: Jquery parte 1

.each()

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

<ul><li>Drive My Car</li><li>You Won’t See Me</li><li>Nowhere Man</li><li>I’m Looking Through You</li><li>If I Needed Someone</li><li>Run for Your Life</li>

</ul>

$(document).ready(function() {

$(“li”).each(function() {$(this).addClass(‘tmpSong’);});

});

Page 27: Jquery parte 1

.grep( )

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

<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>

Ejemplo:

Page 28: Jquery parte 1

.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>

Page 29: Jquery parte 1

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.

5

Page 30: Jquery parte 1

.css( )

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

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

Page 31: Jquery parte 1

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());});

Page 32: Jquery parte 1

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.

6

Page 33: Jquery parte 1

Así funciona esto

Page 34: Jquery parte 1

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

Page 35: Jquery parte 1

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});

Page 36: Jquery parte 1

HTML

Javascript

function() { $("#hLocationCountryID").change( function() { $.get( "datos"+this.value+".xml", function($xml) { $xml = $($xml); var $iso2 = $xml.find("hLocationCountryISO2").text(); $("select#hLocationStateID").empty(); // Set the states… $xml.find("hLocationState").each( function() { $("select#hLocationStateID").append( "<option value=" + $

(this).attr("hLocationStateID") + ">" + $(this).text() + "</option>" ); } ); }, "xml" ); } ); }

<div id="hLocationCountryIDWrapper"> <label for="hLocationCountryID">

</label> <select id="hLocationCountryID" size="1" name="hLocationCountryID" class="hFormSelectInput"> <option value="0">Seleccione un pais</option> <option value="1">colombia</option> </select> </div> <div> <label for="hLocationStateID">Departamento:</label> <select name="hLocationStateID" id="hLocationStateID"> </select> </div>

Page 37: Jquery parte 1

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>

Page 38: Jquery parte 1

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()"} ] } }}

Page 39: Jquery parte 1

Para trabajar con jSon Jquery ofrece varios metodos como:

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

$.ajax({ url: url, dataType: 'json’, data: data, success: callback});

Esto es equivalente a:

Page 40: Jquery parte 1

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)...

Page 41: Jquery parte 1

Creamos un archivo que se llama asynctask.php que es el queinvocaremos asincronicamente y que generara unos datos tipojson

$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);

Page 42: Jquery parte 1

EFECTOS

El hecho de generar transiciones o darle un toque animado a nuestra pagina, es algo fundamental

7

Page 43: Jquery parte 1

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] )

Page 44: Jquery parte 1

sliding

.slideDown( [duration] [, callback] )

.slideDown( [duration] [, easing] [, callback] )

.slideUp( [duration] [, easing] [, callback] )

.slideUp( [duration] [, callback] )

.slideToggle( [duration] [, callback] )

.slideToggle( [duration] [, easing] [, callback] )

Desliza según este o no visible el contenido

Desliza hacia abajo

Desliza hacia arriba

Page 45: Jquery parte 1

fadeOut(), fadeIn()

Se muestra cambiando la opacidad gradualmente

.fadeIn( [duration] [, callback] )

.fadeIn( [duration] [, easing] [, callback] )

.fadeOut( [duration] [, callback] )

.fadeOut( [duration] [, easing] [, callback] )

.fadeTo( duration, opacity [, easing] [, callback] )

.fadeTo( duration, opacity [, callback] )

Podriamos esocger la opacidad objetivo con este metodo

Page 46: Jquery parte 1

Animate()

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

.animate( properties [, duration] [, easing] [, complete] )

.animate( properties, options )

Page 47: Jquery parte 1

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.

8

http://handlebarsjs.com/

Page 48: Jquery parte 1

<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>

Page 49: Jquery parte 1

PROYECTO SLIDER9

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