Scribd
Cargar
119 vistas10 páginas

Guia JQuery Inces

jQuery es una biblioteca JavaScript que simplifica la manipulación y modificación del contenido, estilo y comportamiento del DOM. jQuery utiliza selectores para encontrar elementos en el DOM de manera similar a CSS y provee métodos que facilitan tareas comunes como agregar/quitar clases, modificar atributos, manejar eventos y realizar animaciones. Los scripts jQuery siempre se ejecutan dentro de un bloque $(document).ready() para asegurar que el DOM esté completamente cargado.

Cargado por

Ricardo Tillero
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
119 vistas10 páginas

Guia JQuery Inces

jQuery es una biblioteca JavaScript que simplifica la manipulación y modificación del contenido, estilo y comportamiento del DOM. jQuery utiliza selectores para encontrar elementos en el DOM de manera similar a CSS y provee métodos que facilitan tareas comunes como agregar/quitar clases, modificar atributos, manejar eventos y realizar animaciones. Los scripts jQuery siempre se ejecutan dentro de un bloque $(document).ready() para asegurar que el DOM esté completamente cargado.

Cargado por

Ricardo Tillero
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOC, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 10

INCES MILITAR

Barquisimeto – Estado Lara

Fase: Desarrollo Web


Instructor: Kurt Vladimir Gude P.
jQuery
Guía de jQuery

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.

1
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" />
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>.::Ejemplo de Bootstrap::.</title>

<!-- Bootstrap -->


<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 />

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->


<script src="../js/jquery-1.12.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files
as needed -->
<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>
2
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>


<button type="button" class="btn btn-primary" id="boton2">Botón 2</button>
<button type="button" class="btn btn-primary" id="boton3">Botón 3</button>
<button type="button" class="btn btn-primary" id="boton4">Botón 4</button>

3
El siguiente es el código jQuery:

$(document).ready(function() {
$("#boton1").click(function(){
$("p").text("Uno");
});
$("#boton2").click(function(){
$("div p").text("Dos");
});
$("#boton3").click(function(){
$("div").text("Tres");
});
$("#boton4").click(function(){
$("div,p").text("Cuatro");
});
});

3.2. Selección por identificador (id):

Ejemplo de selector Descripción


$('#cedula') Selecciona el único elemento cuyo identificador es 'cedula'.
$('#id1,#id2') Selecciona los dos elementos cuyo identificador es el 'id1' y el 'id2'.

El siguiente es el código html:

<form>
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="text" class="form-control" id="nombre" placeholder="Nombre">
</div>
<div class="form-group">
<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>

El siguiente es el código jQuery:

$(document).ready(function() {
$("#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("");
});
});

4
3.3. Selección por clase (class):

Ejemplo de selector Descripción


$('.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'.

El siguiente es el código html:

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

<button type="button" class="btn btn-primary" id="boton1">Botón 1</button>


<button type="button" class="btn btn-primary" id="boton2">Botón 2</button>
<button type="button" class="btn btn-primary" id="boton3">Botón 3</button>
<button type="button" class="btn btn-primary" id="boton4">Botón 4</button>

El siguiente es el código jQuery:

$(document).ready(function() {
$("#boton1").click(function(){
$(".texto").text("Uno");
});
$("#boton2").click(function(){
$("p.texto").text("Dos");
});
$("#boton3").click(function(){
$("div p.texto").text("Tres");
});
$("#boton4").click(function(){
$("p.texto,div.texto").text("Cuatro");
});
});

-------- o --------

5
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).

El siguiente es el código html:

<p class="bg-primary" id="parrafo">Este es un <b>gran</b> párrafo</p>


<form>
<div class="form-group">
<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>

El siguiente es el código jQuery:

$(document).ready(function() {
$("#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 --------

6
4.2. El método attr:

Ejemplo de método Descripción


$("#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".

El siguiente es el código html:

<form>
<div class="form-group">
<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>

El siguiente es el código jQuery:

$(document).ready(function() {
$("#activar").click(function(){
$('#nombre').attr('disabled',false);
});
$("#desactivar").click(function(){
$('#nombre').attr('disabled',true);
});
});

-------- o --------

7
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:

Ejemplo de método Descripción


$('#cedula').focus(); Coloca el foco al elemento con identificador 'cedula'.

-------- o --------

8
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>

El siguiente es el código html:

<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>[email protected]</td>
</tr>
<tr>
<td>Salvador</td>
<td>Dalí</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>

</div>
</div>
</div>
</div>

9
-------- o --------

Instructor: Vladimir Gude


Email: [email protected]
Barquisimeto - Estado Lara - Venezuela
Mayo - 2016

10

También podría gustarte