Ejemplo para practicar con selectores en jQuery

  • Por
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Drakkar

25/3/2010
Validar Jquery
Gracias, me han sacado de una larga semana de sufrimiento con este ejemplo de como obtener los valores de inputs, he logrado hacer mis propias validaciones desde un archivo de php :)

Oscar

22/7/2010
Pregunta!
Me parecen muy interesantes todos los artículos publicados sobre este framework. Tengo una pregunta acerca del ejemplo que manejan en este artículo. Por qué cuando se introduce el selector "*" en el formulario, aparece código Javascript hasta arriba de la página? (con todos los demás selectores no da ese problema, solo cuando se pone el "*"), y cómo se podría solucionar eso?
De antemano gracias! y una felicitación!

francis_mp

06/12/2011
Selector *
Buenas, en este ejemplo, cuando pongo como selector en el campo de texto un *, desaparecen todos los elementos, como es de esperar, pero no vuelven a aparecer, es decir, no parece que funcione el efecto del fadeOut, ¿a que es debido?

Gracias y un saludo.

exekiel

20/12/2011
ejemplo selectores
Hola, estuve probando este ejemplo de selectores http://www.desarrolloweb.com/articulos/ejemplos/jquery/selectores/selectores-basicos.html probe con las opciones que enseñan aqui y funcionan bien, solo tuve problemas al usar "*" como selector. Parece que pincha el sitio al usarlo. Podrian decir a que se debe. Muchas gracias... seguire aprendiendo mas con uds!!


exekiel

eduardobape

17/1/2013
función attr() en JQuery 1.6+
Si estais utilizando la versión 1.6 o posteriores de JQuery, debeis sustituir la línea:
var selectorEscrito = $("#camposelector").attr("value");
por la siguiente:
var selectorEscrito = $("#camposelector").prop("value");

Esto es debido a que a partir de JQuery 1.6 el método attr() no se utiliza para obtener valores de propiedades del DOM. Para este caso se utiliza la función prop().
El atributo value de un input type="text" no es una propiedad del HTML ya que no puede aparecer dentro de la etiqueta <input type="text">. La propiedad value de un <input type="text"> existe como una propiedad del DOM que pertenece a un nodo obtenido del árbol DOM que represente el <input>.
Si lo hiciera con JavaScript puro, obtendría la propiedad value de un input de la siguiente manera:
document.getElementById("idinput").value

eduardobape

17/1/2013
Corrección de mi anterior comentario
Cuando decía que el atributo value no puede aparecer dentro de un <input type="text"> me equivoqué. Sí que puede aparecer, y si lo hace será el valor que aparecerá escrito en el input por defecto al cargar la página.

Lo que sí parece es que, como el valor de esta propiedad varía en función de lo que se escriba dentro del input, en JQuery se obtiene su valor mediante la función prop() en vez de attr().
Si tengo un input como éste:

<input type="text" id="id1" value="Valor inicial" />

y hago alert($("#id1").attr("value")) obtengo por pantalla el texto "Valor inicial".
Si hago alert($("#id1").prop("value")) obtengo el texto "Valor inicial".

Si ahora escribo en pantalla dentro del input con el teclado el texto Hola Mundo, si hago de nuevo la llamada a alert($("#id1").attr("value")) sigo obteniendo por pantalla el texto Valor inicial, ya que la función attr("value") toma el valor que tiene el atributo value del <input> en el código HTML.
En cambio, si ahora hago alert($("#id1").prop("value")), obtengo por pantalla Hola Mundo que es el nuevo texto que he escrito en el input.
Esto ocurre así porque la función prop() de JQuery obtiene el valor que tiene la propiedad value del nodo del DOM que representa al <input>, y no el valor de value dentro de la etiqueta <input> en el código HTML.

Hay que pensar que, a través del DOM, en JavaScript los atributos de las etiquetas HTML se convierten en propiedades de objetos del árbol DOM.
Si hago con Javascript lo siguiente:

var nodo_input_dom = document.getElementById("iddelinput");
alert(nodo_input_dom.value);

Accedo a la propiedad value del objeto del DOM llamado nodo_input_dom que representa al nodo correspondiente al input con id=iddelinput.

Así, obtengo lo que tenga escrito en el input y no el valor de la propiedad value dentro de la etiqueta input en el HTML.

cers

09/3/2013
utilizar la funcion prop
muy bueno el manual, aunque, cabe decir que como la version de jquery ya esta en la 1.9, ya no utiliza la funcion attr() sino la funcion prop() para obtener el valor , en este caso de un input.

jose87landeros

12/9/2013
Correccion al Problema con el *
Para solucionar el problema tuve que crear un segundo formulario donde se encuentran todos los controles que vamos a manipular con el boton en dependencia del texto introducido. Y en el selector $ agregue un segundo parametro que hace referencia al form[1]. Al parecer el problema que se da por el cual aparecen los CSS en la parte superior es que al hacer fadein se pinta absolutamente todo el codigo html que tenemos. Aqui seria bueno que nos aclaran nuestros amigos de desarrolloweb.

jose87landeros

12/9/2013
Codigo Corregido
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<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,document.forms[1]);
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, 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>
<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 con 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>
</form>
</body>
</html>

Mike Wazouski

12/7/2017
Holis!
Tus comentarios apestan igual que tú :v