en 20 minutos ... jquery
Post on 13-Jan-2015
2.705 Views
Preview:
DESCRIPTION
TRANSCRIPT
jQuery
Jesús María Méndez PérezGrupo de Apoyo a la Teleenseñanza (GAT)
Introducción
• Es una librería Javascript que:
– elimina las diferencias entre los distintos navegadores web
– simplifica tareas comunes
– es amigable para los diseñadores web
– tiene una gran cantidad de plugins (http://archive.plugins.jquery.com)
– es usado en más del 35% de los sitios webs
Características
• jQuery es la librería Javascript más utilizada actualmente.
• Ha tenido un gran crecimiento durante estos últimos años.
• jQuery es usado en más del 50% de los 10,000 sitios top de Internet y en más del 30% del top 1,000,000.
Uso jQuery
Historia
• John Resig lanzó jQuery approximadamente el 16 de Enerode 2006
• John escribió en su blog – “Making it to both del.icio.us popular and the front page of digg just shows how badly Javascript programmers want a better library for writing code with.”
• Justo una semana después Michael Geary escribió el primer plugin jQuery, una función para manipular JSON que se incluiría posteriormente en la librería jQuery.
• Version 1.0 - 26 de Agosto de 2006. • Actualmente - Versión 1.8.3 - 13 de Noviembre de 2012.
Cargar jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf:8">
<title>My Web Page</title>
<link href="css/main.css rel="stylesheet">
<script src="js/jquery/1.8.3.min.js"></script>
</head>
<body>
…
</script>
$(document).ready(function() {
});
</script>
</body>
O bien…
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
Programando en jQuery
1. Seleccionar
images
links
divs
tables
table rows
form fields
External links
… any HTML TAG
2. Acción
show
hide
animate
add new content
change CSS
change HTML properties
load data from the web
Programando en jQuery
http://api.jquery.com/category/selectors/
$('p')
$('.navbar')
$('#banner')
$('#banner p')
$('h2 + p')
$('a[href^="http://"]')
http://files.sawmac.com/js2e/testbed/selectors.html
Programando en jQuery
1. Seleccionar
$('a[href^="http://"]').attr('target','_blank');
<li>
<a href="http://google.com/">Google</a>
</li>
<li>
<a href="http://yahoo.com">Yahoo!</a>
</li>
<li>
<a href="../testbed/events.html">Events testbed</a>
</li>
<li>
<a href="http://twitter.com">Twitter</a>
</li>
2. Acción
$('a[href^="http://"]').attr('target','_blank');
<li>
<a href="http://google.com/" target="_blank") >Google</a>
</li>
<li>
<a href="http://yahoo.com" target="_blank") >Yahoo!</a>
</li>
<li>
<a href="../testbed/events.html "target="_blank") >Eventstestbed</a>
</li>
<li>
<a href="http://twitter.com">Twitter</a>
</li>
Interacción - Eventos
Mouse events mouseover mouseout mousemove
Click events click dbclick mousedown mouseup
Windowevents
load unload resize scroll
Key events keydown keyup keypress
Form events focus blur submit
Programando en jQuery
• 1. Seleccionar elemento$(‘div’)
• 2. Añadir Evento$(‘div').click(function(){
});
• 3. Acción$(‘div').click(function(){
alert(‘hola');
});
jQuery Effects
Buenas prácticas
• Usar SIEMPRE la última versión de jQuery
– Mejora el rendimiento y corrige errores de versiones anteriores.
• Precaución al seleccionar selectores
– De mayor a menor rendimiento:• Selectores de ID: (#sidebar)
• Selectores de etiqueta HTML (input, div, etc.)
• Selectores de clase (.pantalon)
• Pseudoselectores y selectores de atributo (:visible, :hidden, [attribute=value], etc.)
Hazlo simple
• Evita selectores complicados
$("body #page:first-child article.main p#intro em"); //mal
$("#intro em"); //bien
• Aumento especificación de izquierda a derecha
$("#intro em") -> Carga todos los elementos ‘em’ en un array.
Muy ineficiente si tienes cientos de etiquetas ‘em’.
$("em", $("#intro")); -> $("em", "#intro");
$("#intro").find("em");
<div id="content">
<form method="post" action="/">
<h2>Traffic Light</h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> Red</li>
<li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
<li><input type="radio" class="off" name="light" value="green" /> Green</li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>
Seleccionar un elemento
var traffic_button = $('#content .button'); //lento
var traffic_button = $('#traffic_button'); //rápido
Seleccionar múltiples elementos
– Siempre descender del ID más cercano (var traffic_lights = $('#traffic_light input');)
– Siempre utilizar una etiqueta antes de una clase (y descender de un ID):
var active_light = $('#traffic_light input.on');
– Nunca utilices etiqueta con un ID.
var content = $('div#content');
– Consejo: Si queremos recordar que nuestra variable local es un objeto jQuery podemos ponerle $ como prefijo.
– Nunca repitas una operación de selección de jQuery mas de una vez en tu aplicación.
Separar la funcionalidad de Javascript
Separar la funcionalidad de Javascript en otra capa independiente de (X)HTML and CSS.
//mal
Nunca incluyas eventos Javascript en los atributos.
<a onclick="doSomething()" href="#">Click!</a>
//bien
El código Javascript se debe de incluir en un fichero externo y enlazado al documento con la etiqueta ‘<script>’
<a href="backuplink.html" class="doSomething">Click!</a>
$('a.doSomething').click(function(){
// Do something here!
alert('You did something, woo hoo!');
}); ...
The método .click() de jQuery nos permite enlazar el evento click al resultado de nuestro selector.
Se seleccionarán todas las etiquetas <a> con clase “doSomething” y se le enlazará el evento que llamará a la función.
Nunca depender de Javascript
Nunca asumir que el navegador del usuario tiene Javascript activado.
//mal
<script language="javascript">
var now = new Date();
if(now.getHours() < 12)
document.write('Good Morning!');
else
document.write('Good Afternoon!');
</script>
Javascript desactivado -> No aparecería nada.
//bien
<p title="Good Day Message">Good Morning!</p>
<script language="javascript">
var now = new Date();
if(now.getHours() >= 12)
{
var goodDay = $('p[title="Good Day Message"]');
goodDay.text('Good Afternoon!');
}
Javascript desactivado -> Siempre aparecería “Good Morning”
Código accessible
Importante que nuestro (X)HTML esté bien estructurado para evitar DOM scripting e interactuar de manerasencilla con jQuery.
//muy mal //mal
//bien
CSS Dinámico
Si el navegador web no soporta Javascript o éste está desactivado, los elementos que ocultamos a travésde CSS nunca serán nuevamente visibles ya que nuestro código Javascript no se ejecutará.
Podemos ocultar elementos de la página usando usando CSS, sin embargo nuestro CSS solo se ejecutarási el Javascript está activado.
#bad #goodHTML: HTML:
<h2>This is a heading</h2> <h2>This is a heading</h2>
<p class="hide-me-first"> This is some information about the heading. </p> <p class="hide-me-first"> This is some information about the heading. </p>
CSS: jQuery Javascript:
p.hide-me-first $(document).ready(function{
{ $("p.hide-me-first").css("display", "none");
display: none; $("p.hide-me-first").css("visibility", "hidden");
visibility: hidden;
} });
Almacenar consultas jQuery
Si pretendes usar los objetos jQuery obtenidos durante la selección en otras partes del código, deberías almacenarlo en un objeto de ámbito global.
// Definir un objeto de ámbito global (i.e. the window object)
window.$my =
{
// Initialize all the queries you want to use more than once
head : $('head'),
traffic_light : $('#traffic_light'),
traffic_button : $('#traffic_button')
};
function do_something()
{
// Now you can reference the stored results and manipulate them
var script = document.createElement('script');
$my.head.append(script);
// When working inside functions, continue to save jQuery results to your global container.
$my.cool_results = $('#some_ul li');
$my.other_results = $('#some_table td'); // Use the global functions as you would a normal jQuery result
$my.other_results.css('border-color', 'red');
$my.traffic_light.css('border-color', 'green');
}
• 1) $(‘.child’, $parent).show(); (Ámbito)
• 2) $parent.find(‘.child’).show(); (Usando find())
• 3) $parent.children(‘child’).show(); (hijo inmediato)
• 4) $(‘parent > .child’).show(); (selector CSS)
• 5) $(‘#parent .child’).show(); (igual que 2)
• Cachingvar parents = $(‘.parents’);
var children = $(‘.parents’).find(‘.child’) //mal
var children = parents.find(‘.child’) //bien
Cualquier $(‘ ’) implica volver a recorrer el DOM -> Mayor lentitud (Menor rendimiento)
• Encadenamiento//sin encadenamiento
$(‘#message’).fadeIn(‘slow’);
$(‘#message’).addClass(‘activeMessage’);
//con encadenamiento
$(‘#message’).fadeIn(‘slow’)
.addClass(‘activeMessage’);
• Inserción en el DOM– Cada inserción en el DOM es muy costosa.
– Construir cadenas de HTML en una variable y realizar una única inserción (append()) tan tarde como sea posible.
– Usar detach() en vez de remove() si posteriormente se va a hacer una reinserción de los elementos en el DOM.
• Evitar bucles– La manipulación directa del DOM es muy costosa.
– Crear lo que necesites en memoria y por último actualizar el DOM.
//mal //bien
Objetos jQuery como Arrays
El resultado de un selector es un objeto jQuery. Sin embargo, te hace pensar que estás trabajandocon un array con elementos y una longitud.
Usar for (o while) en lugar de $.each() hace que mejore el rendimiento.
Comprobar la longitud es la única manera de determinar si la colección contiene algún elemento
http://jsfiddle.net/martinaglv/NcRsV/
Delegación de eventos (Bubbling)
Cada evento (e.g. click, mouseover, etc.) en JavaScript hace el efecto burbuja en el árbol DOM hacia los elementos padre.
Muy útil cuando muchos elementos llaman a la misma función. En vez de establecer una funciónde listener a muchos nodos (ineficiente), se establece una función de listener a su padre.
Mantén el código claro
var defaultSettings = {};
defaultSettings['carModel'] = 'Mercedes';
defaultSettings['carYear'] = '2010';
defaultSettings['carMiles'] = '5000';
defaultSettings['carTint'] = 'Metallic Blue';
$('.someCheckbox').click(function(){ $(‘.someCheckbox’).click(function(){
if(this.checked){ var checked= this.checked;
$('#input_carModel').val(defaultSettings.carModel);
$('#input_carYear').val(defaultSettings.carYear); $.each([‘carModel’, ‘carYear’, ‘carMiles’, ‘carTint’, function (i,key) {
$('#input_carMiles').val(defaultSettings.carMiles); $(#input_ + key).val(checked ? defaultSettings[key] : ‘’);
$('#input_carTint').val(defaultSettings.carTint); });
} });
else
{
$('#input_carModel').val('');
$('#input_carModel').val('');
$('#input_carModel').val('');
$('#input_carModel').val('');
}
});
Usar CSS Hooks
La API CSS hooks permite a los desarrolladores obtener y establecer particular valores CSS.
$.cssHooks['borderRadius'] = {
get: function(elem, computed, extra){
// Depending on the browser, read the value of
// -moz-border-radius, -webkit-border-radius or border-radius
},
set: function(elem, value){
// Set the appropriate CSS3 property
}
};
// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);
https://github.com/brandonaaron/jquery-cssHooks -> Colección de CSS Hooks
Usar Custom Easing Functions
El plugin jQuery easing plugin permite añadir efectos a tus animaciones.
Copiar el efecto que necesitas del plugin y añadirlo a jQuery.easing
$.easing.easeInOutQuad = function (x, t, b, c, d)
{
if ((t/=d/2) < 1)
return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
};
// To use it: $('#elem').animate({width:200},'slow','easeInOutQuad');
$.proxy()
//Ejecutar
• Problema: Desaparece el botón pero no el panel.
• Utilizando $.proxy:
Determinar el tamaño de tu página web
• Cuanto más contenido tenga tu página web, más le costará al navegadorrenderizarla.
• Puedes contar el numero de elementos DOM mediante:
console.log( $('*').length );
• Intenta optimizarla eliminando nodos innecesarios.
Ámbito
• El problema del ámbito
Sólo se está alterando el DOM una vez la página esté cargada.
En casi cualquier aplicación web moderna, el DOM va a cambiar después de que la página haya sido cargada.
Ejecutando jQuery dentro de success de una función AJAX:
• Como manejar el ámbito
A la izquierda, se establece el handler de la manera normal. A la derecha, se realiza una búsqueda de la clase botón en el documento.
La de la derecha te permite controlar el ámbito sobre el DOM que está siendo modificado.
Dada esta función, se reescribe $(document).ready(fuction(){
Y la llamada AJAX de una manera similar:
• Cuando se rompe el ámbito
La variable scope solo será válida dentro de la función my_button_jquery. Es importante tener en cuenta que este ámbito se romperási realizamos una llamada a otra función. Naturaleza asíncrona del modelo de eventos de Javascript.
Por eso, la función AJAX anterior no es posible escribirla con scope dentro del manejador success.
• Eficiencia
Siempre debes invocar el objeto jQuery desde fuera de la función para mejorar la eficiencia.
//mal //bien
Establecer AJAX Global
En una petición AJAX, algunas veces necesitas indicar que la petición está en progreso (mostrar animación, capa más oscura, etc.)
Usar HTML5 Data Attributes
• HTML5 data attributes son utilizados para almacenar información en la páginaweb.
• Para acceder a los atributos del div:
• http://api.jquery.com/data/
Crear un plugin en jQuery
(function($){
$.fn.yourPluginName = function(){ … return this; };
})( jQuery);
$(“p”).yourPluginName();
Fichero jquery.reversetext.js
Crear un plugin en jQuery
HTML:
Resultado:
Comprimir tu Javascript
• Comprimir el código Javascript usando YUICompressor
• Menor tiempo de respuesta -> Agilizamos la carga del página web.
• Otros compresores de Javascript:– http://javascriptcompressor.com/
– http://jscompress.com/
• También podemos comprimir nuestro código CSS– http://www.cssdrive.com/index.php/main/csscompressor/
jQuery mobile
• http://jquerymobile.com/ - Versión 1.2.0
• Librería Mobile UI.
• HTML5 Data Atributtes definidos.<div data-role="page" id="home">
</div>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html
jQuery mobile – Buenas prácticas
a) Mirar detenidamente los ejemplos
– http://jquerymobile.com/demos/
b) Cada página debe de valerse por sí misma
– Debe contener: CSS, Javascript, header, footer, etc.
c) Comprobar que ocurre cuando desactivas Javascript
d) Asegúrate de que tu código no sea vulnerable a los ataques
jQuery mobile – Buenas prácticas
• Minimizar y comprimir
– Reducir el número de peticiones HTTP
– Minimizar los ficheros CSS y Javascript
– Intentar que las páginas webs sean menores de 25KB (para que sea posible el uso de la caché)
– Utilizar la herramienta YUI Compressor
jQuery mobile – Buenas prácticas
• Números de teléfono, mapas y correos electrónicos
– No embeber mapas en las aplicaciones móviles
jQuery mobile – Buenas prácticas
• Usar jQuery Validate– http://bassistance.de/jquery-plugins/jquery-plugin-validation/
– No hay que confiar en el usuario.
jQuery mobile – Buenas prácticas
• Usar ThemeRoller– http://jquerymobile.com/themeroller/
• Usar radio button en lugar de select– Select son menos consistentes, suelen dar más problemas entre las plataformas.
– Permiten al usuario ver al instante las opciones de elección.
jQuery mobile – Buenas prácticas
• Añadir Google Analytics
jQuery mobile – Buenas prácticas
• Usar correctamente las etiquetas meta
• Determinar que estilo de navegación usar:
– La página principal es el menú global
– El menú global es una subpágina
– El menú global está al final de cada página
La página principal es el menú global
• Pros
– Simple
– Buena UX
– Velocidad
• Contras
– Demasiados enlaces
El menú global es una subpágina
• Pros
– Escalable
– Contexto
– Velocidad
• Contras
– Cuestionable UX
El menú global está al final de cada página
• Pros
– Escalable
– Velocidad
– Contexto
– Excelente UX
• Contras
– Aplicaciones no usan esta interfaz
jQuery mobile – Buenas prácticas
• Detectar y redireccionar a móvil
– Browser sniffing - WURFL
• Establecer un enlace a la página completa
• Contenido vs Funcionalidad
GRACIAS
top related