Jquery

¿QUÉ ES JQUERY?
Framework JavaScript creado por Jhon Resig
en el año 2005 y presentado el 2006.
Reunió una serie de funciones para que por
medio de programación fuera sencillo
encontrar o ―consultar‖ elementos en una
página Web y asignarles comportamientos.
JQuery = JavaScript Query.
Enero 2006:
 Modificaciones DOM
 Animaciones básicas

jQuery ofrece métodos para la mayoría de los
eventos — entre
ellos $.fn.click, $.fn.focus, $.fn.blur,$.fn.chan
ge, etc.

¿QUÉ ES DOM?
DOM (Document Object Model – Modelo de objetos del documento).
Interfaz de programación para manipular dinámicamente contenido
estructurado dentro de un documento HTML mediante lenguaje
EMCAScript (JavaScript).
Ejemplo:
<html>
<head>
<script type="text/javascript">
function muestraValor(){
valor = document.getElementById(“inputDemo”).value;
alert(valor);
}
</script>
</head>
<body onLoad=“muestraValor()”>
<input type=“text” id=“inputDemo” value=“Valor del inputText” />
</body>
</html>

¿POR QUÉ USAR JQUERY?
Mejoramiento sitios y sistemas web
Amplia variedad de características
Sintaxis fácil de aprender

Robusto en compatibilidad multiplataforma
Un solo archivo compacto
Cientos de plugins
Soporte

Facilidad de aprendizaje
Facilidad de uso
Flexibilidad
Robustez

― La usabilidad demuestra reducciones del ciclo de desarrollo de los
productos de 33-50% (Bosert 1991). ”
jQuery : “write less, do more.”

Fuente : http://www.webappers.com/

REFERENCIA API (INTERFAZ DE PROGRAMACIÓN DE APLICACIONES)

Selectors
Events
Attributes
CSS
Traversing
Manipulation
Core
Effects
Ajax
Utilities
Deferred Object.

Selectors (Selectores)
 Basic (Básicos):






Seleccionar todos los elementos : $(“*”)
Seleccionar un elemento por tag : $(“div”)
Seleccionar por clase : $(“.class”)
Seleccionar por ID : $(“#id”)
Selección Multiple : $(“#id,.class,SelectorN”)

Selectors (Selectores)
 Hierarchy (Jerarquía):
 Seleccionar Hijo: $(“padre > hijo”)

 Por Descendencia : $(“ancestro descendiente”)
 Adyacente siguiente: $(“anterior + siguiente”)
 Elementos después de Selector: $(“#id ~ div”)

Events (Eventos)
 Document Loading (Carga de documento):
 $(document).ready (function(){ acción a realizar });
 Abreviado : $(function(){ acción a realizar });
 $(window).load (function(){ acción a realizar });
 $(window).unload (function(){ acción a realizar });

Diferencias entre $(document).ready y $(window).load
$(document).ready
$(window).load 


Jerarquia DOM
Documento completo

Contenido(imágenes,textos,etc)

Events (Eventos)
 Mouse events (Eventos del Mouse):
 click, dblclick, focusin, focusout , hover …….
 Form Events (Eventos de Formulario)
 blur, change, focus, select, submit
 Keyboard Events (Eventos de Teclado)
 keydown, keypress, keyup
 Otros (Event Object, Browser Events)

Attributes (Atributos)
 .attr(Atributo): Obtiene valor de atributo
 .attr(Atributo,valor): Setea atributo
 $("#btn").attr("style","background-color:#f0f0f0");
 .removeAttr(atributo)
 $("#btn").removeAttr("style”);
 .addClass(clase)
 $("#btn").addClass(“claseCSS”);
 .removeClass(clase)
 $("#btn").removeClass(“claseCSS”).addClass(“otraCl”);

Referencia API (interfaz de programación de aplicaciones)

Attributes (Atributos)
 .val(): Obtiene valor de elemento
 $("#InputText").val();
 .val(valor): Setea valor a elemento
 $("#InputText").val(“Presentación”);
 .html(): Obtiene html de un elemento
 <div id=“divPrueba”> Contenido </div>
 $("# divPrueba ").html(); = “Contenido”
 .html(contenido): Setea valor a elemento
 $("# divPrueba ").html(“Nuevo Contenido”);


• Core (Núcleo)
– jQuery.noConflict();  desde versión 1.0
• $  jQuery
• Muchas librerias utilizan $

$

$$
.html

$


• Core (Núcleo)
– Solución : Reemplazar $ por otro carácter
• var j = jQuery.noConflict();
• j(“#inputText”).val(“Ejemplo jQuery.noConflict();”);

j

$$
.html

$

Effects (Efectos)






Básicos: hide(), show(), toggle()
Fading: fadeIn(), fadeOut(), fadeTo(), fadeToggle()
Sliding: slideDown(), slideUp(), slideToogle()
Custom: animate(), delay(), stop() ……

Más efectos ?  JQueryUI

Effects (Efectos)
 Callbacks : Secuencia de llamada a funciones.
 Ejemplo:
var funcionCallback = function(){
alert(“Fin de ejecución.”);
};
var efecto = function(){
$(“#ID”).fadeOut(300,funcionCallback);
};
efecto();

Ajax
 $.get(url,parameters,function)
 Ejemplo :
var valorAjax = $.get(“pagina.jsp”,{ valor:”PRO1”},
function(data){
$(“#divPrueba”).html(data);
});
¿Puedo manejar la respuesta de un AJAX?
- success, complete, error
valorAjax.error(function(){
alert(“El proceso no fue realizado de forma exitosa”);
});

Ajax

 $. getJSON() : carga *JSON datos desde server
 $.getScript() : Carga archivo JS desde server
 .load() : Carga los datos HTML dentro de un el.
 $(―#DIV‖).load(―documento.html‖);
 $.post(): Carga datos de server con POST request.

JQUERY MOBILE
Framework para Smartphones y Tablets
Construido en base al núcleo de JQuery
Compatible con las principales plataformas
móviles

• Simplicidad

• Mejora Progresiva

• Accesibilidad

• Peso Ligero

• Tematización

JQUERY MOBILE
• Componentes UI

PAGINAS A CONSULTAR
•

http://librojquery.com/ : -------------- Recomendada

•

http://es.wikipedia.org/wiki/JQuery

UNIVERSIDAD POPULAR DEL CESAR
NASER ROMERO DUARTE
INGENIERIA Y TECNOLOGIAS
TECNOLOGIA WEB
2013

Jquery

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Jquery

Jquery