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>