 |
Selección de elementos utilizando los selectores CSS en JQuery
Métodos jQuery HTML / CSS
La siguiente tabla enumera todos los métodos utilizados para manipular HTML y CSS. Los siguientes métodos funcionan para documentos HTML y XML. Excepción: el método html ().
| Metodo | Descripción |
| addClass() | Agrega uno o más nombres de clase a los elementos seleccionados. |
| after() | Inserta contenido después de los elementos seleccionados. |
| append() | Inserta contenido al final de los elementos seleccionados. |
| appendTo() | Inserta elementos HTML al final de los elementos seleccionados. |
| attr() | Establece o devuelve atributos / valores de elementos seleccionados. |
| before() | Inserta contenido antes de los elementos seleccionados. |
| clone() | Hace una copia de los elementos seleccionados.. |
| css() | Establece o devuelve una o más propiedades de estilo para los elementos seleccionados. |
| detach() | Elimina elementos seleccionados (conserva datos y eventos). |
| empty() | Elimina todos los nodos secundarios y el contenido de los elementos seleccionados. |
| hasClass() | Comprueba si alguno de los elementos seleccionados tiene un nombre de clase específico. |
| height() | Establece o devuelve la altura de los elementos seleccionados. |
| html() | Establece o devuelve el contenido de los elementos seleccionados. |
| innerHeight() | Devuelve la altura de un elemento (incluye relleno, pero no borde). |
| innerWidth() | Devuelve el ancho de un elemento (incluye relleno, pero no borde). |
| insertAfter()) | Inserta elementos HTML después de los elementos seleccionados. |
| insertBefore() | Inserta elementos HTML antes de los elementos seleccionados. |
| offset() | Establece o devuelve las coordenadas de desplazamiento para los elementos seleccionados (en relación con el documento). |
| offsetParent() | Retorna la hora. |
| outerHeight() | Devuelve la altura de un elemento (incluye relleno y borde). |
| outerWidth() | Devuelve el ancho de un elemento (incluye relleno y borde). |
| position() | Devuelve la posición (relativa al elemento padre) de un elemento. |
| prepend() | Inserta contenido al comienzo de los elementos seleccionados. |
| prependTo() | Inserta elementos HTML al comienzo de los elementos seleccionados |
| prop() | Establece o devuelve propiedades / valores de elementos seleccionados. |
| remove() | Elimina los elementos seleccionados (incluidos datos y eventos). |
| removeAttr() | Elimina uno o más atributos de los elementos seleccionados. |
| removeClass() | Elimina una o más clases de los elementos seleccionados. |
| removeProp() | Elimina una propiedad establecida por el método prop (). |
| replaceAll() | Reemplaza los elementos seleccionados con nuevos elementos HTML. |
| replaceWith() | Reemplaza los elementos seleccionados con contenido nuevo. |
| scrollLeft() | Establece o devuelve la posición de la barra de desplazamiento horizontal de los elementos seleccionados. |
| scrollTop() | Establece o devuelve la posición de la barra de desplazamiento vertical de los elementos seleccionados. |
| text() | Establece o devuelve el contenido de texto de los elementos seleccionados. |
| toggleClass() | Alterna entre agregar / eliminar una o más clases de los elementos seleccionados. |
| unwrap() | Elimina el elemento padre de los elementos seleccionados. |
| val() | Establece o devuelve el atributo de valor de los elementos seleccionados (para elementos de formulario). |
| width() | Establece o devuelve el ancho de los elementos seleccionados. |
| wrap() | Envuelve los elementos HTML alrededor de cada elemento seleccionado. |
| wrapAll () | Envuelve los elementos HTML alrededor de todos los elementos seleccionados. |
| wrapInner () | Envuelve los elementos HTML alrededor del contenido de cada elemento seleccionado. |
addClass()
El método addClass() agrega uno o más nombres de clase a los elementos seleccionados.
Este método no elimina los atributos de clase existentes, solo agrega uno o más nombres de clase al atributo de clase.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>$(document).ready(function(){
$("button").click(function(){
$("p:first").addClass("intro");
});
});
</script><style>
.intro {
font-size: 150%;
color: red;
}
</style></head>
<body><h1>Este es un encabezado</h1>
<p>Este es un párrafo.</p>
<p>Este es otro párrafo..</p><button>Cambia los valores del primer parrafo /button>
</body>
</html>
after ()
El método after () inserta el contenido especificado después de los elementos seleccionados. Sugerencia: Para insertar contenido antes de los elementos seleccionados, use el método before () .
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").after("<p>Hola MUNDO!</p>");
});
});
</script>
</head>
<body><button >Inserte contenido <b>DESPUES</b> de cada parrafo</button>
<p>Esto es un parrafo.</p>
<p>Esto es otro parrafo.</p>
</body>
</html>
append ()
El método append () inserta el contenido especificado al final de los elementos seleccionados.. Sugerencia: Para insertar contenido al principio de los elementos seleccionados, use el método prepend () .
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>TEXTO AGREGADO</b>.");
});$("#btn2").click(function(){
$("ol").append("<li><b>ITEM AGREGADO</b></li>");
});
});
</script>
</head>
<body>
<p>Este es un parrafo..</p>
<p>Este es otro parrafo.</p>
<ol>
<li>Item lista 1</li>
<li>Item lista 2</li>
<li>Item lista 3</li>
</ol>
<button id="btn1"><b>AGREGAR TEXTO</b></button>
<button id="btn2"><b>AGREGAR ELEMENTO LISTA</b></button>
</body>
</html>
Una de las características más interesantes de jQuery es poder obtener la referencia de elementos del DOM utilizando para ello selectores de CSS (Significa que el manejo de Hojas de estilo nos facilita las cosas)
El primer problema que dispondremos será ocultar todos los list item de una lista desordenada, dispondremos dos listas en la página por lo que conocemos hasta ahora no nos sirve indicar:
x=$("li");
ya que esto nos selecciona todos los elementos de tipo li de la página y nosotros queremos solo los de una de las listas.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<meta charset="UTF-8">
</head>
<body>
<input type="button" value="ocultar item primer lista" id="boton1">
<h2>Lista 1</h2>
<ul id="lista1">
<li>Opción número 1</li>
<li>Opción número 2</li>
<li>Opción número 3</li>
<li>Opción número 4</li>
</ul>
<h2>Lista 2</h2>
<ul id="lista2">
<li>Opción número 1</li>
<li>Opción número 2</li>
<li>Opción número 3</li>
<li>Opción número 4</li>
</ul>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="func5.js"></script>
</body>
</html>
Cada lista tiene definido su atributo id.
let x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
let x=$("#boton1");
x.click(ocultarItem);
}
function ocultarItem()
{
let x=$("#lista1 li");
x.hide();
}
En la función inicializarEventos obtenemos la referencia del botón mediante su id y llamamos al método click:
function inicializarEventos()
{
let x=$("#boton1");
x.click(ocultarItem);
}
Ahora lo nuevo es obtener la referencia de todos los elementos li que pertenecen a la primer lista:
let x=$("#lista1 li");
x.hide();
Pasamos a la función $ el selector CSS que accede a todos los elementos de tipo li contenidos en #lista1.
Todas las reglas de CSS están disponibles para seleccionar los elementos del DOM.