jQuery - Guía rápida
¿Qué es jQuery?
jQuery es una biblioteca JavaScript rápida y concisa creada por John Resig en 2006 con un bonito lema: Write less, do more. jQuery simplifica el recorrido de documentos HTML, el manejo de eventos, la animación y las interacciones Ajax para un desarrollo web rápido. jQuery es un conjunto de herramientas de JavaScript diseñado para simplificar varias tareas escribiendo menos código. Aquí está la lista de características principales importantes compatibles con jQuery:
DOM manipulation - jQuery facilitó la selección de elementos DOM, negociarlos y modificar su contenido mediante el uso de un motor de selección de código abierto entre navegadores llamado Sizzle.
Event handling - jQuery ofrece una forma elegante de capturar una amplia variedad de eventos, como un usuario que hace clic en un enlace, sin la necesidad de saturar el código HTML con controladores de eventos.
AJAX Support - El jQuery le ayuda mucho a desarrollar un sitio receptivo y rico en funciones utilizando tecnología AJAX.
Animations - El jQuery viene con muchos efectos de animación incorporados que puede utilizar en sus sitios web.
Lightweight - La jQuery es una biblioteca muy liviana, de aproximadamente 19 KB de tamaño (minificada y comprimida con gzip).
Cross Browser Support - jQuery es compatible con varios navegadores y funciona bien en IE 6.0+, FF 2.0+, Safari 3.0+, Chrome y Opera 9.0+
Latest Technology - jQuery admite selectores CSS3 y sintaxis XPath básica.
¿Cómo usar jQuery?
Hay dos formas de usar jQuery.
Local Installation - Puede descargar la biblioteca jQuery en su máquina local e incluirla en su código HTML.
CDN Based Version - Puede incluir la biblioteca jQuery en su código HTML directamente desde Content Delivery Network (CDN).
Instalación local
Ve a la https://jquery.com/download/ para descargar la última versión disponible.
Ahora pon descargado jquery-2.1.3.min.js archivo en un directorio de su sitio web, por ejemplo, / jquery.
Ejemplo
Ahora puede incluir la biblioteca jquery en su archivo HTML de la siguiente manera:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>Esto producirá el siguiente resultado:
Versión basada en CDN
Puede incluir la biblioteca jQuery en su código HTML directamente desde Content Delivery Network (CDN). Google y Microsoft ofrecen entrega de contenido para la última versión.
Estamos utilizando la versión de Google CDN de la biblioteca a lo largo de este tutorial.
Ejemplo
Ahora reescribamos el ejemplo anterior usando la biblioteca jQuery de Google CDN.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript">
$(document).ready(function() {
document.write("Hello, World!");
});
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>Esto producirá el siguiente resultado:
¿Cómo llamar a las funciones de una biblioteca jQuery?
Como casi todo lo que hacemos cuando usamos jQuery lee o manipula el modelo de objetos del documento (DOM), debemos asegurarnos de que comenzamos a agregar eventos, etc., tan pronto como el DOM esté listo.
Si desea que un evento funcione en su página, debe llamarlo dentro de la función $ (document) .ready (). Todo lo que contiene se cargará tan pronto como se cargue el DOM y antes de que se carguen los contenidos de la página.
Para hacer esto, registramos un evento listo para el documento de la siguiente manera:
$(document).ready(function() {
// do stuff when DOM is ready
});Para llamar a cualquier función de la biblioteca jQuery, use etiquetas de script HTML como se muestra a continuación:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { $("div").click(function() {alert("Hello, world!");});
});
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>Esto producirá el siguiente resultado:
¿Cómo utilizar scripts personalizados?
Es mejor escribir nuestro código personalizado en el archivo JavaScript personalizado: custom.js, como sigue -
/* Filename: custom.js */
$(document).ready(function() { $("div").click(function() {
alert("Hello, world!");
});
});Ahora podemos incluir custom.js archivo en nuestro archivo HTML de la siguiente manera:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" src = "/jquery/custom.js">
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see a dialogue box.
</div>
</body>
</html>Esto producirá el siguiente resultado:
Usar varias bibliotecas
Puede utilizar varias bibliotecas todas juntas sin entrar en conflicto entre sí. Por ejemplo, puede usar las bibliotecas javascript jQuery y MooTool juntas. Puede consultar el método jQuery noConflict para obtener más detalles.
Lo que sigue ?
No se preocupe demasiado si no entendió los ejemplos anteriores. Los comprenderá muy pronto en los capítulos siguientes.
El próximo capítulo trataría de cubrir algunos conceptos básicos que provienen de JavaScript convencional.
jQuery es un marco creado con capacidades de JavaScript. Por lo tanto, puede utilizar todas las funciones y otras capacidades disponibles en JavaScript. Este capítulo explicaría los conceptos más básicos pero que se utilizan con frecuencia en jQuery.
Cuerda
Una cadena en JavaScript es un objeto inmutable que no contiene ninguno, uno o muchos caracteres. A continuación se muestran los ejemplos válidos de una cadena de JavaScript:
"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"Números
Los números en JavaScript son valores IEEE 754 de formato de 64 bits de doble precisión. Son inmutables, como cuerdas. A continuación se muestran los ejemplos válidos de números de JavaScript:
5350
120.27
0.26Booleano
Un booleano en JavaScript puede ser true o false. Si un número es cero, el valor predeterminado es falso. Si una cadena vacía por defecto es falsa.
A continuación se muestran los ejemplos válidos de un JavaScript booleano:
true // true
false // false
0 // false
1 // true
"" // false
"hello" // trueObjetos
JavaScript soporta muy bien el concepto de Objeto. Puede crear un objeto utilizando el objeto literal de la siguiente manera:
var emp = {
name: "Zara",
age: 10
};Puede escribir y leer las propiedades de un objeto usando la notación de puntos de la siguiente manera:
// Getting object properties
emp.name // ==> Zara
emp.age // ==> 10
// Setting object properties
emp.name = "Daisy" // <== Daisy
emp.age = 20 // <== 20Matrices
Puede definir matrices utilizando el literal de matriz de la siguiente manera:
var x = [];
var y = [1, 2, 3, 4, 5];Una matriz tiene un length propiedad que es útil para la iteración -
var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++) {
// Do something with x[i]
}Funciones
Una función en JavaScript puede tener nombre o ser anónima. Una función nombrada se puede definir usando la palabra clave de función de la siguiente manera:
function named(){
// do some stuff here
}Una función anónima se puede definir de manera similar a una función normal, pero no tendría ningún nombre.
Se puede asignar una función anónima a una variable o pasar a un método como se muestra a continuación.
var handler = function (){
// do some stuff here
}JQuery hace un uso de funciones anónimas con mucha frecuencia de la siguiente manera:
$(document).ready(function(){
// do some stuff here
});Argumentos
Los argumentos variables de JavaScript son un tipo de matriz que tiene la propiedad de longitud . El siguiente ejemplo lo explica muy bien:
function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(1); //==> "number", 1
func("1", "2", "3"); //==> "string", 3El objeto de argumentos también tiene una propiedad callee , que se refiere a la función en la que se encuentra. Por ejemplo
function func() {
return arguments.callee;
}
func(); // ==> funcContexto
Palabra clave famosa de JavaScript thissiempre se refiere al contexto actual. Dentro de una funciónthis el contexto puede cambiar, dependiendo de cómo se llame a la función -
$(document).ready(function() {
// this refers to window.document
});
$("div").click(function() {
// this refers to a div DOM element
});Puede especificar el contexto para una llamada de función utilizando los métodos incorporados a la función call() y apply() métodos.
La diferencia entre ellos es cómo pasan los argumentos. Call pasa todos los argumentos como argumentos a la función, mientras que apply acepta una matriz como argumentos.
function scope() {
console.log(this, arguments.length);
}
scope() // window, 0
scope.call("foobar", [1,2]); //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2Alcance
El alcance de una variable es la región de su programa en la que está definida. La variable de JavaScript tendrá solo dos ámbitos.
Global Variables - Una variable global tiene un alcance global, lo que significa que está definida en todas partes en su código JavaScript.
Local Variables- Una variable local será visible solo dentro de una función donde esté definida. Los parámetros de la función son siempre locales para esa función.
Dentro del cuerpo de una función, una variable local tiene prioridad sobre una variable global con el mismo nombre:
var myVar = "global"; // ==> Declare a global variable
function ( ) {
var myVar = "local"; // ==> Declare a local variable
document.write(myVar); // ==> local
}Llamar de vuelta
Una devolución de llamada es una función de JavaScript simple que se pasa a algún método como argumento u opción. Algunas devoluciones de llamada son solo eventos, llamados para darle al usuario la oportunidad de reaccionar cuando se activa un cierto estado.
El sistema de eventos de jQuery usa tales devoluciones de llamada en todas partes, por ejemplo:
$("body").click(function(event) {
console.log("clicked: " + event.target);
});La mayoría de las devoluciones de llamada proporcionan argumentos y un contexto. En el ejemplo del controlador de eventos, la devolución de llamada se llama con un argumento, un evento.
Algunas devoluciones de llamada son necesarias para devolver algo, otras hacen que ese valor de retorno sea opcional. Para evitar el envío de un formulario, un controlador de eventos de envío puede devolver falso de la siguiente manera:
$("#myform").submit(function() {
return false;
});Cierres
Los cierres se crean cada vez que se accede a una variable definida fuera del ámbito actual desde dentro de algún ámbito interno.
El siguiente ejemplo muestra cómo la variable counter es visible dentro de las funciones de creación, incremento e impresión, pero no fuera de ellas:
function create() {
var counter = 0;
return {
increment: function() {
counter++;
},
print: function() {
console.log(counter);
}
}
}
var c = create();
c.increment();
c.print(); // ==> 1Este patrón le permite crear objetos con métodos que operan con datos que no son visibles para el mundo exterior. se debe notar quedata hiding es la base misma de la programación orientada a objetos.
Patrón de proxy
Un proxy es un objeto que se puede utilizar para controlar el acceso a otro objeto. Implementa la misma interfaz que este otro objeto y le transmite cualquier invocación de método. Este otro objeto a menudo se denomina sujeto real.
Se puede crear una instancia de un proxy en lugar de este sujeto real y permitir que se acceda a él de forma remota. Podemos guardar el método setArray de jQuery en un cierre y lo sobrescribe de la siguiente manera:
(function() {
// log all calls to setArray
var proxied = jQuery.fn.setArray;
jQuery.fn.setArray = function() {
console.log(this, arguments);
return proxied.apply(this, arguments);
};
})();Lo anterior envuelve su código en una función para ocultar la variable proxy . El proxy luego registra todas las llamadas al método y delega la llamada al método original. El uso de aplicar (esto, argumentos) garantiza que la persona que llama no podrá notar la diferencia entre el método original y el de proxy.
Funciones integradas
JavaScript viene con un conjunto útil de funciones integradas. Estos métodos se pueden utilizar para manipular cadenas, números y fechas.
Las siguientes son funciones importantes de JavaScript:
| No Señor. | Método y descripción |
|---|---|
| 1 | charAt() Devuelve el carácter en el índice especificado. |
| 2 | concat() Combina el texto de dos cadenas y devuelve una nueva cadena. |
| 3 | forEach() Llama a una función para cada elemento de la matriz. |
| 4 | indexOf() Devuelve el índice dentro del objeto String que llama de la primera aparición del valor especificado, o -1 si no se encuentra. |
| 5 | length() Devuelve la longitud de la cadena. |
| 6 | pop() Elimina el último elemento de una matriz y devuelve ese elemento. |
| 7 | push() Agrega uno o más elementos al final de una matriz y devuelve la nueva longitud de la matriz. |
| 8 | reverse() Invierte el orden de los elementos de una matriz: el primero se convierte en el último y el último en el primero. |
| 9 | sort() Ordena los elementos de una matriz. |
| 10 | substr() Devuelve los caracteres en una cadena que comienza en la ubicación especificada hasta el número especificado de caracteres. |
| 11 | toLowerCase() Devuelve el valor de la cadena de llamada convertido a minúsculas. |
| 12 | toString() Devuelve la representación de cadena del valor del número. |
| 13 | toUpperCase() Devuelve el valor de la cadena de llamada convertido a mayúsculas. |
El modelo de objetos de documento
El modelo de objetos de documento es una estructura de árbol de varios elementos de HTML de la siguiente manera:
<html>
<head>
<title>The jQuery Example</title>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
</div>
</body>
</html>Esto producirá el siguiente resultado:
Los siguientes son los puntos importantes sobre la estructura de árbol anterior:
El <html> es el antepasado de todos los demás elementos; en otras palabras, todos los demás elementos son descendientes de <html>.
Los elementos <head> y <body> no solo son descendientes, sino también hijos de <html>.
Asimismo, además de ser el antepasado de <head> y <body>, <html> también es su padre.
Los elementos <p> son hijos (y descendientes) de <div>, descendientes de <body> y <html>, y hermanos entre sí <p> elementos.
Mientras aprende los conceptos de jQuery, será útil comprender el DOM, si no conoce DOM, le sugiero que siga nuestro sencillo tutorial sobre DOM Tutorial .
La biblioteca jQuery aprovecha el poder de los selectores de hojas de estilo en cascada (CSS) para permitirnos acceder rápida y fácilmente a elementos o grupos de elementos en el Modelo de objetos de documento (DOM).
Un jQuery Selector es una función que hace uso de expresiones para encontrar elementos coincidentes de un DOM según los criterios dados. Simplemente puede decir que los selectores se usan para seleccionar uno o más elementos HTML usando jQuery. Una vez que se selecciona un elemento, podemos realizar varias operaciones en ese elemento seleccionado.
La función de fábrica $ ()
Los selectores de jQuery comienzan con el signo de dólar y paréntesis - $(). La función de fábrica$() hace uso de los siguientes tres bloques de construcción al seleccionar elementos en un documento determinado:
| No Señor. | Selector y descripción |
|---|---|
| 1 | Tag Name Representa un nombre de etiqueta disponible en DOM. Por ejemplo$('p') selecciona todos los párrafos <p> en el documento. |
| 2 | Tag ID Representa una etiqueta disponible con el ID dado en el DOM. Por ejemplo$('#some-id') selecciona el elemento único en el documento que tiene un ID de some-id. |
| 3 | Tag Class Representa una etiqueta disponible con la clase dada en DOM. Por ejemplo$('.some-class') selecciona todos los elementos del documento que tienen una clase de alguna clase. |
Todos los elementos anteriores se pueden utilizar solos o en combinación con otros selectores. Todos los selectores de jQuery se basan en el mismo principio, excepto algunos ajustes.
NOTE - La función de fábrica $() es sinónimo de jQuery()función. Entonces, en caso de que esté utilizando cualquier otra biblioteca de JavaScript donde$ el letrero entra en conflicto con otra cosa que puede reemplazar $ firmado por jQuery nombre y puedes usar la función jQuery() en vez de $().
Ejemplo
A continuación se muestra un ejemplo sencillo que utiliza el selector de etiquetas. Esto seleccionaría todos los elementos con un nombre de etiquetap.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<div>
<p class = "myclass">This is a paragraph.</p>
<p id = "myid">This is second paragraph.</p>
<p>This is third paragraph.</p>
</div>
</body>
</html>Esto producirá el siguiente resultado:
¿Cómo utilizar los selectores?
Los selectores son muy útiles y serían necesarios en cada paso al usar jQuery. Obtienen el elemento exacto que desea de su documento HTML.
La siguiente tabla enumera algunos selectores básicos y los explica con ejemplos.
| No Señor. | Selector y descripción |
|---|---|
| 1 | Nombre Selecciona todos los elementos que coinciden con el elemento dado Name. |
| 2 | #CARNÉ DE IDENTIDAD Selecciona un solo elemento que coincide con el dado ID. |
| 3 | .Clase Selecciona todos los elementos que coinciden con el dado Class. |
| 4 | Universal (*) Selecciona todos los elementos disponibles en un DOM. |
| 5 | Elementos múltiples E, F, G Selecciona los resultados combinados de todos los selectores especificados E, F o G. |
Ejemplos de selectores
De manera similar a la sintaxis y los ejemplos anteriores, los siguientes ejemplos le ayudarán a comprender el uso de diferentes tipos de otros selectores útiles:
| No Señor. | Selector y descripción |
|---|---|
| 1 | $('*') Este selector selecciona todos los elementos del documento. |
| 2 | $("p > *") Este selector selecciona todos los elementos que son hijos de un elemento de párrafo. |
| 3 | $("#specialID") Esta función de selector obtiene el elemento con id = "specialID". |
| 4 | $(".specialClass") Este selector obtiene todos los elementos que tienen la clase specialClass . |
| 5 | $("li:not(.myclass)") Selecciona todos los elementos que coinciden con <li> que no tienen class = "myclass". |
| 6 | $("a#specialID.specialClass") Este selector hace coincidir los enlaces con un id de specialID y una clase de specialClass . |
| 7 | $("p a.specialClass") Este selector hace coincidir los enlaces con una clase de specialClass declarada dentro de los elementos <p>. |
| 8 | $("ul li:first") Este selector obtiene solo el primer elemento <li> de <ul>. |
| 9 | $("#container p") Selecciona todos los elementos que coinciden con <p> que son descendientes de un elemento que tiene un ID de contenedor . |
| 10 | $("li > ul") Selecciona todos los elementos emparejados por <ul> que son hijos de un elemento emparejado por <li> |
| 11 | $("strong + em") Selecciona todos los elementos que coinciden con <em> que siguen inmediatamente a un elemento hermano que coincide con <strong>. |
| 12 | $("p ~ ul") Selecciona todos los elementos que coinciden con <ul> que siguen a un elemento hermano que coincide con <p>. |
| 13 | $("code, em, strong") Selecciona todos los elementos que coinciden con <code> o <em> o <strong>. |
| 14 | $("p strong, .myclass") Selecciona todos los elementos emparejados por <strong> que son descendientes de un elemento emparejado por <p> así como todos los elementos que tienen una clase de myclass . |
| 15 | $(":empty") Selecciona todos los elementos que no tienen hijos. |
| dieciséis | $("p:empty") Selecciona todos los elementos que coinciden con <p> que no tienen hijos. |
| 17 | $("div[p]") Selecciona todos los elementos que coinciden con <div> que contienen un elemento que coincide con <p>. |
| 18 | $("p[.myclass]") Selecciona todos los elementos que coinciden con <p> que contienen un elemento con una clase de myclass . |
| 19 | $("a[@rel]") Selecciona todos los elementos que coinciden con <a> que tienen un atributo rel. |
| 20 | $("input[@name = myname]") Selecciona todos los elementos que coinciden con <input> que tienen un valor de nombre exactamente igual a myname. |
| 21 | $("input[@name^=myname]") Selecciona todos los elementos que coinciden con <input> que tienen un valor de nombre que comienza con myname . |
| 22 | $("a[@rel$=self]") Selecciona todos los elementos que coinciden con <a> que tienen relvalor de atributo que termina en self . |
| 23 | $("a[@href*=domain.com]") Selecciona todos los elementos que coinciden con <a> que tienen un valor href que contiene dominio.com. |
| 24 | $("li:even") Selecciona todos los elementos que coinciden con <li> que tienen un valor de índice par. |
| 25 | $("tr:odd") Selecciona todos los elementos que coinciden con <tr> que tienen un valor de índice impar. |
| 26 | $("li:first") Selecciona el primer elemento <li>. |
| 27 | $("li:last") Selecciona el último elemento <li>. |
| 28 | $("li:visible") Selecciona todos los elementos que coinciden con <li> que son visibles. |
| 29 | $("li:hidden") Selecciona todos los elementos que coinciden con <li> que están ocultos. |
| 30 | $(":radio") Selecciona todos los botones de opción del formulario. |
| 31 | $(":checked") Selecciona todas las casillas marcadas en el formulario. |
| 32 | $(":input") Selecciona solo elementos de formulario (entrada, selección, área de texto, botón). |
| 33 | $(":text") Selecciona solo elementos de texto (entrada [tipo = texto]). |
| 34 | $("li:eq(2)") Selecciona el tercer elemento <li>. |
| 35 | $("li:eq(4)") Selecciona el quinto elemento <li>. |
| 36 | $("li:lt(2)") Selecciona todos los elementos que coinciden con el elemento <li> antes del tercero; en otras palabras, los dos primeros elementos <li>. |
| 37 | $("p:lt(3)") selecciona todos los elementos que coinciden con los elementos <p> antes del cuarto; en otras palabras, los primeros tres elementos <p>. |
| 38 | $("li:gt(1)") Selecciona todos los elementos que coinciden con <li> después del segundo. |
| 39 | $("p:gt(2)") Selecciona todos los elementos que coinciden con <p> después del tercero. |
| 40 | $("div/p") Selecciona todos los elementos emparejados por <p> que son hijos de un elemento emparejado por <div>. |
| 41 | $("div//code") Selecciona todos los elementos emparejados por <code> que son descendientes de un elemento emparejado por <div>. |
| 42 | $("//p//a") Selecciona todos los elementos que coinciden con <a> que son descendientes de un elemento que coincide con <p> |
| 43 | $("li:first-child") Selecciona todos los elementos que coinciden con <li> que son el primer hijo de su padre. |
| 44 | $("li:last-child") Selecciona todos los elementos que coinciden con <li> que son el último hijo de su padre. |
| 45 | $(":parent") Selecciona todos los elementos que son padres de otro elemento, incluido el texto. |
| 46 | $("li:contains(second)") Selecciona todos los elementos que coinciden con <li> que contienen el texto en segundo lugar. |
Puede utilizar todos los selectores anteriores con cualquier elemento HTML / XML de forma genérica. Por ejemplo, si selector$("li:first") funciona para el elemento <li> entonces $("p:first") también funcionaría para el elemento <p>.
Algunos de los componentes más básicos que podemos manipular cuando se trata de elementos DOM son las propiedades y atributos asignados a esos elementos.
La mayoría de estos atributos están disponibles a través de JavaScript como propiedades del nodo DOM. Algunas de las propiedades más comunes son:
- className
- tagName
- id
- href
- title
- rel
- src
Considere el siguiente marcado HTML para un elemento de imagen:
<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass"
title = "This is an image"/>En el marcado de este elemento, el nombre de la etiqueta es img, y el marcado para id, src, alt, class y title representa los atributos del elemento, cada uno de los cuales consta de un nombre y un valor.
jQuery nos da los medios para manipular fácilmente los atributos de un elemento y nos da acceso al elemento para que también podamos cambiar sus propiedades.
Obtener valor de atributo
los attr() El método se puede utilizar para obtener el valor de un atributo del primer elemento en el conjunto emparejado o para establecer valores de atributo en todos los elementos emparejados.
Ejemplo
A continuación se muestra un ejemplo simple que obtiene el atributo de título de la etiqueta <em> y establece el valor <div id = "divid"> con el mismo valor:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { var title = $("em").attr("title");
$("#divid").text(title);
});
</script>
</head>
<body>
<div>
<em title = "Bold and Brave">This is first paragraph.</em>
<p id = "myid">This is second paragraph.</p>
<div id = "divid"></div>
</div>
</body>
</html>Esto producirá el siguiente resultado:
Establecer valor de atributo
los attr(name, value) El método se puede usar para establecer el atributo nombrado en todos los elementos del conjunto envuelto usando el valor pasado.
Ejemplo
A continuación se muestra un ejemplo sencillo que establece src atributo de una etiqueta de imagen a una ubicación correcta -
<html>
<head>
<title>The jQuery Example</title>
<base href="https://www.tutorialspoint.com" />
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#myimg").attr("src", "/jquery/images/jquery.jpg");
});
</script>
</head>
<body>
<div>
<img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
</div>
</body>
</html>Esto producirá el siguiente resultado:
Aplicar estilos
los addClass( classes )El método se puede utilizar para aplicar hojas de estilo definidas en todos los elementos coincidentes. Puede especificar varias clases separadas por espacios.
Ejemplo
A continuación se muestra un ejemplo sencillo que establece class atributo de una etiqueta para <p> -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("em").addClass("selected"); $("#myid").addClass("highlight");
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<em title = "Bold and Brave">This is first paragraph.</em>
<p id = "myid">This is second paragraph.</p>
</body>
</html>Esto producirá el siguiente resultado:
Métodos de atributos
La siguiente tabla enumera algunos métodos útiles que puede utilizar para manipular atributos y propiedades:
| No Señor. | Métodos y descripción |
|---|---|
| 1 | attr (propiedades) Establecer un objeto de clave / valor como propiedades para todos los elementos coincidentes. |
| 2 | attr (clave, fn) Establezca una propiedad única en un valor calculado, en todos los elementos coincidentes. |
| 3 | removeAttr (nombre) Elimina un atributo de cada uno de los elementos coincidentes. |
| 4 | hasClass (clase) Devuelve verdadero si la clase especificada está presente en al menos uno del conjunto de elementos coincidentes. |
| 5 | removeClass (clase) Elimina todas o las clases especificadas del conjunto de elementos coincidentes. |
| 6 | toggleClass (clase) Agrega la clase especificada si no está presente, elimina la clase especificada si está presente. |
| 7 | html () Obtenga el contenido html (innerHTML) del primer elemento coincidente. |
| 8 | html (val) Establezca el contenido html de cada elemento coincidente. |
| 9 | texto () Obtenga el contenido de texto combinado de todos los elementos coincidentes. |
| 10 | texto (val) Establezca el contenido de texto de todos los elementos coincidentes. |
| 11 | val () Obtenga el valor de entrada del primer elemento coincidente. |
| 12 | val (val) Establezca el atributo de valor de cada elemento coincidente si se llama en <input> pero si se llama en <select> con el valor <option> pasado, la opción pasada se seleccionará, si se llama en la casilla de verificación o en la casilla de radio, entonces se marcarían todas las casillas de verificación correspondientes y las casillas de radio. |
Ejemplos
De manera similar a la sintaxis y los ejemplos anteriores, los siguientes ejemplos le ayudarán a comprender el uso de varios métodos de atributos en diferentes situaciones:
| No Señor. | Selector y descripción |
|---|---|
| 1 | $("#myID").attr("custom") Esto devolvería el valor del atributo personalizado para el primer elemento que coincida con el ID myID. |
| 2 | $("img").attr("alt", "Sample Image") Esto establece el alt atributo de todas las imágenes a un nuevo valor "Imagen de muestra". |
| 3 | $("input").attr({ value: "", title: "Please enter a value" }); Establece el valor de todos los elementos <input> en la cadena vacía, así como establece el Ejemplo de jQuery en la cadena. Por favor ingrese un valor . |
| 4 | $("a[href^=https://]").attr("target","_blank") Selecciona todos los enlaces con un atributo href que comienzan con https: // y establece su atributo de destino en _blank . |
| 5 | $("a").removeAttr("target") Esto eliminaría el atributo de destino de todos los enlaces. |
| 6 | $("form").submit(function() {$(":submit",this).attr("disabled", "disabled");}); Esto modificaría el atributo deshabilitado al valor "deshabilitado" al hacer clic en el botón Enviar. |
| 7 | $("p:last").hasClass("selected") Esto devuelve verdadero si la última etiqueta <p> tiene una clase asociada seleccionada . |
| 8 | $("p").text() Devuelve una cadena que contiene el contenido de texto combinado de todos los elementos <p> coincidentes. |
| 9 | $("p").text("<i>Hello World</i>") Esto establecería "<I> Hola mundo </I>" como contenido de texto de los elementos <p> coincidentes. |
| 10 | $("p").html() Esto devuelve el contenido HTML de todos los párrafos coincidentes. |
| 11 | $("div").html("Hello World") Esto establecería el contenido HTML de todos los <div> coincidentes en Hello World . |
| 12 | $("input:checkbox:checked").val() Obtenga el primer valor de una casilla de verificación marcada. |
| 13 | $("input:radio[name=bar]:checked").val() Obtenga el primer valor de un conjunto de botones de opción. |
| 14 | $("button").val("Hello") Establece el atributo de valor de cada elemento coincidente <botón>. |
| 15 | $("input").val("on") Esto marcaría todos los botones de radio o casilla de verificación cuyo valor esté "activado". |
| dieciséis | $("select").val("Orange") Esto seleccionaría la opción Naranja en un cuadro desplegable con opciones Naranja, Mango y Plátano. |
| 17 | $("select").val("Orange", "Mango") Esto seleccionaría las opciones Naranja y Mango en un cuadro desplegable con las opciones Naranja, Mango y Plátano. |
jQuery es una herramienta muy poderosa que proporciona una variedad de métodos de recorrido DOM para ayudarnos a seleccionar elementos en un documento al azar, así como en un método secuencial. La mayoría de los métodos DOM Traversal no modifican el objeto jQuery y se utilizan para filtrar elementos de un documento en función de determinadas condiciones.
Buscar elementos por índice
Considere un documento simple con el siguiente contenido HTML:
<html>
<head>
<title>The JQuery Example</title>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>Esto producirá el siguiente resultado:
Encima de cada lista tiene su propio índice y se puede ubicar directamente usando eq(index) método como el siguiente ejemplo.
Cada elemento hijo comienza su índice desde cero, por lo tanto, se accedería al elemento de la lista 2 usando$("li").eq(1) y así.
Ejemplo
A continuación se muestra un ejemplo simple que agrega el color al segundo elemento de la lista.
<html>
<head>
<title>The JQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").eq(2).addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>Esto producirá el siguiente resultado:
Filtrar elementos
los filter( selector )El método se puede utilizar para filtrar todos los elementos del conjunto de elementos coincidentes que no coinciden con los selectores especificados. El selector se puede escribir utilizando cualquier sintaxis de selector.
Ejemplo
A continuación se muestra un ejemplo simple que aplica color a las listas asociadas con la clase media:
<html>
<head>
<title>The JQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").filter(".middle").addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<div>
<ul>
<li class = "top">list item 1</li>
<li class = "top">list item 2</li>
<li class = "middle">list item 3</li>
<li class = "middle">list item 4</li>
<li class = "bottom">list item 5</li>
<li class = "bottom">list item 6</li>
</ul>
</div>
</body>
</html>Esto producirá el siguiente resultado:
Localización de elementos descendientes
los find( selector )El método se puede utilizar para localizar todos los elementos descendientes de un tipo particular de elementos. El selector se puede escribir utilizando cualquier sintaxis de selector.
Ejemplo
A continuación se muestra un ejemplo que selecciona todos los elementos <span> disponibles dentro de diferentes elementos <p> -
<html>
<head>
<title>The JQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("p").find("span").addClass("selected");
});
</script>
<style>
.selected { color:red; }
</style>
</head>
<body>
<p>This is 1st paragraph and <span>THIS IS RED</span></p>
<p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
</body>
</html>Esto producirá el siguiente resultado:
Métodos de filtro DOM de JQuery
La siguiente tabla enumera métodos útiles que puede utilizar para filtrar varios elementos de una lista de elementos DOM:
| No Señor. | Método y descripción |
|---|---|
| 1 | eq (índice) Reduzca el conjunto de elementos emparejados a un solo elemento. |
| 2 | filtro (selector) Elimina todos los elementos del conjunto de elementos coincidentes que no coinciden con los selectores especificados. |
| 3 | filtro (fn) Elimina todos los elementos del conjunto de elementos coincidentes que no coinciden con la función especificada. |
| 4 | es (selector) Compara la selección actual con una expresión y devuelve verdadero, si al menos un elemento de la selección se ajusta al selector dado. |
| 5 | mapa (devolución de llamada) Convierta un conjunto de elementos en el objeto jQuery en otro conjunto de valores en una matriz jQuery (que puede contener o no elementos). |
| 6 | no (selector) Elimina los elementos que coinciden con el selector especificado del conjunto de elementos coincidentes. |
| 7 | rebanada (inicio, [final]) Selecciona un subconjunto de elementos coincidentes. |
Métodos de desplazamiento de DOM de JQuery
La siguiente tabla enumera otros métodos útiles que puede usar para ubicar varios elementos en un DOM:
| No Señor. | Métodos y descripción |
|---|---|
| 1 | agregar (selector) Agrega más elementos, emparejados por el selector dado, al conjunto de elementos emparejados. |
| 2 | andSelf () Agrega la selección anterior a la selección actual. |
| 3 | niños ([selector]) Obtenga un conjunto de elementos que contenga todos los elementos secundarios inmediatos únicos de cada uno de los conjuntos de elementos coincidentes. |
| 4 | más cercano (selector) Obtenga un conjunto de elementos que contengan el elemento principal más cercano que coincida con el selector especificado, incluido el elemento inicial. |
| 5 | contenido () Busque todos los nodos secundarios dentro de los elementos coincidentes (incluidos los nodos de texto) o el documento de contenido, si el elemento es un iframe. |
| 6 | fin( ) Revertir la operación 'destructiva' más reciente, cambiando el conjunto de elementos coincidentes a su estado anterior. |
| 7 | buscar (selector) Busca elementos descendientes que coincidan con los selectores especificados. |
| 8 | siguiente ([selector]) Obtenga un conjunto de elementos que contengan los próximos hermanos únicos de cada uno del conjunto de elementos dado. |
| 9 | nextAll ([selector]) Encuentra todos los elementos hermanos después del elemento actual. |
| 10 | offsetParent () Devuelve una colección jQuery con el padre posicionado del primer elemento coincidente. |
| 11 | padre ([selector]) Obtiene el padre directo de un elemento. Si se llama a un conjunto de elementos, parent devuelve un conjunto de sus elementos principales directos únicos. |
| 12 | padres ([selector]) Obtenga un conjunto de elementos que contengan los antepasados únicos del conjunto de elementos coincidentes (excepto el elemento raíz). |
| 13 | prev ([selector]) Obtenga un conjunto de elementos que contengan los hermanos anteriores únicos de cada uno de los conjuntos de elementos coincidentes. |
| 14 | prevAll ([selector]) Encuentra todos los elementos hermanos delante del elemento actual. |
| 15 | hermanos ([selector]) Obtenga un conjunto de elementos que contenga todos los hermanos únicos de cada uno de los conjuntos de elementos coincidentes. |
La biblioteca jQuery admite casi todos los selectores incluidos en las especificaciones 1 a 3 de la hoja de estilo en cascada (CSS), como se describe en el sitio del World Wide Web Consortium.
Con el uso de la biblioteca JQuery, los desarrolladores pueden mejorar sus sitios web sin preocuparse por los navegadores y sus versiones, siempre que los navegadores tengan JavaScript habilitado.
La mayoría de los métodos CSS de JQuery no modifican el contenido del objeto jQuery y se utilizan para aplicar propiedades CSS en elementos DOM.
Aplicar propiedades CSS
Esto es muy simple para aplicar cualquier propiedad CSS usando el método JQuery css( PropertyName, PropertyValue ).
Aquí está la sintaxis del método:
selector.css( PropertyName, PropertyValue );Aquí puede pasar PropertyName como una cadena de JavaScript y, según su valor, PropertyValue podría ser una cadena o un entero.
Ejemplo
A continuación se muestra un ejemplo que agrega color de fuente al segundo elemento de la lista.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").eq(2).css("color", "red");
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>Esto producirá el siguiente resultado:
Aplicar varias propiedades de CSS
Puede aplicar múltiples propiedades CSS usando un solo método JQuery CSS( {key1:val1, key2:val2....). Puede aplicar tantas propiedades como desee en una sola llamada.
Aquí está la sintaxis del método:
selector.css( {key1:val1, key2:val2....keyN:valN})Aquí puede pasar la clave como propiedad y val como su valor como se describe arriba.
Ejemplo
A continuación se muestra un ejemplo que agrega color de fuente y color de fondo al segundo elemento de la lista.
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("li").eq(2).css({"color":"red", "background-color":"green"});
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>Esto producirá el siguiente resultado:
Configuración del ancho y la altura del elemento
los width( val ) y height( val ) El método se puede utilizar para establecer el ancho y el alto respectivamente de cualquier elemento.
Ejemplo
A continuación se muestra un ejemplo simple que establece el ancho del elemento de la primera división, donde el resto de los elementos tienen el ancho establecido por la hoja de estilo
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div:first").width(100); $("div:first").css("background-color", "blue");
});
</script>
<style>
div {
width:70px; height:50px; float:left;
margin:5px; background:red; cursor:pointer;
}
</style>
</head>
<body>
<div></div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
</body>
</html>Esto producirá el siguiente resultado:
Métodos CSS de JQuery
La siguiente tabla enumera todos los métodos que puede usar para jugar con las propiedades de CSS:
| No Señor. | Método y descripción |
|---|---|
| 1 | css (nombre) Devuelve una propiedad de estilo en el primer elemento coincidente. |
| 2 | css (nombre, valor) Establezca una propiedad de estilo única en un valor en todos los elementos coincidentes. |
| 3 | css (propiedades) Establezca un objeto de clave / valor como propiedades de estilo para todos los elementos coincidentes. |
| 4 | altura (val) Establezca la altura CSS de cada elemento coincidente. |
| 5 | altura () Obtenga la altura calculada actual en píxeles del primer elemento coincidente. |
| 6 | innerHeight () Obtiene la altura interior (excluye el borde e incluye el relleno) del primer elemento coincidente. |
| 7 | innerWidth () Obtiene el ancho interior (excluye el borde e incluye el relleno) del primer elemento coincidente. |
| 8 | compensar( ) Obtenga el desplazamiento actual del primer elemento coincidente, en píxeles, en relación con el documento. |
| 9 | offsetParent () Devuelve una colección jQuery con el padre posicionado del primer elemento coincidente. |
| 10 | externalHeight ([margin]) Obtiene la altura exterior (incluye el borde y el relleno de forma predeterminada) del primer elemento coincidente. |
| 11 | externalWidth ([margin]) Obtenga el ancho exterior (incluye el borde y el relleno de forma predeterminada) para el primer elemento coincidente. |
| 12 | posición( ) Obtiene la posición superior e izquierda de un elemento en relación con su padre de desplazamiento. |
| 13 | scrollLeft (val) Cuando se pasa un valor, el desplazamiento de desplazamiento a la izquierda se establece en ese valor en todos los elementos coincidentes. |
| 14 | scrollLeft () Obtiene el desplazamiento a la izquierda de desplazamiento del primer elemento coincidente. |
| 15 | scrollTop (val) Cuando se pasa un valor, el desplazamiento de la parte superior del desplazamiento se establece en ese valor en todos los elementos coincidentes. |
| dieciséis | scrollTop () Obtiene el desplazamiento de la parte superior del desplazamiento del primer elemento coincidente. |
| 17 | ancho (val) Establezca el ancho de CSS de cada elemento coincidente. |
| 18 | ancho () Obtiene el ancho de píxeles calculado actual del primer elemento coincidente. |
JQuery proporciona métodos para manipular DOM de manera eficiente. No es necesario escribir código grande para modificar el valor del atributo de ningún elemento o para extraer código HTML de un párrafo o división.
JQuery proporciona métodos como .attr (), .html () y .val () que actúan como captadores, recuperando información de los elementos DOM para su uso posterior.
Manipulación de contenido
los html( ) El método obtiene el contenido html (innerHTML) del primer elemento coincidente.
Aquí está la sintaxis del método:
selector.html( )Ejemplo
A continuación se muestra un ejemplo que utiliza los métodos .html () y .text (val). Aquí .html () recupera contenido HTML del objeto y luego el método .text (val) establece el valor del objeto usando el parámetro pasado -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { $("div").click(function () {
var content = $(this).html(); $("#result").text( content );
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>Esto producirá el siguiente resultado:
Reemplazo del elemento DOM
Puede reemplazar un elemento DOM completo con los elementos HTML o DOM especificados. losreplaceWith( content ) El método sirve muy bien para este propósito.
Aquí está la sintaxis del método:
selector.replaceWith( content )Aquí el contenido es lo que desea tener en lugar del elemento original. Puede ser HTML o texto simple.
Ejemplo
A continuación se muestra un ejemplo que reemplazaría el elemento de división con "<h1> JQuery is Great </h1>" -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { $("div").click(function () {
$(this).replaceWith("<h1>JQuery is Great</h1>");
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>Esto producirá el siguiente resultado:
Eliminar elementos DOM
Puede haber una situación en la que desee eliminar uno o más elementos DOM del documento. JQuery proporciona dos métodos para manejar la situación.
los empty( ) método elimina todos los nodos secundarios del conjunto de elementos coincidentes donde como método remove( expr ) El método elimina todos los elementos coincidentes del DOM.
Aquí está la sintaxis del método:
selector.remove( [ expr ])
or
selector.empty( )Puede pasar el parámetro opcional expr para filtrar el conjunto de elementos que se eliminarán.
Ejemplo
A continuación se muestra un ejemplo en el que los elementos se eliminan tan pronto como se hace clic en ellos:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () { $(this).remove( );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>Esto producirá el siguiente resultado:
Insertar elementos DOM
Puede haber una situación en la que desee insertar uno o más elementos DOM nuevos en su documento existente. JQuery proporciona varios métodos para insertar elementos en varias ubicaciones.
los after( content ) método inserta contenido después de cada uno de los elementos coincidentes donde como método before( content ) El método inserta contenido antes de cada uno de los elementos coincidentes.
Aquí está la sintaxis del método:
selector.after( content )
or
selector.before( content )Aquí el contenido es lo que desea insertar. Puede ser HTML o texto simple.
Ejemplo
A continuación se muestra un ejemplo en el que se insertan elementos <div> justo antes del elemento en el que se hace clic:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { $("div").click(function () {
$(this).before('<div class="div"></div>' );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>Esto producirá el siguiente resultado:
Métodos de manipulación DOM
La siguiente tabla enumera todos los métodos que puede usar para manipular elementos DOM:
| No Señor. | Método y descripción |
|---|---|
| 1 | después (contenido) Inserte contenido después de cada uno de los elementos coincidentes. |
| 2 | añadir (contenido) Agrega contenido al interior de cada elemento coincidente. |
| 3 | appendTo (selector) Agregue todos los elementos coincidentes a otro conjunto de elementos especificado. |
| 4 | antes (contenido) Inserte contenido antes de cada uno de los elementos coincidentes. |
| 5 | clon (bool) Clone los elementos DOM coincidentes y todos sus controladores de eventos, y seleccione los clones. |
| 6 | clonar () Clone los elementos DOM coincidentes y seleccione los clones. |
| 7 | vacío () Elimine todos los nodos secundarios del conjunto de elementos coincidentes. |
| 8 | html (val) Establezca el contenido html de cada elemento coincidente. |
| 9 | html () Obtenga el contenido html (innerHTML) del primer elemento coincidente. |
| 10 | insertAfter (selector) Inserte todos los elementos coincidentes después de otro conjunto de elementos especificado. |
| 11 | insertBefore (selector) Inserte todos los elementos coincidentes antes de otro conjunto de elementos especificado. |
| 12 | anteponer (contenido) Añada contenido al interior de cada elemento coincidente. |
| 13 | prependTo (selector) Anteponga todos los elementos coincidentes a otro conjunto de elementos especificado. |
| 14 | eliminar (expr) Elimina todos los elementos coincidentes del DOM. |
| 15 | replaceAll (selector) Reemplaza los elementos emparejados por el selector especificado con los elementos emparejados. |
| dieciséis | replaceWith (contenido) Reemplaza todos los elementos coincidentes con los elementos HTML o DOM especificados. |
| 17 | texto (val) Establezca el contenido de texto de todos los elementos coincidentes. |
| 18 | texto () Obtenga el contenido de texto combinado de todos los elementos coincidentes. |
| 19 | envolver (elem) Envuelva cada elemento coincidente con el elemento especificado. |
| 20 | envolver (html) Envuelva cada elemento coincidente con el contenido HTML especificado. |
| 21 | wrapAll (elem) Envuelva todos los elementos del conjunto combinado en un solo elemento contenedor. |
| 22 | wrapAll (html) Envuelva todos los elementos del conjunto combinado en un solo elemento contenedor. |
| 23 | wrapInner (elem) Envuelva el contenido secundario interno de cada elemento coincidente (incluidos los nodos de texto) con un elemento DOM. |
| 24 | wrapInner (html) Envuelva el contenido secundario interno de cada elemento coincidente (incluidos los nodos de texto) con una estructura HTML. |
Tenemos la capacidad de crear páginas web dinámicas mediante el uso de eventos. Los eventos son acciones que pueden ser detectadas por su aplicación web.
A continuación se muestran los ejemplos de eventos:
- Un clic del mouse
- Carga de una página web
- Colocar el mouse sobre un elemento
- Enviar un formulario HTML
- Una pulsación de tecla en su teclado, etc.
Cuando se activan estos eventos, puede utilizar una función personalizada para hacer prácticamente lo que quiera con el evento. Estas funciones personalizadas llaman a los controladores de eventos.
Controladores de eventos vinculantes
Usando el modelo de eventos jQuery, podemos establecer controladores de eventos en elementos DOM con el bind() método de la siguiente manera -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$('div').bind('click', function( event ){
alert('Hi there!');
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class = "div" style = "background-color:blue;">ONE</div>
<div class = "div" style = "background-color:green;">TWO</div>
<div class = "div" style = "background-color:red;">THREE</div>
</body>
</html>Este código hará que el elemento de división responda al evento de clic; cuando un usuario haga clic dentro de esta división a partir de entonces, se mostrará la alerta.
Esto producirá el siguiente resultado:
La sintaxis completa del comando bind () es la siguiente:
selector.bind( eventType[, eventData], handler)A continuación se muestra la descripción de los parámetros:
eventType: Una cadena que contiene un tipo de evento de JavaScript, como hacer clic o enviar. Consulte la siguiente sección para obtener una lista completa de los tipos de eventos.
eventData - Este es un parámetro opcional, es un mapa de datos que se pasará al controlador de eventos.
handler - Una función para ejecutar cada vez que se activa el evento.
Eliminar controladores de eventos
Normalmente, una vez que se establece un controlador de eventos, permanece en vigor durante el resto de la vida de la página. Puede ser necesario cuando desee eliminar el controlador de eventos.
jQuery proporciona el unbind()comando para eliminar un controlador de eventos existente. La sintaxis de unbind () es la siguiente:
selector.unbind(eventType, handler)
or
selector.unbind(eventType)A continuación se muestra la descripción de los parámetros:
eventType: Una cadena que contiene un tipo de evento de JavaScript, como hacer clic o enviar. Consulte la siguiente sección para obtener una lista completa de los tipos de eventos.
handler - Si se proporciona, identifica el oyente específico que se eliminará.
Tipos de eventos
| No Señor. | Tipo de evento y descripción |
|---|---|
| 1 | blur Ocurre cuando el elemento pierde el foco. |
| 2 | change Ocurre cuando cambia el elemento. |
| 3 | click Ocurre cuando se hace clic con el mouse. |
| 4 | dblclick Ocurre cuando un mouse hace doble clic. |
| 5 | error Ocurre cuando hay un error en la carga o descarga, etc. |
| 6 | focus Ocurre cuando el elemento se enfoca. |
| 7 | keydown Ocurre cuando se presiona la tecla. |
| 8 | keypress Ocurre cuando se presiona y se suelta la tecla. |
| 9 | keyup Ocurre cuando se suelta la tecla. |
| 10 | load Ocurre cuando se carga el documento. |
| 11 | mousedown Ocurre cuando se presiona el botón del mouse. |
| 12 | mouseenter Ocurre cuando el mouse entra en una región de elementos. |
| 13 | mouseleave Ocurre cuando el mouse sale de una región de elementos. |
| 14 | mousemove Ocurre cuando se mueve el puntero del mouse. |
| 15 | mouseout Ocurre cuando el puntero del mouse se mueve fuera de un elemento. |
| dieciséis | mouseover Ocurre cuando el puntero del mouse se mueve sobre un elemento. |
| 17 | mouseup Ocurre cuando se suelta el botón del mouse. |
| 18 | resize Ocurre cuando se cambia el tamaño de la ventana. |
| 19 | scroll Ocurre cuando se desplaza la ventana. |
| 20 | select Ocurre cuando se selecciona un texto. |
| 21 | submit Ocurre cuando se envía el formulario. |
| 22 | unload Ocurre cuando se descargan documentos. |
El objeto de evento
La función de devolución de llamada toma un solo parámetro; cuando se llama al controlador, el objeto de evento de JavaScript se pasará a través de él.
El objeto de evento a menudo es innecesario y el parámetro se omite, ya que generalmente hay suficiente contexto disponible cuando el controlador está obligado a saber exactamente lo que se debe hacer cuando se activa el controlador, sin embargo, hay ciertos atributos a los que debe acceder.
Los atributos del evento
| No Señor. | Descripción de propiedad |
|---|---|
| 1 | altKey Establézcalo en verdadero si se presionó la tecla Alt cuando se desencadenó el evento, falso en caso contrario. La tecla Alt está etiquetada como Opción en la mayoría de los teclados Mac. |
| 2 | ctrlKey Se establece en verdadero si se presionó la tecla Ctrl cuando se desencadenó el evento, falso en caso contrario. |
| 3 | data El valor, si lo hay, pasado como segundo parámetro al comando bind () cuando se estableció el controlador. |
| 4 | keyCode Para eventos de activación y desactivación de teclas, devuelve la tecla que se presionó. |
| 5 | metaKey Establézcalo en verdadero si se presionó la tecla Meta cuando se desencadenó el evento, falso en caso contrario. La tecla Meta es la tecla Ctrl en PC y la tecla Comando en Mac. |
| 6 | pageX Para eventos de mouse, especifica la coordenada horizontal del evento relativa al origen de la página. |
| 7 | pageY Para eventos de mouse, especifica la coordenada vertical del evento relativa al origen de la página. |
| 8 | relatedTarget Para algunos eventos de mouse, identifica el elemento que el cursor dejó o ingresó cuando se activó el evento. |
| 9 | screenX Para eventos de mouse, especifica la coordenada horizontal del evento relativa al origen de la pantalla. |
| 10 | screenY Para eventos de mouse, especifica la coordenada vertical del evento relativa al origen de la pantalla. |
| 11 | shiftKey Se establece en verdadero si se presionó la tecla Mayús cuando se activó el evento, falso en caso contrario. |
| 12 | target Identifica el elemento para el que se activó el evento. |
| 13 | timeStamp La marca de tiempo (en milisegundos) cuando se creó el evento. |
| 14 | type Para todos los eventos, especifica el tipo de evento que se activó (por ejemplo, clic). |
| 15 | which Para eventos de teclado, especifica el código numérico de la tecla que causó el evento, y para eventos de mouse, especifica qué botón se presionó (1 para la izquierda, 2 para el medio, 3 para la derecha). |
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$('div').bind('click', function( event ){
alert('Event type is ' + event.type);
alert('pageX : ' + event.pageX);
alert('pageY : ' + event.pageY);
alert('Target : ' + event.target.innerHTML);
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class = "div" style = "background-color:blue;">ONE</div>
<div class = "div" style = "background-color:green;">TWO</div>
<div class = "div" style = "background-color:red;">THREE</div>
</body>
</html>Esto producirá el siguiente resultado:
Los métodos de eventos
Hay una lista de métodos que se pueden llamar en un objeto de evento:
| No Señor. | Método y descripción |
|---|---|
| 1 | preventDefault () Impide que el navegador ejecute la acción predeterminada. |
| 2 | isDefaultPrevented () Devuelve si event.preventDefault () se llamó alguna vez en este objeto de evento. |
| 3 | stopPropagation () Detiene la propagación de un evento a los elementos principales, lo que evita que los controladores principales sean notificados del evento. |
| 4 | isPropagationStopped () Devuelve si event.stopPropagation () se llamó alguna vez en este objeto de evento. |
| 5 | stopImmediatePropagation () Detiene la ejecución del resto de controladores. |
| 6 | isImmediatePropagationStopped () Devuelve si event.stopImmediatePropagation () se llamó alguna vez en este objeto de evento. |
Métodos de manipulación de eventos
La siguiente tabla enumera los métodos importantes relacionados con eventos:
| No Señor. | Método y descripción |
|---|---|
| 1 | enlazar (tipo, [datos], fn) Vincula un controlador a uno o más eventos (como hacer clic) para cada elemento coincidente. También puede vincular eventos personalizados. |
| 2 | desactivado (eventos [, selector] [, controlador (eventObject)]) Esto hace lo contrario de en vivo, elimina un evento en vivo vinculado. |
| 3 | hover (encima, fuera) Simula el desplazamiento, por ejemplo, moviendo el mouse dentro y fuera de un objeto. |
| 4 | en (eventos [, selector] [, datos], controlador) Vincula un controlador a un evento (como un clic) para todos los elementos coincidentes actuales y futuros. También puede vincular eventos personalizados. |
| 5 | uno (tipo, [datos], fn) Vincula un controlador a uno o más eventos para que se ejecuten una vez para cada elemento coincidente. |
| 6 | listo (fn) Vincula una función que se ejecutará cuando el DOM esté listo para ser atravesado y manipulado. |
| 7 | disparador (evento, [datos]) Active un evento en cada elemento coincidente. |
| 8 | triggerHandler (evento, [datos]) Activa todos los controladores de eventos enlazados en un elemento. |
| 9 | desvincular ([type], [fn]) Esto hace lo contrario de enlazar, elimina los eventos enlazados de cada uno de los elementos coincidentes. |
Métodos de ayuda de eventos
jQuery también proporciona un conjunto de funciones auxiliares de eventos que se pueden usar para activar un evento para vincular cualquier tipo de evento mencionado anteriormente.
Métodos de activación
A continuación se muestra un ejemplo que desencadenaría el evento de desenfoque en todos los párrafos:
$("p").blur();Métodos de encuadernación
A continuación se muestra un ejemplo que uniría click evento en todos los <div> -
$("div").click( function () {
// do something here
});| No Señor. | Método y descripción |
|---|---|
| 1 | blur( ) Activa el evento de desenfoque de cada elemento coincidente. |
| 2 | blur( fn ) Vincula una función al evento de desenfoque de cada elemento coincidente. |
| 3 | change( ) Activa el evento de cambio de cada elemento coincidente. |
| 4 | change( fn ) Vincula una función al evento de cambio de cada elemento coincidente. |
| 5 | click( ) Activa el evento de clic de cada elemento coincidente. |
| 6 | click( fn ) Vincula una función al evento de clic de cada elemento coincidente. |
| 7 | dblclick( ) Activa el evento dblclick de cada elemento coincidente. |
| 8 | dblclick( fn ) Vincula una función al evento dblclick de cada elemento coincidente. |
| 9 | error( ) Activa el evento de error de cada elemento coincidente. |
| 10 | error( fn ) Vincula una función al evento de error de cada elemento coincidente. |
| 11 | focus( ) Activa el evento de enfoque de cada elemento coincidente. |
| 12 | focus( fn ) Vincula una función al evento de enfoque de cada elemento coincidente. |
| 13 | keydown( ) Activa el evento keydown de cada elemento coincidente. |
| 14 | keydown( fn ) Vincular una función al evento keydown de cada elemento coincidente. |
| 15 | keypress( ) Activa el evento de pulsación de tecla de cada elemento coincidente. |
| dieciséis | keypress( fn ) Binds a function to the keypress event of each matched element. |
| 17 | keyup( ) Triggers the keyup event of each matched element. |
| 18 | keyup( fn ) Bind a function to the keyup event of each matched element. |
| 19 | load( fn ) Binds a function to the load event of each matched element. |
| 20 | mousedown( fn ) Binds a function to the mousedown event of each matched element. |
| 21 | mouseenter( fn ) Bind a function to the mouseenter event of each matched element. |
| 22 | mouseleave( fn ) Bind a function to the mouseleave event of each matched element. |
| 23 | mousemove( fn ) Bind a function to the mousemove event of each matched element. |
| 24 | mouseout( fn ) Bind a function to the mouseout event of each matched element. |
| 25 | mouseover( fn ) Bind a function to the mouseover event of each matched element. |
| 26 | mouseup( fn ) Bind a function to the mouseup event of each matched element. |
| 27 | resize( fn ) Bind a function to the resize event of each matched element. |
| 28 | scroll( fn ) Bind a function to the scroll event of each matched element. |
| 29 | select( ) Trigger the select event of each matched element. |
| 30 | select( fn ) Bind a function to the select event of each matched element. |
| 31 | submit( ) Trigger the submit event of each matched element. |
| 32 | submit( fn ) Bind a function to the submit event of each matched element. |
| 33 | unload( fn ) Binds a function to the unload event of each matched element. |
AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology helps us to load data from the server without a browser page refresh.
If you are new with AJAX, I would recommend you go through our Ajax Tutorial before proceeding further.
JQuery is a great tool which provides a rich set of AJAX methods to develop next generation web application.
Loading Simple Data
This is very easy to load any static or dynamic data using JQuery AJAX. JQuery provides load() method to do the job −
Syntax
Here is the simple syntax for load() method −
[selector].load( URL, [data], [callback] );Here is the description of all the parameters −
URL − The URL of the server-side resource to which the request is sent. It could be a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a database.
data − This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.
callback − A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text received from the server and second parameter is the status code.
Example
Consider the following HTML file with a small JQuery coding −
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){ $('#stage').load('/jquery/result.html');
});
});
</script>
</head>
<body>
<p>Click on the button to load /jquery/result.html file −</p>
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>Here load() initiates an Ajax request to the specified URL /jquery/result.html file. After loading this file, all the content would be populated inside <div> tagged with ID stage. Assuming, our /jquery/result.html file has just one HTML line −
<h1>THIS IS RESULT...</h1>When you click the given button, then result.html file gets loaded.
Getting JSON Data
There would be a situation when server would return JSON string against your request. JQuery utility function getJSON() parses the returned JSON string and makes the resulting string available to the callback function as first parameter to take further action.
Syntax
Here is the simple syntax for getJSON() method −
[selector].getJSON( URL, [data], [callback] );Here is the description of all the parameters −
URL − The URL of the server-side resource contacted via the GET method.
data − An object whose properties serve as the name/value pairs used to construct a query string to be appended to the URL, or a preformatted and encoded query string.
callback − A function invoked when the request completes. The data value resulting from digesting the response body as a JSON string is passed as the first parameter to this callback, and the status as the second.
Example
Consider the following HTML file with a small JQuery coding −
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { $("#driver").click(function(event){
$.getJSON('/jquery/result.json', function(jd) { $('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>'); $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.json file −</p>
<div id = "stage" style = "background-color:#eee;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>Here JQuery utility method getJSON() initiates an Ajax request to the specified URL result.json file. After loading this file, all the content would be passed to the callback function which finally would be populated inside <div> tagged with ID stage. Assuming, our result.json file has following json formatted content −
{
"name": "Zara Ali",
"age" : "67",
"sex": "female"
}When you click the given button, then result.json file gets loaded.
Passing Data to the Server
Many times you collect input from the user and you pass that input to the server for further processing. JQuery AJAX made it easy enough to pass collected data to the server using data parameter of any available Ajax method.
Example
This example demonstrate how can pass user input to a web server script which would send the same result back and we would print it −
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { $("#driver").click(function(event){
var name = $("#name").val(); $("#stage").load('/jquery/result.php', {"name":name} );
});
});
</script>
</head>
<body>
<p>Enter your name and click on the button:</p>
<input type = "input" id = "name" size = "40" /><br />
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Show Result" />
</body>
</html>Here is the code written in result.php script −
<?php
if( $_REQUEST["name"] ){ $name = $_REQUEST['name']; echo "Welcome ". $name;
}
?>Now you can enter any text in the given input box and then click "Show Result" button to see what you have entered in the input box.
JQuery AJAX Methods
You have seen basic concept of AJAX using JQuery. Following table lists down all important JQuery AJAX methods which you can use based your programming need −
| Sr.No. | Methods & Description |
|---|---|
| 1 | jQuery.ajax( options ) Load a remote page using an HTTP request. |
| 2 | jQuery.ajaxSetup( options ) Setup global settings for AJAX requests. |
| 3 | jQuery.get( url, [data], [callback], [type] ) Load a remote page using an HTTP GET request. |
| 4 | jQuery.getJSON( url, [data], [callback] ) Load JSON data using an HTTP GET request. |
| 5 | jQuery.getScript( url, [callback] ) Loads and executes a JavaScript file using an HTTP GET request. |
| 6 | jQuery.post( url, [data], [callback], [type] ) Load a remote page using an HTTP POST request. |
| 7 | load( url, [data], [callback] ) Load HTML from a remote file and inject it into the DOM. |
| 8 | serialize( ) Serializes a set of input elements into a string of data. |
| 9 | serializeArray( ) Serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with. |
JQuery AJAX Events
You can call various JQuery methods during the life cycle of AJAX call progress. Based on different events/stages following methods are available −
You can go through all the AJAX Events.
| Sr.No. | Methods & Description |
|---|---|
| 1 | ajaxComplete( callback ) Attach a function to be executed whenever an AJAX request completes. |
| 2 | ajaxStart( callback ) Attach a function to be executed whenever an AJAX request begins and there is none already active. |
| 3 | ajaxError( callback ) Attach a function to be executed whenever an AJAX request fails. |
| 4 | ajaxSend( callback ) Attach a function to be executed before an AJAX request is sent. |
| 5 | ajaxStop( callback ) Attach a function to be executed whenever all AJAX requests have ended. |
| 6 | ajaxSuccess( callback ) Attach a function to be executed whenever an AJAX request completes successfully. |
jQuery provides a trivially simple interface for doing various kind of amazing effects. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration. This tutorial covers all the important jQuery methods to create visual effects.
Showing and Hiding Elements
The commands for showing and hiding elements are pretty much what we would expect − show() to show the elements in a wrapped set and hide() to hide them.
Syntax
Here is the simple syntax for show() method −
[selector].show( speed, [callback] );Here is the description of all the parameters −
speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.
Following is the simple syntax for hide() method −
[selector].hide( speed, [callback] );Here is the description of all the parameters −
speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.
Example
Consider the following HTML file with a small JQuery coding −
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() { $("#show").click(function () {
$(".mydiv").show( 1000 ); }); $("#hide").click(function () {
$(".mydiv").hide( 1000 );
});
});
</script>
<style>
.mydiv{
margin:10px;
padding:12px;
border:2px solid #666;
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class = "mydiv">
This is a SQUARE
</div>
<input id = "hide" type = "button" value = "Hide" />
<input id = "show" type = "button" value = "Show" />
</body>
</html>This will produce following result −
Toggling the Elements
jQuery provides methods to toggle the display state of elements between revealed or hidden. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
Syntax
Here is the simple syntax for one of the toggle() methods −
[selector]..toggle([speed][, callback]);Here is the description of all the parameters −
speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.
Example
We can animate any element, such as a simple <div> containing an image −
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$(".clickme").click(function(event){ $(".target").toggle('slow', function(){
$(".log").text('Transition Complete');
});
});
});
</script>
<style>
.clickme{
margin:10px;
padding:12px;
border:2px solid #666;
width:100px;
height:50px;
}
</style>
</head>
<body>
<div class = "content">
<div class = "clickme">Click Me</div>
<div class = "target">
<img src = "./images/jquery.jpg" alt = "jQuery" />
</div>
<div class = "log"></div>
</div>
</body>
</html>This will produce following result −
JQuery Effect Methods
You have seen basic concept of jQuery Effects. Following table lists down all the important methods to create different kind of effects −
| Sr.No. | Methods & Description |
|---|---|
| 1 | animate( params, [duration, easing, callback] ) A function for making custom animations. |
| 2 | fadeIn( speed, [callback] ) Fade in all matched elements by adjusting their opacity and firing an optional callback after completion. |
| 3 | fadeOut( speed, [callback] ) Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion. |
| 4 | fadeTo( speed, opacity, callback ) Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion. |
| 5 | hide( ) Hides each of the set of matched elements if they are shown. |
| 6 | hide( speed, [callback] ) Hide all matched elements using a graceful animation and firing an optional callback after completion. |
| 7 | show( ) Displays each of the set of matched elements if they are hidden. |
| 8 | show( speed, [callback] ) Show all matched elements using a graceful animation and firing an optional callback after completion. |
| 9 | slideDown( speed, [callback] ) Reveal all matched elements by adjusting their height and firing an optional callback after completion. |
| 10 | slideToggle( speed, [callback] ) Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion. |
| 11 | slideUp( speed, [callback] ) Hide all matched elements by adjusting their height and firing an optional callback after completion. |
| 12 | stop( [clearQueue, gotoEnd ]) Stops all the currently running animations on all the specified elements. |
| 13 | toggle( ) Toggle displaying each of the set of matched elements. |
| 14 | toggle( speed, [callback] ) Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion. |
| 15 | toggle( switch ) Toggle displaying each of the set of matched elements based upon the switch (true shows all elements, false hides all elements). |
| 16 | jQuery.fx.off Globally disable all animations. |
Efectos basados en la biblioteca de UI
Para usar estos efectos, puede descargar la última biblioteca de interfaz de usuario de jQuery jquery-ui-1.11.4.custom.zipde jQuery UI Library o use Google CDN para usarlo de manera similar a como lo hemos hecho para jQuery.
Hemos utilizado Google CDN para jQuery UI usando el siguiente fragmento de código en la página HTML para que podamos usar jQuery UI:
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>
</head>| No Señor. | Métodos y descripción |
|---|---|
| 1 | Ciego Ciega el elemento o lo muestra al cegarlo. |
| 2 | Rebotar Rebota el elemento n veces vertical u horizontalmente. |
| 3 | Acortar Engancha o apaga el elemento, vertical u horizontalmente. |
| 4 | soltar Elimina el elemento o lo muestra al colocarlo. |
| 5 | Explotar Explota el elemento en varias piezas. |
| 6 | Doblez Dobla el elemento como una hoja de papel. |
| 7 | Realce Resalta el fondo con un color definido. |
| 8 | Soplo Las animaciones de escala y desvanecimiento crean el efecto de soplo. |
| 9 | Latir Pulsa la opacidad del elemento varias veces. |
| 10 | Escala Reducir o hacer crecer un elemento en un factor porcentual. |
| 11 | Sacudir Agita el elemento vertical u horizontalmente n veces. |
| 12 | Talla Cambiar el tamaño de un elemento a un ancho y alto específicos. |
| 13 | Diapositiva Desliza el elemento fuera de la ventana gráfica. |
| 14 | Transferir Transfiere el contorno de un elemento a otro. |
Las interacciones podrían agregar comportamientos básicos basados en el mouse a cualquier elemento. Usando interacciones, podemos crear listas ordenables, elementos redimensionables, comportamientos de arrastrar y soltar. Las interacciones también son grandes bloques de construcción para aplicaciones y widgets más complejos.
| No Señor. | Interacciones y descripción |
|---|---|
| 1 | Arrastrar capaz Habilite la funcionalidad de arrastrar en cualquier elemento DOM. |
| 2 | Soltar capaz Habilite cualquier elemento DOM para que se pueda soltar. |
| 3 | Cambiar el tamaño capaz Habilite cualquier elemento DOM para que se pueda cambiar de tamaño. |
| 4 | Seleccionar capaz Habilite un elemento DOM (o grupo de elementos) para que sea seleccionable. |
| 5 | Ordenar capaz Habilite un grupo de elementos DOM para poder ordenarlos. |
Un widget de interfaz de usuario de jQuery es un complemento de jQuery especializado. Mediante el uso del complemento, podemos aplicar comportamientos a los elementos. Sin embargo, los complementos carecen de algunas capacidades integradas, como una forma de asociar datos con sus elementos, exponer métodos, fusionar opciones con valores predeterminados y controlar la vida útil del complemento.
| No Señor. | Widgets y descripción |
|---|---|
| 1 | Acordeón Habilite para contraer el contenido, que se divide en secciones lógicas. |
| 2 | Autocompletar Habilitar para proporciona las sugerencias mientras escribe en el campo. |
| 3 | Botón El botón es una entrada de tipo enviar y un ancla. |
| 4 | Selector de fechas Es abrir un calendario interactivo en una pequeña superposición. |
| 5 | Diálogo Los cuadros de diálogo son una de las formas agradables de presentar información en una página HTML. |
| 6 | Menú El menú muestra una lista de elementos. |
| 7 | Barra de progreso Muestra la información de progreso. |
| 8 | Seleccione el menú Habilite un estilo que pueda seleccionar elemento / elementos. |
| 9 | Deslizador El control deslizante básico es horizontal y tiene un solo mango que se puede mover con el mouse o usando las teclas de flecha. |
| 10 | Hilandero Proporciona una forma rápida de seleccionar un valor de un conjunto. |
| 11 | Pestañas Se utiliza para intercambiar contenido dividido en secciones lógicas. |
| 12 | Descripción emergente Proporciona consejos para los usuarios. |
Jquery tiene dos temas de estilo diferentes como A y B. Cada uno con diferentes colores para botones, barras, bloques de contenido, etc.
La sintaxis de la temática de consulta J como se muestra a continuación:
<div data-role = "page" data-theme = "a|b">Un simple ejemplo de tematización como se muestra a continuación:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script src = "https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script
src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<div data-role = "page" id = "pageone" data-theme = "a">
<div data-role = "header">
<h1>Tutorials Point</h1>
</div>
<div data-role = "main" class = "ui-content">
<p>Text link</p>
<a href = "#">A Standard Text Link</a>
<a href = "#" class = "ui-btn">Link Button</a>
<p>A List View:</p>
<ul data-role = "listview" data-autodividers = "true" data-inset = "true">
<li><a href = "#">Android </a></li>
<li><a href = "#">IOS</a></li>
</ul>
<label for = "fullname">Input Field:</label>
<input type = "text" name = "fullname" id = "fullname"
placeholder = "Name..">
<label for = "switch">Toggle Switch:</label>
<select name = "switch" id = "switch" data-role = "slider">
<option value = "on">On</option>
<option value = "off" selected>Off</option>
</select>
</div>
<div data-role = "footer">
<h1>Tutorials point</h1>
</div>
</div>
</body>
</html>Esto debería producir el siguiente resultado:
Un ejemplo de tematización simple de B como se muestra a continuación:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script src = "https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script
src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<div data-role = "page" id = "pageone" data-theme = "b">
<div data-role = "header">
<h1>Tutorials Point</h1>
</div>
<div data-role = "main" class = "ui-content">
<p>Text link</p>
<a href = "#">A Standard Text Link</a>
<a href = "#" class = "ui-btn">Link Button</a>
<p>A List View:</p>
<ul data-role = "listview" data-autodividers = "true" data-inset = "true">
<li><a href = "#">Android </a></li>
<li><a href = "#">IOS</a></li>
</ul>
<label for = "fullname">Input Field:</label>
<input type = "text" name = "fullname" id = "fullname"
placeholder = "Name..">
<label for = "switch">Toggle Switch:</label>
<select name = "switch" id = "switch" data-role = "slider">
<option value = "on">On</option>
<option value = "off" selected>Off</option>
</select>
</div>
<div data-role = "footer">
<h1>Tutorials point</h1>
</div>
</div>
</body>
</html>Esto debería producir el siguiente resultado:
Jquery proporciona varias utilidades en el formato de $ (espacio de nombres). Estos métodos son útiles para completar las tareas de programación. Algunos de los métodos de utilidad son los que se muestran a continuación.
$ .trim ()
$ .trim () se usa para eliminar los espacios en blanco iniciales y finales
$.trim( " lots of extra whitespace " );$ .each ()
$ .each () se usa para iterar sobre matrices y objetos
$.each([ "foo", "bar", "baz" ], function( idx, val ) {
console.log( "element " + idx + " is " + val );
});
$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
console.log( k + " : " + v );
});.each () se puede llamar en una selección para iterar sobre los elementos contenidos en la selección. .each (), no $ .each (), debe usarse para iterar sobre elementos en una selección.
$ .inArray ()
$ .inArray () se usa para Devuelve el índice de un valor en una matriz, o -1 si el valor no está en la matriz.
var myArray = [ 1, 2, 3, 5 ];
if ( $.inArray( 4, myArray ) !== -1 ) {
console.log( "found it!" );
}$ .extend ()
$ .extend () se usa para Cambia las propiedades del primer objeto usando las propiedades de los objetos subsiguientes.
var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };
var newObject = $.extend( firstObject, secondObject );
console.log( firstObject.foo );
console.log( newObject.foo );$ .proxy ()
$ .proxy () se usa para Devuelve una función que siempre se ejecutará en el alcance provisto, es decir, establece el significado de esto dentro de la función pasada al segundo argumento
var myFunction = function() {
console.log( this );
};
var myObject = {
foo: "bar"
};
myFunction(); // window
var myProxyFunction = $.proxy( myFunction, myObject );
myProxyFunction();$ .browser
$ .browser se utiliza para dar información sobre los navegadores
jQuery.each( jQuery.browser, function( i, val ) {
$( "<div>" + i + " : <span>" + val + "</span>" )
.appendTo( document.body );
});$ .contains ()
$ .contains () se usa para devolver verdadero si el elemento DOM proporcionado por el segundo argumento es un descendiente del elemento DOM proporcionado por el primer argumento, ya sea un hijo directo o anidado más profundamente.
$.contains( document.documentElement, document.body ); $.contains( document.body, document.documentElement );$ .data ()
$ .data () se utiliza para dar información sobre los datos
<html lang = "en">
<head>
<title>jQuery.data demo</title>
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
<div>
The values stored were <span></span>
and <span></span>
</div>
<script>
var div = $( "div" )[ 0 ]; jQuery.data( div, "test", { first: 25, last: "tutorials" }); $( "span:first" ).text( jQuery.data( div, "test" ).first );
$( "span:last" ).text( jQuery.data( div, "test" ).last );
</script>
</body>
</html>Una salida sería la siguiente
The values stored were 25 and tutorials$ .fn.extend ()
$ .fn.extend () se usa para extender el prototipo jQuery
<html lang = "en">
<head>
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
<label><input type = "checkbox" name = "android">
Android</label>
<label><input type = "checkbox" name = "ios"> IOS</label>
<script>
jQuery.fn.extend({
check: function() {
return this.each(function() {
this.checked = true;
});
},
uncheck: function() {
return this.each(function() {
this.checked = false;
});
}
});
// Use the newly created .check() method
$( "input[type = 'checkbox']" ).check();
</script>
</body>
</html>Proporciona la salida como se muestra a continuación:
$ .isWindow ()
$ .isWindow () se usa para reconocer la ventana
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery.isWindow demo</title>
<script src = "https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
Is 'window' a window? <b></b>
<script>
$( "b" ).append( "" + $.isWindow( window ) );
</script>
</body>
</html>Proporciona la salida como se muestra a continuación:
$ .now ()
Devuelve un número que representa la hora actual.
(new Date).getTime()$ .isXMLDoc ()
$ .isXMLDoc () comprueba si un archivo es xml o no
jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )$ .globalEval ()
$ .globalEval () se usa para ejecutar javascript globalmente
function test() {
jQuery.globalEval( "var newVar = true;" )
}
test();$ .dequeue ()
$ .dequeue () se usa para ejecutar la siguiente función en la cola
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery.dequeue demo</title>
<style>
div {
margin: 3px;
width: 50px;
position: absolute;
height: 50px;
left: 10px;
top: 30px;
background-color: green;
border-radius: 50px;
}
div.red {
background-color: blue;
}
</style>
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Start</button>
<div></div>
<script>
$( "button" ).click(function() {
$( "div" ) .animate({ left: '+ = 400px' }, 2000 ) .animate({ top: '0px' }, 600 ) .queue(function() { $( this ).toggleClass( "red" );
$.dequeue( this );
})
.animate({ left:'10px', top:'30px' }, 700 );
});
</script>
</body>
</html>Proporciona la salida como se muestra a continuación: