Curso jQuery: 4 Acceso a los elementos de la web
Nueva noticia publicada en https://amdisenoweb.es/curso-jquery-4-acceso-los-elementos-la-web/
Curso jQuery: 4 Acceso a los elementos de la web
A la hora de programar con jQuery muchas veces nos va a resultar imprescindible poder acceder a ciertos valores de campos de texto, radio, checkbox, option o a etiquetas div, etc..
Como bien sabemos para acceder a un componente web dependerá de si dicho componente utiliza una clase o un id, si usa una clase utilizaremos “.clase” pero si usa un id “#id” de esta manera podemos acceder de forma sencilla a un componente como un div, spam, p, etc…
Por ejemplo si tengo <div class=”caja1″></div> para acceder a caja1, usaremos $(“.caja1”), ahora bien lo que hagamos a continuación dependerá de lo que queramos realizar con la caja1.
También podemos complicar un poco la cosa para refinar la seleccion, por ejemplo podemos ponerlo de la siguiente manera
$(“#caja1 .lista”) Lo que haremos sera seleccionar el elemento que tiene la clase lista dentro del elemento con el id caja1, por ejemplo
<div id="caja1"> <p>Esto es un texto</p> <ul class="lista"> <li>Elemento 1</li> <li>Elemento 2</li> </ul> <p> otro texto </p> </div> <ul class="lista> <li>Elemento 3</li> <li>Elemento 4</li> </ul>
Así seleccionaríamos solo la lista que esta dentro del div con los elementos 1 y 2.
Otras formas de selección:
$(“.enlaces:first”); seleccionamos el primer elemento con la clase enlace
$(“p:odd”); seleccionamos todos lo párrafos pares.
$(“div:visible”); seleccionamos todos los div visibles
$(“div:gt(2)”); seleccionamos todos los divs menos los 3 primeros
$(“div:lt(2)”); seleccionamos los 3 primeros div
Estas son algunas de las formas de seleccionar elementos
Cuando tenemos un div podemos acceder a su contenido para modificarle mediante:
//con esto sustituimos el contenido del div $(".caja").html("Nuevo contenido"); //con esto añadir mas contenido al div $(".caja").append("Añadir contenido");
Si tenemos una casilla de texto podemos acceder y modificar su valor con la función val(), por ejemplo
Nombre :<input type="text" class="nombre" value="pedro"> <script type="text/javascript"> $(document).ready(function(e) var nombre; //Con esto recuperamos el valor que tiene la casilla nombre //no tiene mucha logica poner esta orden pues se ejecuta nada mas cargar la web con lo que recupera el //de la casilla, lo suyo seria que se ejecutase cuando pulsemos un boton como veremos mas adelante. nombre=$(".nombre").val(); //Con esto añadimos un valor nuevo a la casilla nombre $(".nombre").val("nuevo nombre"); ); </script>
