Metodos addClass y removeClass en jQuery

Temas > Programacion > Java script - Java > Metodos addClass y removeClass en jQuery

Julio(Admin)

Fecha de registro: 2011-01-21 21:33:50
Total temas creados: 448
Total mensajes enviados: 21

Fecha del Tema: 2013-04-16 22:32:21

Los métodos addClass y removeClass nos permiten asociar y desasociar una clase a un elemento o conjunto de elementos HTML. Disponer un div con un conjunto de párrafos. Cuando se presione un botón asociarle una clase y cuando se presione otro desasociarlo de dicha clase. pagina1.html <?php //esto no va <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> </head> <body> <input type="button" id="boton1" value="Asociar clase"> <input type="button" id="boton2" value="Desasociar clase"> <div id="descripcion"> <p>HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.</p> <p>Este lenguaje está constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes sobre una página, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para tabular datos, etc.</b> <p>Para poder crear una página HTML se requiere un simple editor de texto (en nuestro caso emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador que en este preciso momento está utilizando (recuerde que usted está viendo en este preciso momento una página HTML con su navegador).</p> <p>Lo más importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos. <p><p>Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabajó con el mismo. No pretende mostrar todas los elementos HTML en forma alfabética.</p> <p>Como veremos, de cada concepto se presenta una parte teórica, en la que se da una explicación completa, luego se pasa a la sección del ejercicio resuelto donde podemos ver el contenido de la página HTML y cómo la visualiza el navegador. Por último y tal vez la sección más importante de este tutorial es donde se propone que usted haga páginas en forma autónoma (donde realmente podrá darse cuenta si el concepto quedó firme).</p> </div> </body> </html> ?>//esto no va funciones.js <?php //esto no va var x; x=$(document); x.ready(inicializarEventos); function inicializarEventos() { var x=$("#boton1"); x.click(asociarClase); x=$("#boton2"); x.click(desasociarClase); } function asociarClase() { var x=$("#descripcion"); x.addClass("recuadro"); } function desasociarClase() { var x=$("#descripcion"); x.removeClass("recuadro"); } ?>//esto no va estilos.css <?php //esto no va .recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px; border-top-width:1px; border-right-width:3px; border-bottom-width:3px; border-left-width:1px; border-top-style:dotted; border-right-style:solid; border-bottom-style:solid; border-left-style:dotted; border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00; } ?>//esto no va Tengamos bien en cuenta que en el archivo HTML debemos indicar donde se encuentran los archivos js y css: <?php //esto no va <link rel="StyleSheet" href="estilos.css" type="text/css"> <script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="funciones.js"></script> ?>//esto no va Cuando se presiona el botón asociar hoja de estilo se ejecuta la función: <?php //esto no va function asociarClase() { var x=$("#descripcion"); x.addClass("recuadro"); } ?>//esto no va Donde llamamos al método addClass con el nombre de la clase (dicha clase debe estar definida en la hoja de estilo (css). De forma similar para desasociar una clase se ejecuta la función: <?php //esto no va function desasociarClase() { var x=$("#descripcion"); x.removeClass("recuadro"); } ?>//esto no va donde llamamos al método removeClass a partir de un objeto jQuery.

Si quieres dejar un comentario registrate o inicia sesión pulsando aquí

¿Has olviado tu contraseña?
¿Todavia no te has registrado?
Pulsa aquí para registrate

Visitas: 1220488
Usuarios en linea:

Google

Calendario

Lun	Mar	Mie	Jue	Vie	Sab	Dom
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Miercoles 19 de Enero 2022
Semana 03

Enlaces de interes

Todos los viernes a las 23:30 hs

Java script - Java

-Form con una ventana nueva
-Seleccionar un elemento html mediante su id
-Convertidor de divisas en java
-Programa para contar vocales de un fichero en java
-Entrada y salida estandar en Java
-Lectura y escritura de archivos en java
-Que es JavaScript
-Variables en java script
-Entrada de datos por teclado en java script
-Estructuras secuenciales en java script
-Estructuras condicionales simples en java script
-Estructuras condicionales compuesta en jaca script
-Estructuras condicionales anidadas en java script
-Operadores logicos (and) en las estructuras java s
-Operadores logicos or en las estructuras java s
-Estructura repetitiva (while) en java script
-Concepto de acumulador en java script
-Estructura repetitiva do while en java script
-Estructura repetitiva for en java script
-Funciones en java script
-Funciones con parametros en java script
-Funciones que retornan un valor en java script
-Programacion orientada a objetos en java script
-Clase Date en java script
-Clase Array en java script
-Clase String en java script
-Clase Math en java script
-Formularios y Eventos en java script
-Controles FORM, BUTTON y TEXT en java script
-Control PASSWORD en java script
-Control SELECT en java script
-Control CHECKBOX en java script
-Control RADIO en java script
-Control TEXTAREA en java script
-Eventos onFocus y onBlur en java script
-Eventos onMouseOver y onMouseOut en java script
-El objeto window en java script
-Propiedad location de objeto window en java script
-Propiedad screen del objeto window en java script
-Archivo JavaScript externo
-Que es el jQuery
-Seleccion de un elemento mediante el id jQuery
-Seleccion de elementos por el tipo de elementos jQ
-Nueva manera de programar JavaScript con jQuery
-Seleccion de elementos utilizando el selector CSS
-Seleccion de elementos con la clase CSS definida
-Metodos text, text valor en jQuery
-Metodos attr y removeAttr en jQuery
-Metodos html y html valor en jQuery
-Administracion de eventos con jQuery
-Eventos mouseover y mouseout en jQuery
-Evento hover en jQuery
-Evento mousemove en jQuery
-Eventos mousedown y mouseup en jQuery
-Evento dblclick en jQuery
-Evento focus en jQuery
-Evento blur en jQuery
-Manipulacion de los elementos del DOM en jQuery
-Efectos con los metodos show y hide en jQuery
-Efectos con los metodos fadeIn y fadeOut en jQuery
-Efecto con el metodo fadeTo en jQuery
-Efecto con el metodo toggle en jQuery
-Iteracion por los elementos each en jQuery
-Ajax metodo load en jQuery
-Ajax metodos ajaxStart y ajaxStop en jQuery
-Pasando datos por los metodos GET y POST en jQuery
-JSON en jQuery
-Funcion ajax en jQuery
-Llamadas encadenadas de metodos del objeto jQuery
-Menu desplegable en jQuery
-Mostrar un tooltip con datos recuperados en jQuery
-Producir JSON desde PHP
-Consumir un JSON desde PHP
-Sintaxis de un list array en java
-Maneras de salir de un iframe con java script
-Input type submit con evento onclick

..............................................................................................................................................................................................................................................

Foro creado y diseñado para compartir conocimientos
Derechos reservados. Autor: Julio Tortosa (Contacto)..