Ejemplo para practicar con selectores en jQuery

Ejemplo de página que nos permitirá hacer prácticas con los selectores de jQuery.

En el artículo anterior explicamos lo que eran los selectores de jQuery y los tipos de selectores básicos. Ahora, para que podamos ver por la práctica cómo funcionan cada uno de los selectores, hemos creado un ejemplo donde podremos escribir varios selectores y ver cómo funcionan, es decir, qué elementos de la página se consigue seleccionar con cada uno.

En este ejemplo tenemos una página que tiene varias etiquetas y un formulario. En el formulario hay un campo de texto y un botón. En el campo de texto podemos escribir cualquier selector y pulsando luego el botón, mediante jQuery, hacemos que parpadeen los elementos que concuerdan con ese selector.

El ejemplo puede verse en una página aparte. 

Aclaración: Por cierto, comento una cosa que resulta para la mayoría debe resultar obvia, pero quizás alguien pueda cometer el error. En los ejemplos del artículo anterior, escribíamos los selectores entre comillas, porque un selector es una cadena de caracteres. Pero en este caso, en la página del ejemplo, en el campo de texto hay que escribir los selectores sin las comillas. Si ponemos las comillas en realidad sería como intentar hacer un selector que incluyese el carácter comillas ". Esto es porque en el propio campo de texto cualquier cosa que escribamos ya es una cadena de caracteres de por si.

Para hacer este ejemplo tenemos que utilizar varios métodos y funciones jQuery de los cuales, casi todos, ya hemos hablado a lo largo del manual.

Veamos el formulario que hemos creado en la página:

<form>

Selector: <input type="Text" name="camposelector" id="camposelector">
<input type="button" id="boton" value="Ver qué elementos seleccionas">
</form>

Como se puede ver, tiene un campo INPUT de texto al que le hemos puesto un identificador para referirnos a él mediante jQuery. Fijarse también el INPUT para hacer un botón, al que también le pusimos un identificador.

Ahora veamos el código Javascript empleado:

$(document).ready(function(){
   $("#boton").click(function(evento){
      var selectorEscrito = $("#camposelector").attr("value");
      if (selectorEscrito==""){
         alert("Escribe algo en el campo de texto")
      }else{
         elementosSeleccionados = $(selectorEscrito);
         elementosSeleccionados.fadeOut("slow", function(){
            elementosSeleccionados.fadeIn("slow");
         });
      }
   });
});

Con document.ready() indicamos una función a invocar cuando la página está lista para recibir acciones de programación que modifiquen su estructura.

Con $("#boton").click() indicamos una función a ejecutar cuando se hace clic sobre el botón.

var selectorEscrito = $("#camposelector").attr("value");

Nos sirve para acceder al atributo value del campo de texto, es decir, a lo que haya escrito dentro.

Si no hay nada escrito en el campo, muestro un mensaje de alerta, porque en este caso el selector cadena vacía no sería valido y recibiríamos un mensaje de error.

Si había algo en el campo, pues selecciono con jQuery los elementos de la página que corresponden con el selector escrito en el campo de texto. Eso se hace con la línea:

elementosSeleccionados = $(selectorEscrito);

Luego, sobre el elemento o elementos seleccionados, invoco el método fadeOut(), que sirve para ocultar elementos de la página. A fadeOut() le paso dos parámetros, uno es la velocidad con la que tiene que hacer el efecto y otro es una función callback, a ejecutar sólo en el momento que el efecto haya concluido. Eso es con la línea:

elementosSeleccionados.fadeOut("slow", function(){

Por último, en la función callback realizamos una llamada al método fadeIn() sobre el mismo objeto jQuery resultado de aplicar el selector anterior, que sirve para que los elementos ocultados se muestren de nuevo en la página. Esto último con la línea:

elementosSeleccionados.fadeIn("slow");

En resumen, ocultando y mostrando luego los elementos de vuelta conseguimos ese parpadeo. Si nos resulta extraño este código, recordamos que en el Manual de jQuery de desarrolloweb.com ya hemos publicado varios artículos que aclaran los puntos tratados en este ejemplo, como los efectos rápidos o las funciones callback.

Código completo del ejemplo de selectores

Escribimos aquí para acabar el código completo de este ejemplo de trabajo con selectores.

<html>
<head>
   <title>Título de la página</title>
<style type="text/css">
.rojo{
   color: #cc0000;
}
.verde{
   color: #00cc00;
}
.azul{
   color: #0000cc;
}
.fondogris{
   background-color: #cccccc;
}
body{
   font-family: verdana, arial, helvetica;
}
div{
   margin-bottom: 4px;
}
</style>

<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
   $("#boton").click(function(evento){
      var selectorEscrito = $("#camposelector").attr("value");
      if (selectorEscrito==""){
         alert("Escribe algo en el campo de texto")
      }else{
         elementosSeleccionados = $(selectorEscrito);
         elementosSeleccionados.fadeOut("slow", function(){
            elementosSeleccionados.fadeIn("slow");
         });
      }
   });
});
</script>
</head>

<body>
<h1>Selectores en jQuery</h1>
<p>En esta página hay varias etiquetas. Ahora con este formulario puedes escribir un selector, para seleccionar algunas con jQuery, y luego pulsar el botón para ver qué elementos de la página has seleccionado.</p>
<form>
Selector: <input type="Text" name="camposelector" id="camposelector">
<input type="button" id="boton" value="Ver qué elementos seleccionas">
</form>

<p id="p1" class="rojo">Este es un párrafo con id="p1" y class="rojo"</p>

<p id="p2" class="verde">Este es un párrafo con id="p2" y class="verde" y aquí <i>meto una itálica</i></p>

<p id="p3" class="rojo fondogris">Este es un párrafo con id="p3" y class="rojo fondogris" (es decir, este elemento tiene aplicadas las clases "rojo" y "fondogris"</p>

<p id="p4">Este es un párrafo con id="p4", sin class</p>

<p>Este es un párrafo sin id ni class</p>

<div id="div1">Esto es una división con id="div1"</div>

<div id="div2" class="rojo">Esto es una división con id="div2" y class="rojo" y aqui <b>meto una negrita</b></div>

<div id="div3" class="verde fondogris">Esto es una división con id="div3" y class="verde fondogris"</div>

<div>Esto es una división sin id ni class</div>

<div class="azul">Esto es una división sin id, con class="azul"</div>

<b>Esto es una etiqueta b</b>

<i>Esto es una etiqueta i</i>
</body>
</html>

Dejamos de nuevo el enlace para ver este ejemplo en marcha y practicar con los selectores de jQuery.

Fuente:enlace