hogar › Internet › Página de inicio de jquery. Ejemplos de jQuery para principiantes. Administrar atributos con jQuery

Página de inicio de jquery. Ejemplos de jQuery para principiantes. Administrar atributos con jQuery

jQuery es una biblioteca de JavaScript que consta de funciones para varios navegadores: contenedores para manipular elementos DOM (Document Object Model - modelo de objetos documento). Su principio fundamental es aplicación automática el mecanismo deseado, dependiendo del navegador. Por ejemplo, obtener un elemento html de un documento por ID, en diferentes navegadores sucede de manera diferente. Antes de jquery, usaba esta función:

Función getObj(objID)( if (document.getElementById) (devolver document.getElementById(objID);) else if (document.all) (devolver document.all;) else if (document.layers) (devolver document.layers;) )

Para realizar la misma acción en jquery, simplemente haz esto:

$("#objID") o jQuery("#objID")

Llamar a la función $() es equivalente a jQuery() , ya que la primera es un alias de la segunda. Si no utiliza otras bibliotecas como jquery, puede acceder de forma segura al espacio de nombres a través de $(). De lo contrario, es mejor utilizar el nombre directo del objeto: jQuery. Además, suponemos que no hay otras bibliotecas.

Empezando con jQuery

Entonces empecemos. Lo primero que debes hacer es conseguir ultima versión Bibliotecas jquery desde el sitio web oficial del proyecto http://jquery.com/ o descargue jquery aquí. Hay dos versiones en el archivo y en el sitio web oficial: comprimida y desarrollada. En el sitio es mejor usar el comprimido y, si quieres experimentar, usa el segundo. En primer lugar, incluimos la biblioteca jquery en el cuerpo de la página:

Después de esto, el espacio de nombres de JavaScript se define de tal manera que la llamada a la función $() esté ocupada por jquery y obtenga cualquier elemento. documento html como objeto, puede utilizar la expresión $("#objID") . Donde objID es el ID del objeto.

jQuery y CSS

Como primer ejemplo, veamos cómo funcionan jquery y CSS. Hay dos formas principales de manipular CSS usando jquery: cambiando un atributo o varios a la vez. Se realizan a través de función css(). En teoría se parece a esto:

$("#objID").css("display","block") $("#objID").css(( display:"block, margin:"10px", color:"#ffffff"))

Ejemplo de cambio de un atributo CSS

¡El ejemplo de cambiar un atributo fue un éxito!

Fuente:

¡El ejemplo de cambiar un atributo fue un éxito!

Ejemplo de cambio de múltiples atributos CSS

¡Ejemplo de cambio de múltiples atributos!

Fuente:

function demo_css())( $("#span2").css(( color:"#ffffff", padding:"5px", background:"#980000" )); ) ¡Ejemplo de cambio de múltiples atributos!

Cambiar texto y html

Para cambiar texto o código HTML y hay funciones text() y html() .

$("#objID").text("True la la") $("#objID").html("

cierto la la

Además, si intenta insertar código HTML utilizando la función text(), lo recibirá en su formato original. La función text() escapa de todo.

Ejemplo de texto()

Fuente:

función set_text())( $("#span3").text("¡Gracias!"); )

Ejemplo de uso de html()

Fuente:

function set_html())( $("#span4").html("¡Gracias! Esto es mucho mejor."); )

Gestión de atributos con usando jQuery

La función attr() manipula los atributos de cualquier elemento. Con su ayuda puedes agregar o cambiar título, href, valor, src, etc.

Ejemplo de atributo()

Fuente:

función plus_ten())( var cur_value = $("#text").attr("value"); cur_value = parseInt(cur_value) + 10; $("#text").attr("value",cur_value); )

Controladores de eventos en jQuery

La lista completa está disponible en http://api.jquery.com/category/events/. Daré sólo algunos ejemplos. El controlador de eventos onclick más común. En jQuery puedes interceptarlo mediante la función click().

Ejemplo de clic()

Fuente:

$("#butt").click(function())( alert("¿Has decidido comprobarlo?"); ));

Ejemplo de tecla()

Introduce algo:

Entraste:

Fuente:

Introduce algo:
Ingresaste: $("#text2").keyup(function())( if ($("#text2").val())( $("#text2_target").css((background:"#980000" ) ) else ( $("#text2_target").css((fondo:"#ffffff")); ) $("#text2_target").text($("#text2").val()); );

Ejemplo de uso de bind()

¡Clickeame!

Fuente:

div#log( fondo:#1C93A5; ancho:300px; alto:100px; relleno:10px; color:#fff; ) ¡Haz clic en mí!
$(documento).ready(función() ( $("#log").bind("clic", función(e) ( $("#coord").html("Coordenada X: "+ e.pageX + " Coordenada Y: " + e.pageY + "");

JQuery HTML es una biblioteca diseñada para "escribir menos y hacer más". No es un lenguaje de programación, sino una herramienta utilizada para simplificar la implementación. tareas comunes JavaScript.

jQuery tiene beneficio adicional- compatibilidad entre navegadores. Puede estar seguro de que su código será interpretado en cualquier navegador moderno.

Comparando la escritura de un programa simple “¡Hola mundo! " Con usando javascript y jQuery, puedes ver la diferencia entre ellos.

javascript

document.getElementById("demo").innerHTML = "¡Hola mundo!";

JQuery

$("#demo").html("¡Hola mundo!");

Este ejemplo corto ilustra cómo utilizando jQuery se puede lograr el mismo resultado que utilizando JavaScript estándar, pero de forma más concisa.

Objetivos

Este tutorial no asume ningún conocimiento básico de jQuery, pero cubre los siguientes temas:

Cómo instalar jQuery en un proyecto web;
Definir conceptos importantes de desarrollo web como API, DOM y CDN;
Selectores, eventos y efectos comunes de jQuery;
Ejemplos para poner a prueba los conceptos aprendidos en este artículo.

configuración de jQuery

jQuery es archivo javascript, al que hará referencia en el documento. Cómo conectar JQuery a HTML:

Descargar copia local;
Agregue un enlace a un archivo a través de una red de entrega de contenido (CDN).

Nota. Una red de entrega de contenido (CDN) es un sistema de múltiples servidores que ofrecen contenido web a un usuario en función de su ubicación geográfica. Cuando agregas un enlace a archivo jQuery A través de CDN, se proporcionará al usuario de forma más rápida y eficiente que si estuviera alojado en su propio servidor.

En nuestros ejemplos, nos vincularemos a jQuery a través de una CDN. El último versión jQuery se puede encontrar en Google. Si desea descargar la biblioteca, puede obtener una copia de jQuery en el sitio web oficial.

Creemos un pequeño proyecto web. Constará de un archivo style.css, scripts.js y un archivo principal index.html.

Configure el marcado HTML básico y guárdelo en index.html.

índice.html

Demostración de jQuery

índice.html

Demostración de jQuery

El script JavaScript (scripts.js) debe incluirse en el documento debajo de la biblioteca jQuery o no funcionará.

Nota. Si descargó una copia local de jQuery, guárdela en la carpeta js/ y conéctela a través del enlace js/jquery.min.js.

Biblioteca jQuery agregada a HTML y tenemos Acceso completo a la API jQuery.

Usando jQuery

jQuery se utiliza para conectarse a elementos HTML en el navegador a través del DOM.

El modelo de objetos de documento (DOM) es el método mediante el cual JavaScript (y jQuery) interactúan con HTML en el navegador. Para ver qué es el DOM, en su navegador, haga clic en botón derecho del ratón Coloque el mouse en la página web actual y seleccione "Ver código". Esto abrirá el panel "Herramientas de desarrollador". El código HTML que ves en él es el DOM.

Cada elemento HTML cuenta nodo DOM- un objeto al que se puede acceder mediante JavaScript. Estos objetos tienen una estructura de árbol, con el elemento más cercano a la raíz y cada elemento una rama del árbol. JavaScript puede agregar, eliminar y modificar cualquiera de estos elementos.

Si vuelve a hacer clic derecho y selecciona Ver fuente", verá HTML sin formato. Al principio puede que te sientas confundido acerca del código fuente DOM y HTML, pero son cosas diferentes. El código fuente de la página coincide exactamente con lo que está escrito en el archivo HTML. Es estático e inmutable y no se ve afectado por JavaScript. A su vez, el DOM es dinámico y puede cambiar.

La capa DOM exterior, que envuelve todo el nodo, es el objeto del documento. Para usar en página jQuery, debe asegurarse de que el documento esté "listo".

Cree un archivo scripts.js en la carpeta js/ y agréguele el siguiente código:

js/scripts.js

Todo el código jQuery insertado en HTML se incluirá en el código anterior. Sólo funcionará una vez que el DOM esté listo para su ejecución. código javascript. Aunque en algunos casos JavaScript no se cargará hasta que se representen los elementos, incluir este bloque se considera una buena práctica.

Para ejecutar el script "¡Hola, mundo!" y mostrar texto en el navegador usando jQuery, primero cree elemento vacío párrafo al que se aplica el identificador de demostración.

índice.html

... ...

Se llama JQuery y se indica con un signo de dólar ($). Accedemos al DOM con jQuery usando sintaxis CSS y aplicar la acción usando el método:

$("selector").método();

Dado que un identificador en CSS está representado por el símbolo (#), accedemos al identificador de demostración utilizando el selector #demo. html() es un método que cambia el marcado HTML dentro de un elemento.

Ahora colocaremos el programa “¡Hola Mundo! "dentro del contenedor jQuery ready(). Añade esta línea a función existente en el archivo scripts.js:

js/scripts.js

$(document).ready(function() ( $("#demo").html("¡Hola, mundo!"); ));

Después de guardar los cambios, puede abrir el archivo index.html en su navegador. Si todo funciona correctamente, verás la inscripción “¡Hola mundo! »

Haga clic derecho en "¡Hola, mundo!" " y seleccione " Ver código ". Ahora se muestra el DOM

¡Hola Mundo!

. Si ve el código fuente de la página, solo verá el código HTML original que escribimos.

Selectores

Los selectores son la forma en que le decimos a jQuery HTML con qué elementos queremos trabajar. puedes ver Lista llena Selectores de jQuery en la documentación oficial.

Para acceder a un selector, utilice el símbolo $ seguido de paréntesis ().

$("selector")

Líneas con doble comillas son preferidos (según el manual de jQuery). Aunque a menudo se utilizan cadenas con comillas simples.

A continuación es breve reseña Selectores de uso frecuente.

$("*") - comodín: selecciona todos los elementos de la página;
$(this) - current : selecciona el elemento actual que se está manipulando este momento dentro de una función;
$("p") - etiqueta: selecciona todas las instancias de la etiqueta
;
$(".example") - clase: selecciona todos los elementos a los que se aplica la clase de ejemplo;
$("#example") - identificador: selecciona una instancia con identificador único ejemplo ;
$("") - atributo: selecciona todos los elementos en atributo de tipo que están configurados como texto;
$("p:first-of-type") - pseudoelemento: selecciona el primer elemento
.

En conectando jQuery a HTML tendrás que lidiar con clases e identificadores. Las clases se utilizan cuando necesita seleccionar varios elementos y los identificadores cuando necesita seleccionar solo uno.

Eventos jQuery

En el ejemplo “¡Hola mundo! "El código se ejecutó cuando se cargó la página y el documento estaba listo, por lo que no requirió ninguna intervención del usuario. En este caso podríamos escribir el texto directamente en HTML, sin jQuery. Pero necesitaremos usar jQuery si queremos que el texto aparezca en la página después de hacer clic con el mouse.

Vuelva a su archivo index.html y agréguele un elemento. Usaremos este botón para rastrear el evento de clic.

índice.html

...Haz click en mi

Usamos el método click() para llamar a una función que contiene el código “¡Hola, mundo! "

js/scripts.js

$(documento).ready(function() ( $("#trigger").click(); ));

El ID del elemento es trigger, lo seleccionamos usando $("#trigger") . Al agregar click() escuchamos el evento de clic. A continuación llamamos a una función que contiene nuestro código dentro del método click().

function() ( $("#demo").html("¡Hola, mundo!"); )

Aqui esta el completo código jquery Elemento HTML.

js/scripts.js

$(document).ready(function() ( $("#trigger").click(function() ( $("#demo").html("¡Hola, mundo!"); )); ));

Guarde el archivo scripts.js y actualice index.html en su navegador. Ahora, cuando haces clic en el botón, aparece el texto "¡Hola, mundo!". ".

Un evento es cualquier interacción del usuario con el navegador mediante el mouse o el teclado. El ejemplo que acabamos de crear utiliza un evento de clic. Puede encontrar una lista completa de métodos en la documentación oficial de jQuery. eventos jQuery. A continuación se muestra una lista de eventos de uso común.

click() - clic: ocurre con un solo clic del mouse;
hover() - hover: ocurre cuando el puntero del mouse se desplaza sobre un elemento;
enviar() - enviar: ocurre cuando se envían los datos del formulario;
scroll() - desplazamiento: ocurre al desplazarse por una página o elemento;
keydown() - pulsación de tecla: ocurre cuando presionas una tecla en el teclado.

Para animar u ocultar elementos mientras el usuario se desplaza por la página, utilice el método scroll().

Para salir del menú usando Teclas ESC, se utiliza el método keydown(). Para crear un menú desplegable o agregar HTML a un div usando JQuery, se usa el método click().

efectos jQuery

Los efectos jQuery te permiten agregar animación y manipular elementos en una página.

En el siguiente ejemplo crearemos una ventana emergente y la ocultaremos. Podríamos usar dos identificadores, uno para abrir la ventana y otro para cerrarla, pero usaremos una clase para abrir y cerrar la ventana usando la misma función.

Eliminar etiquetas existentes Y

Desde el archivo index.html y agregue el siguiente código:

índice.html

Abierto cerrado

En el archivo style.css, usaremos una cantidad mínima de CSS para ocultar la superposición con display: none y centrarla en la pantalla.

css/estilo.css

Superposición (pantalla: ninguna; posición: fija; arriba: 50%; izquierda: 50%; transformación: traducir(-50%, -50%); alto: 200px; ancho: 200px; fondo: gris;)

En el archivo scripts.js usamos el método toggle() que alternará los valores de las propiedades. visualización CSS de ninguno a bloquear y viceversa, ocultando y mostrando la ventana cuando se presiona el mouse.

jQuery - biblioteca de javascript, que contiene funciones listas para usar lenguaje javascript, todas las operaciones de jQuery se realizan desde código JavaScript.

La biblioteca jQuery manipula elementos HTML, controlando su comportamiento y utilizando el DOM para cambiar la estructura de una página web. Al mismo tiempo, el original archivos HTML y CSS no cambian, los cambios se realizan solo en la visualización de la página para el usuario.

Para seleccionar elementos utilice Selectores CSS. La selección se realiza mediante la función $(). Cuando se llama, la función $() devuelve una nueva instancia Objeto JQuery, que envuelve cero o más elementos DOM y te permite interactuar con ellos de varias maneras.

La ejecución de varios escenarios sólo es posible después de que la estructura del documento haya terminado de cargarse, cuando el navegador convierte el código html de la página en árbol DOM. El proceso de carga está controlado por el diseño.

JQuery(documento).ready(función() (...));

Primero, la instancia del documento está envuelta en función jQuery(), después de aplicado método listo() , a la que se le pasa la función() (...) , que se ejecuta después de cargar el documento.

En la práctica, la forma abreviada de esta notación suele ser jQuery(function() (...)); , o $(función() (...)); .

Para almacenar información cuando trabajamos con la biblioteca jQuery, utilizamos variables de javascript. Las variables pueden almacenar elementos. Los nombres de las variables destinadas a almacenar los elementos devueltos comienzan con el signo $, por ejemplo:

$h = $(".list").parent().parent().detach();

Se utiliza para almacenar varios artículos. matrices de JavaScript:

$k = 15;

Reglas para trabajar con la biblioteca jQuery 1. Cómo agregar jQuery a una página web

Hay dos formas de agregar la biblioteca jQuery a su página web:

Utilice la versión del archivo jQuery alojado en recursos de google, Microsoft o jQuery.com.
Este método utiliza la Red de distribución de contenidos (CDN, red de distribución de contenidos), es decir. el archivo jQuery se encuentra en otro sitio web, que cuando lo solicita el usuario envía Este archivo a su computadora. Ventajas obvias este método— reducir la carga en su propio servidor web y acelerar la descarga de archivos gracias a la extensa red de servidores del distribuidor.

Para utilizar este método, debe seguir uno de los enlaces:

Después de ir al sitio de recursos, solo necesita copiar el enlace al archivo jQuery y agregarlo a su página web entre las etiquetas... Como resultado, debería obtener, por ejemplo,

Descargar ultima versión Bibliotecas jQuery del sitio web oficial. Para hacer esto, debe ir a jQuery.com y seleccionar la versión de la biblioteca que le interesa. Hay dos versiones del archivo jQuery disponibles para descargar: minimizada y sin comprimir. Tamaño archivo sin comprimir Aproximadamente 300 KB, contiene comentarios, por lo que se utiliza mejor para desarrollar y depurar código.
La versión minimizada del archivo pesa alrededor de 100 Kb, se han eliminado todos los comentarios y espacios innecesarios, lo que acelera la descarga del archivo por parte del navegador.

Para descargar, debe seguir el enlace y, en la ventana que se abre, hacer clic derecho y seleccionar "Guardar como...". Después de esto, coloque el archivo en la carpeta deseada(normalmente se utiliza la carpeta "scripts" para esto) y agrégala a tu página:

2. Reglas agregando jQuery a la pagina

Coloque enlaces al archivo jQuery dentro del archivo .
Coloque enlaces al archivo jQuery después de los enlaces a estilos CSS, ya que a menudo biblioteca jQuery Manipula los estilos de los elementos de la página web.
Coloque otras etiquetas... solo después del enlace del archivo jQuery si el script en cuestión usa la biblioteca jQuery.

3. Cómo crear un nuevo elemento html

Puedes crear un elemento HTML vacío, por ejemplo, un bloque, de varias formas:

1) usando forma corta entradas $("")
2) usando la instrucción $("")
3) usando la instrucción $("")

Los tres métodos funcionan, pero aun así se recomienda incluir etiquetas de apertura y cierre para mostrar que este elemento puede contener otros elementos.

Al crear un nuevo elemento, puede pasar un segundo parámetro al método $() en el formulario Objeto JavaScript, definiendo atributos adicionales elemento:

$("", (fuente: "images/flower.jpg", título: "Rose_in_garden", haga clic en: función() (...) )).appendTo("cuerpo");