3. JQuery
Librería basada en JavaScript que se importa en el documento y está
lista para usar.
Multi navegador.
La más popular hoy en día.
Gran cantidad de pequeñas librerías montadas sobre JQuery.
Open Source.
Preparada para manejar:
Elementos del DOM
Eventos
Animaciones
AJAX
4. JQuery
Características de jQuery
-Acceder al documento HTML (DOM = Document Object Model)
-Modificar la apariencia de la pagina.
-Modificar el contenido de la pagina.
-Manejar eventos de los elementos de la pagina.
-Crear efectos visuales.
-Manipular estilos CSS (Cascading Style Sheets).
-Gran variedad de Plugins.
6. JQuery
El objeto jQuery y la función $()
La forma básica de interactuar con la página es mediante la función $()
(un alias de jQuery()) que recibe como parámetro una expresión CSS o el
nombre de una etiqueta HTML.
jQuery() - $()
Ejemplo:
$('#divDatosUsuario');
$('.boton');
7. JavaScript
Para ejecutar código JavaScript cuando se carga la
página (sin JQuery)
HTML:
<html><head>
<script type="text/javascript"
src="js/miLibreria.js"></script>
</head>
<body onLoad=“javascript: func()”> …
</body></html>
JavaScript:
var func = function() {
alert(“hola”);
}
8. JQuery
Para ejecutar código JavaScript cuando se carga la página
(con JQuery)
HTML:
<html><head>
<script type="text/javascript" src="js/jquery1.10.2.min.js"></script>
</head>
<body onLoad=“javascript: func()”> …
</body></html>
Javascript:
$(document).ready(function() {
});
a
alert(“hola”);
9. JQuery – Como funciona?
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});
$ - Es el objeto JQuery (alias) que define la librería. A
partir de $ podemos seleccionar elementos del HTML.
“a” – Es un selector (igual que CSS) que selecciona todos
los elementos A de HTML.
click() – Indica que se va a capturar el evento click del
elemento seleccionado.
$(this) – Me selecciono a mi mismo, en este caso es
$(“a”).
hide() – Es un efecto.
10. JQuery
Para leer o modificar un atributo de un elemento HTML
var imageSource = $(„img‟).attr(„src‟);
$(„img‟).attr({src: „images/cover2.jpg‟, alt:
„cover2‟});
Para eliminar un atributo
$(„img‟).removeAttr(„height‟);
Para cambiar el contenido de elementos HTML
var strongContent = $(„strong‟).html();
var pContent = $(„p‟).html();
$(„strong‟).html(pContent);
$(„p‟).html(strongContent);