Jquery parte 1

Ing. César Eduardo Suárez Trujillo

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

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/

9 PROYECTO SLIDER

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

Jquery parte 1

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Jquery parte 1

Más de Cesar Eduardo Suarez T

Último

Jquery parte 1