Muy a menudo, seleccionar solamente elementos en una página no es suficiente. Por ejemplo, cuando se quiere seleccionar filas en una tabla puede que no se desee seleccionar todas las filas a la vez, sino solamente las filas pares o impares, etc. Ahí es donde los filtros entran en juego.
Filtros básicos
En jQuery se pueden utilizar filtros para filtrar aún más el conjunto de resultados de un selector. Esto abre una gran cantidad de posibilidades, ya que permite llegar a elementos como el primero, el último, todos los pares o impares, todos los títulos o elementos en una ubicación específica. La tabla que se encuentra después del siguiente ejercicio enumera los filtros básicos que utilizarás con más frecuencia y da un ejemplo de cómo usarlos. Para realizar pruebas con dichos ejemplos y otros que vendrán más adelante, puedes tomar como base el siguiente ejercicio, que crea una página de prueba donde probar tus sentencias jQuery.
Creación de una página de demostración jQuery
En este ejercicio, se creará una nueva página de prueba que puedes utilizar para probar los ejemplos de este post, simplemente mediante la sustitución de una sola línea de código.
- Crea una nueva página (Formularios Web Forms) y llámala “jQueryDemos.aspx”. Como vamos a hacer un ejemplo sencillo, dicha página no debe estar basada en una página maestra por lo que el checkbox “Seleccionar página maestra” debe estar desmarcado.
- Debes tener instalada la librería jQuery (para más información de como instalar la librería puedes ver los post sobre la "Administración de paquetes con NuGet"). En la etiqueta <head> debes añadir una referencia a tu librería de la siguiente manera:
<script src="/Scripts/jquery-2.0.0.min.js" type="text/javascript"></script>
En mi caso, la librería se encuentra en el directorio "Scripts" y se trata de la versión 2.0.0. - Añade el siguiente código HTML dentro de la etiqueta <div> que se ha creado automáticamente al crear la nueva página:
... <form id="form1" runat="server"> <div> <h1 title="First Header">First Header</h1> <table id="DemoTable"> <tr> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> </tr> <tr> <td>Row 2 Cell 1</td> <td>Row 2 Cell 2</td> </tr> <tr> <td>Row 3 Cell 1</td> <td>Row 3 Cell 2</td> </tr> <tr> <td>Row 4 Cell 1</td> <td>Row 4 Cell 2</td> </tr> <tr> <td>Row 5 Cell 1</td> <td>Row 5 Cell 2</td> </tr> </table> <h2>Second <span style="font-style: italic; font-weight: bold;">Header</span></h2> <input id="Button1" type="button" value="button" /> <input id="Text1" type="text" /> <input id="Checkbox1" type="checkbox" /> <input id="Checkbox2" type="checkbox" /> </div> </form> ... - Introduce el siguiente código justo antes de la etiqueta de cierra </body>:
$(function () { // Examples go here $('#DemoTable').css('background-color', 'green'); }); - Guarda los cambios y presione CTRL + F5 para abrir la página en el navegador. Si todo ha ido bien, el color de fondo de las celdas de la tabla se habrá puesto verde.
A continuación puedes ver una lista de los filtros básicos de jQuery. Recuerda que puedes probar cada ejemplo mediante la sustitución de las sentencias que se encuentran dentro de $(function)… Una vez sustituidas, guarda la página y cárgala de nuevo en el navegador para ver el resultado.
Para obtener una lista completa de todos los filtros básicos, echa un vistazo a la documentación de jQuery en http://api.jquery.com/category/selectors/.
No hay comentarios:
Publicar un comentario