Ejemplo de página que nos permitirá hacer prácticas con los selectores de jQuery.
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.
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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...