jquery parte 1
Post on 13-Jan-2015
3.063 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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
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 colocaEl 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é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
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
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
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’;}
};};
$('#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.
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
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 )
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
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
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
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’);}
);}
);
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()
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>”);}
);
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’);
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
.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’);});
});
.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:
.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>
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
.css( )
El metodo .css() modficar o obtener cualquier propiedad de un elemento de laBusqueda.
$(‘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());});
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
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});
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>
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)] )
$.ajax({ url: url, dataType: 'json’, data: data, success: callback});
Esto es equivalente a:
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 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);
EFECTOS
El hecho de generar transiciones o darle un toque animado a nuestra pagina, es algo fundamental
7
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
.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
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
Animate()
Permite crear una animación a su gusto, modificando ciertas propiedadesde la hoja de estilos
.animate( properties [, duration] [, easing] [, complete] )
.animate( properties, options )
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/
<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>
PROYECTO SLIDER9
Creemos nuestro propio slider de imágenes, ya es hora de crearNuestras propias implementaciones.
top related