Guia jQuery INCES Militar - Kurt Gude

INCES MILITAR
Barquisimeto – Estado Lara
1
jQuery
Fase: Desarrollo Web
Instructor: Kurt Vladimir Gude P.
G
Gu
uí
ía
a d
de
e j
jQ
Qu
ue
er
ry
y
1. Introducción a jQuery:
jQuery es un framework JavaScript libre y Open Source, del lado cliente, que se centra en la
interacción entre el DOM, JavaScript, AJAX y Html. El objetivo de esta librería JavaScript es simplificar
los comandos comunes de JavaScript. De hecho, el lema de jQuery es «Escribir menos para hacer más»
(Write less, do more).
jQuery fue creada inicialmente por John Resig y nos permite de una manera sencilla y eficiente:
 Acceder a elementos en un documento.
 Modificar la apariencia de una web.
 Alterar el contenido de un documento.
 Responder a una interacción del usuario.
 Animar cambios en un documento.
 Recoger información del servidor sin refrescar la página.
 Tareas diversas de Javascript.
Además nos permite hacerlo sin tener que preocuparnos más por las diferencias entre
navegadores, como pasa en muchas ocasiones si utilizamos directamente Javascript.
1.1. Versiones 2.x o 1.x:
Por el momento, jQuery ofrece en paralelo dos versiones, la 1.x y la 2.x. Es importante conocer
las diferencias.
1.1.1. jQuery 2.x:
Esta versión es la más compacta con 81,6 kb. Pero esta versión 2.0 de jQuery no tiene en
cuenta Internet Explorer 6, 7 y 8. Esto se justifica por la baja utilización de las hojas de estilo CSS
modernas en estas versiones.
Esta situación es delicada para los desarrolladores. Si su aplicación o sitio web tiene que ser
compatible para todo el mundo, se privará de alrededor del 40% de los usuarios de Internet Explorer en la
red. Sin embargo, en los próximos años, la parte del mercado de estas versiones excluidas irá
disminuyendo y este inconveniente será menos importante.
1.1.2. jQuery 1.x:
Las funcionalidades de la versión 1.x son idénticas a las de la versión 2.x, excepto aquellas que
soportan todavía las versiones 6, 7 y 8 de Internet Explorer.
Esta mayor compatibilidad comporta un aumento de peso bastante sensible con sus 94,1 kb.
La comunidad jQuery afirma que las versiones 1.x tendrán los mismos desarrollos que las
versiones 2.x. Pero según el autor, hay que ser realista. Cuando estas versiones de Internet Explorer
sean más frágiles, se puede prever que se abandonará la serie de las versiones 1.x.

2
1.2. ¿Cómo utilizar jQuery?:
Para aprovechar las bondades de jQuery en un documento html, se debe contar con:
 La librería JQuery descargada.
 Un editor de texto como NotePad, NotePad++ o WordPadm en Windows; en Linux puedes usar G-
Edit. También puede utilizar otros editores orientados al desarrollo web como Netbeans, Sublime
Text y herramientas WYSIWYG como Adobe Dreamweaber.
1.3. Ejemplo de documento HTML usando jQuery y Bootstrap:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<title>.::Ejemplo de Bootstrap::.</title>

<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"
/>
<link rel="stylesheet" type="text/css" href="../css/otra_pagina.css" />
</head>
<body>
<h1>Hola, mundo!</h1>
<hr />

<script src="../js/jquery-1.12.4.min.js"></script>

<script src="../js/bootstrap.min.js"></script>
<script src="../js/ejemplo.js"></script>
</body>
</html>
-------- o --------
2. Iniciar un script jQuery:
Todas las instrucciones o, para ser más precisos, todos los scripts jQuery, se articulan alrededor
de un modelo único. Éste es:
jQuery(function(){
//contenido que se ejecuta cuando se carga el documento
});
Para ahorrar pulsaciones del teclado, se utiliza casi siempre el signo dólar ($), que funciona como
alias de jQuery:
$(function(){
//contenido externo que se ejecuta cuando se cargue el documento
});
Haciendo referencia a este modelo, todo script jQuery empieza por:
<script>
$(document).ready(function() {
// código jQuery
});
</script>

3
Es decir, crear un objeto jQuery ($) a partir del documento (document), cuando esté
preparado (ready).
La particularidad de esta función es que carga los elementos del DOM tan pronto como estén
disponibles, es decir, antes de la carga completa de la página.
Esta función de jQuery le diferencia del JavaScript clásico. Por ejemplo, éste usa el clásico
window.onload = function(), que espera a que la página y todos los elementos que contiene estén
completamente cargados. Esto puede ser muy largo, especialmente cuando hay imágenes con un
tamaño importante. Es una particularidad esencial de jQuery que se basa, recordemos, de manera nativa
en los elementos del DOM.
Este modo de funcionamiento presenta muchas ventajas:
 Todos los elementos de la página están incluidos en un objeto que los selectores, los métodos y las
funciones de jQuery pueden manejar.
 El código Html está desprovisto de cualquier mención JavaScript, como por ejemplo las notaciones
<a href="javascript:void(0);">enlace </a>. Todo el código JavaScript/jQuery se sitúa
en una parte separada de la página Html (entre las etiquetas <head>..</head>) o en un archivo js
externo, lo que respeta completamente el principio de separación del contenido y de la presentación.
Con $(document).ready(), los elementos de la página están a disposición del desarrollador,
antes de la carga completa y su visualización. Esto es muy práctico para activar los efectos del
navegador de aparición o desaparición de la página.
-------- o --------
3. Los selectores:
Los selectores básicos de jQuery no son más que una reformulación de los métodos
getElementById, getElementsByClassName y getElementsByTagName de JavaScript tradicional.
La notación de jQuery tiene la ventaja de ser más concisa y mucho más intuitiva.
3.1. Selección por nombre de la etiqueta (o por elemento):
Ejemplo de selector Descripción
$('p') Selecciona todos los elementos o etiquetas con el nombre especificado 'p' (es
decir, todos los párrafos <p>).
$('div p') Selecciona todos los elementos <p> hijos de un elemento <div>.
$('div,p') Selecciona todos los elementos <p> y los elementos <div>.
El siguiente es el código html:
<p class="bg-primary">Este es un párrafo</p>
<div>
<p class="bg-success">Este es un párrafo dentro de un div</p>
</div>
<div class="bg-info">Este es un div</div>
<button type="button" class="btn btn-primary" id="boton1">Botón 1</button>

4
El siguiente es el código jQuery:
$("#boton1").click(function(){
$("p").text("Uno");
});
$("div p").text("Dos");
});
$("div").text("Tres");
});
$("div,p").text("Cuatro");
});
});
3.2. Selección por identificador (id):
$('#cedula') Selecciona el único elemento cuyo identificador es 'cedula'.
$('#id1,#id2') Selecciona los dos elementos cuyo identificador es el 'id1' y el 'id2'.
<form>
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="text" class="form-control" id="nombre" placeholder="Nombre">
</div>
<label for="apellido">Apellido:</label>
<input type="text" class="form-control" id="apellido"
placeholder="Apellido">
</div>
</form>
<button type="button" class="btn btn-primary" id="bt_asignar">Asignar</button>
<button type="button" class="btn btn-primary" id="bt_cambiar">Cambiar</button>
<button type="button" class="btn btn-primary" id="bt_limpiar">Limpiar</button>
$("#bt_asignar").click(function(){
$("#nombre").val("Vladimir");
$("#apellido").val("Gude");
});
$("#bt_cambiar").click(function(){
var nombre = $('#nombre').val();
var apellido = $('#apellido').val();
$("#nombre").val(apellido);
$("#apellido").val(nombre);
});
$("#bt_limpiar").click(function(){
$("#nombre,#apellido").val("");
});
});

5
3.3. Selección por clase (class):
$('.clase') Selecciona todos los elementos (o etiquetas) con la clase especificada
'clase'.
$('p.clase') Selecciona todos los elementos (o etiquetas) <p> con la clase especificada
'clase'.
$('div p.clase') Selecciona todos los elementos (o etiquetas) <p> con la clase especificada
'clase' hijos del elemento <div>.
$('.clase1.clase2') Selecciona todos los elementos (o etiquetas) que tienen la clase 'clase1' o
la clase 'clase2'.
<p class="bg-primary texto">Este es un párrafo</p>
<div>
<p class="bg-success texto">Este es un párrafo dentro de un div</p>
</div>
<div class="bg-info texto">Este es un div</div>
$(".texto").text("Uno");
});
$("p.texto").text("Dos");
});
$("div p.texto").text("Tres");
});
$("p.texto,div.texto").text("Cuatro");
});
});
-------- o --------

6
4. Los métodos:
Um método tiene la siguiente sintaxis:
$("elemento").metodo();
4.1. Los métodos: text, html, val:
Ejemplo de método Descripción
$('p').text(); Retorma el texto (contenido) del elemento (o etiqueta) seleccionado.
$('p').html(); Retorma el texto (contenido incluyendo etiquetas) del elemento (o etiqueta)
seleccionado.
$('#cedula').val(); Retorna el contenido del atributo value de un elemento input (text, textarea,
select).
<p class="bg-primary" id="parrafo">Este es un <b>gran</b> párrafo</p>
<form>
<label for="cedula">Cédula:</label>
<input type="text" class="form-control" id="cedula" placeholder="Cédula">
</div>
</form>
<button type="button" class="btn btn-primary" id="bt_text">Botón text</button>
<button type="button" class="btn btn-primary" id="bt_html">Botón html</button>
<button type="button" class="btn btn-primary" id="bt_val">Botón val</button>
$("#bt_text").click(function(){
var un_texto = $("#parrafo").text();
alert("Text: " + un_texto);
});
$("#bt_html").click(function(){
var un_html = $("#parrafo").html();
alert("Html: " + un_html);
});
$("#bt_val").click(function(){
var un_valor = $("#cedula").val();
alert(un_valor);
});
});
-------- o --------

7
4.2. El método attr:
$("#enlace").attr("href"); Retorma el valor del atributo href del elemento con
identificador "enlace".
$("#enlace").attr("href","pag1.html"); Asigna el valor "pag1.html" al atributo href del
elemento con identificador "enlace".
$("#foto").attr("alt","foto1"); Asigna el valor "foto1" al atributo alt del
elemento con identificador "foto".
$('#nombre').attr('disabled',true); Asigna el valor true al atributo disabled del
elemento con identificador "nombre".
<form>
<label for="nombre">Nombre:</label>
<input type="text" class="form-control" id="nombre" placeholder="Nombre">
</div>
</form>
<button type="button" class="btn btn-primary" id="activar">Activar</button>
<button type="button" class="btn btn-primary" id="desactivar">
Desactivar</button>
$("#activar").click(function(){
$('#nombre').attr('disabled',false);
});
$("#desactivar").click(function(){
$('#nombre').attr('disabled',true);
});
});
-------- o --------

8
4.3. El método prop:
La diferencia entre prop() y attr() es que el método attr() coge el atributo que se ha
determinado en el código Html, mientras que el método prop() coge una propiedad del DOM.
Como propiedades que se puede modificar, podemos citar:
 checked de las etiquetas <input> de tipo radio o checkbox.
 selected de la etiqueta <select>.
 disabled de las etiquetas <input>, <textarea>, <button>, <select>, <option> y
<optgroup>.
 readonly de las etiquetas <input> de texto o de contraseña y <textarea>.
 multiple de la etiqueta <select>.
Etiqueta Propiedades
<input> text,password, <textarea> "disabled", "readonly"
<input> radio, checkbox "disabled", "checked"
<select> "disabled", "selected", "multiple"
<button> "disabled"
-------- o --------
5. Eventos:
Mouse events Keyboard events Form events Document/win events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
5.1. Evento focus:
$('#cedula').focus(); Coloca el foco al elemento con identificador 'cedula'.
-------- o --------

9
6. Ejemplo de ventana para una tabla:
El siguiente es el código css:
<style>
.demo {
position: relative;
height: 130px;
border: 1px solid black;
margin-top: 10px;
padding: 3px;
overflow: auto;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6" style="background:#ccc;">
<h3>Formulario:</h3>
</div>
<div class="col-xs-6 col-md-6" style="background:#eee;">
<h3>Lista:</h3>
<div class="demo">
<table class="table">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pablo</td>
<td>Picasso</td>
<td>picasso@example.com</td>
</tr>
<tr>
<td>Salvador</td>
<td>Dalí</td>
<td>dali@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

10
-------- o --------
Instructor: Vladimir Gude
Email: vladimirgude@yahoo.es
Barquisimeto - Estado Lara - Venezuela
Mayo - 2016

Guia jQuery INCES Militar - Kurt Gude

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Guia jQuery INCES Militar - Kurt Gude

Similar a Guia jQuery INCES Militar - Kurt Gude (20)

Más de José Ricardo Tillero Giménez

Más de José Ricardo Tillero Giménez (20)

Último

Último (20)

Guia jQuery INCES Militar - Kurt Gude