Veremos con detalle la función más importante de jQuery y para ello comenzaremos viendo su uso más común: seleccionar elementos de la página y obtener un objeto jQuery con los elementos seleccionados.
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, devolviendo un objeto jQuerydonde se encuentran todos los elementos de la página seleccionados y extendidos con las funcionalidades del framework. 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. La variable elem1 guardará entonces lo que se llama el objeto jQuery con el cual podremos trabajar, solicitando métodos o funciones de dicho objeto, para trabajar con el elemento seleccionado.
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");
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.
El código de esta página es el siguiente:
<html>
<head>
<title>función jquery</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var elem1 = $("#elem1");
//podríamos haber escrito: var elem1 = jQuery("#elem1");
elem1.css("background-color", "#ff9999");
var divs = $("div");
//podríamos haber escrito: var elem1 = jQuery("#elem1");
divs.css("font-size", "32pt");
});
</script>
</head>
<body>
<div id="elem1">Este elemento se llama elem1</div>
<div id="elem2">Este otro elemento se llama elem2</div>
</body>
</html>
<head>
<title>función jquery</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var elem1 = $("#elem1");
//podríamos haber escrito: var elem1 = jQuery("#elem1");
elem1.css("background-color", "#ff9999");
var divs = $("div");
//podríamos haber escrito: var elem1 = jQuery("#elem1");
divs.css("font-size", "32pt");
});
</script>
</head>
<body>
<div id="elem1">Este elemento se llama elem1</div>
<div id="elem2">Este otro elemento se llama elem2</div>
</body>
</html>
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");
inputs.css("color", "red");
Con la primera línea conseguimos seleccionar todos los elementos INPUT que pertenecen al primer formulario de la página. Se devolverá un objeto jQuery que contiene todos los input seleccionados. Con la segunda línea, invocando el método css() sobre el objeto jQuery recibido, 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()
parrafos_div1.hide()
En la segunda línea lanzamos el método hide() sobre el objeto jQuery que contiene los párrafos seleccionados, con lo que conseguimos que se oculten. Podemos ver una página que con este ejemplo en marcha.
Contamos con un video que nos habla de la funcion $ en jQuery.
En el siguiente artículo veremos otros usos de la función jQuery() / función dólar $().
Fuente:enlace
No hay comentarios:
Publicar un comentario