Con el objetivo de seguir tratando el Core de jQuery, del que ya empezamos a hablar en este Manual de jQuery, vamos a explicar la función jQuery, también conocida como $().
El funcionamiento del Core de jQuery se basa en esta función. Como dicen en la propia documentación del framework, "Todo en jQuery está basado en esta función o la usa de alguna forma".
La función jQuery sirve para hacer varias cosas, según los parámetros que le pasemos. El uso más simple es seleccionar elementos o grupos de elementos de una página web, pero también sirve para crear elementos sobre la marcha o para hacer un callback de funciones.
En realidad esta función se invoca también con el símbolo dólar $(), lo que sería una manera resumida de utilizarla y que nos ahorrará bastantes caracteres en el código y a la postre, tiempo de descarga y peso de los scripts de la página.
Veamos los distintos usos de esta función, según los parámetros que reciba.
Función jQuery enviando un selector y un contexto
Este uso de la función sirve para seleccionar elementos de la página. Recibe una expresión y se encarga de seleccionar todos los elementos de la página que corresponden con ella. Adicionalmente, podemos pasarle un contexto de manera opcional. Si no se le envía un contexto, selecciona elementos del documento completo, si indicamos un contexto conseguiremos seleccionar elementos sólo dentro de ese contexto.
La expresión que debemos enviar obligatoriamente como primer parámetro sirve de selector. En ese parámetro tenemos que utilizar una una notación especial para poder seleccionar elementos de diversas maneras y la verdad es que las posibilidades de selección con jQuery son muy grandes, como veremos en el tema de "Selectores".
Este paso de selección de elementos es básico en cualquier script jQuery, para poder actuar en cualquier lugar de la página y hacer nuestros efectos y utilidades Javascript sobre el lugar que deseemos.
Veamos un uso de esta función:
var elem1 = $("#elem1");
Con esta línea de código habremos seleccionado un elemento de la página que tiene el identificador (atributo id del elemento HTML) "elem1" y lo hemos guardado en una nueva variable llamada elem1.
Nota: Como hemos dicho, $() es un resumen o forma corta de invocar la función jQuery. También podríamos haber escrito la línea de esta manera: var elem1 = jQuery("#elem1");
Luego, podríamos hacer cualquier cosa con ese elemento seleccionado, como lo siguiente:
elem1.css("background-color", "#ff9999");
Este método css() no forma parte del core, pero sirve para cambiar atributos CSS de un elemento, entre otras cosas. Así pues, con esa línea cambiaríamos el color de fondo del elemento seleccionado anteriormente, que habíamos guardado en la variable elem1.
Ahora veamos otro ejemplo de la selección de elementos con la función dólar.
var divs = $("div");
divs.css("font-size", "32pt");
Aquí seleccionamos todas las etiquetas DIV de la página, y les colocamos un tamaño de letra de 32pt.
Podemos ver en una página aparte este pequeño script en uso.
El código de esta página es el siguiente:
Este elemento se llama elem1
Este otro elemento se llama elem2
Si queremos, podemos utilizar el segundo parámetro opcional, que es el contexto. Con él podríamos conseguir seleccionar elementos que pertenecen a una zona concreta de nuestro documento. Por defecto el contexto es la página entera, pero lo podemos restringir de esta manera:
var inputs = $("input",document.forms[0]);
inputs.css("color", "red");
Con la primera línea conseguimos seleccionar todos los elementos INPUT que pertenecen al primer formulario de la página. Con la segunda línea estaríamos cambiando el color del texto de esos elementos. Esto no seleccionaría los INPUT de otros formularios, como se puede ver en esta página de ejemplo.
Ahora por completar un poco más estas notas, veamos otro ejemplo en el que seleccionamos todos los párrafos (etiqueta P), pero restringimos el contexto únicamente los que están en un DIV con id="div1".
var parrafos_div1 = $("p","#div1");
parrafos_div1.hide()
En la segunda línea lanzamos el método hide() sobre los párrafos seleccionados, con lo que conseguimos que se oculten. Podemos ver una página que con este ejemplo en marcha.
El el siguiente artículo veremos otros usos de la función jQuery() / función dólar $().
No comments:
Post a Comment