Ejemplo para practicar con selectores en jQuery - I

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");

});

}

});

});