Funcion jQuery o función $()

La función jQuery o $ se utiliza para seleccionar cualquier elemento de la página. Debemos pasarle un atributo para elegir el elemento o elementos que queramos seleccionar para interactuar con ellos.

Hay que tener muy en cuenta que podemos seleccionar cualquier cosa que esté en nuestro HTML, desde la propia página completamente en sí, hasta una etiqueta cualquiera que contenga un texto dentro.

Función $ jQuery

A continuación vamos a ver un uso muy común y básico que se hace de la función jQuery o $, el cual nos permite saber que la página está preparada para empezar a ejecutar nuestro código javascript junto con la librería jQuery. Para ello, seleccionaremos la ventana de nuestro navegador con la función jQuery y después nos cercioramos de que está preparada con la función .ready() de la librería jQuery.

Como bien sabemos, podemos introducir el código javascript tanto en línea a través de las etiquetas o bien enlazando un archivo .js desde la cabecera de la página. Particularmente, me gusta más tener todo en archivos separados de no ser que sea estrictamente necesario ponerlo en línea. Por lo tanto, durante este tutorial utilizaremos archivos separados.

Ejemplos de la función $ de jQuery

El archivo index.html quedaría entonces de la siguiente manera:

Copy to Clipboard

Si nos fijamos en las líneas 3 y 4, siempre hay que cargar la librería jQuery antes de cargar el archivo donde esté nuestro código javascript y funciones jQuery, ya que tienen que estar cargadas todas las funciones jQuery antes de su uso. De lo contrario, nos daría errores constantemente al utilizar las funciones jQuery ya que la página todavía no las conoce al no estar cargadas.

El archivo js/index.js quedaría de la siguiente forma:

Copy to Clipboard

A partir de este momento, todo el código que vamos a introducir dentro de la función .ready() podemos estar seguros de que se va a ejecutar.

Si por ejemplo, queremos mostrar una alerta nada más cargar la página, bastaría con poner el código de la alerta dentro de la función .ready() y este se ejecutará.

El archivo index.js quedaría de la siguiente forma:

¿Necesitas una impresora?

En este enlace encontrarás una selección de las mejores impresoras actuales

Ir a MejoresImpresoras.com

Copy to Clipboard

Finalmente, en el momento que cargue la página, el código que tenemos dentro de la función .ready() se ejecutará y nos mostrará el saludo: ¡Hola Tutoriales jQuery!

Para terminar, os dejo el enlace con la demo y el proyecto entero con todos sus archivos.

4.7 (94.86%) 35 votes

2020-10-09T09:29:20+00:00