jQuery se utiliza para seleccionar cualquier elemento de un documento HTML y luego realizar cualquier acción sobre ese elemento seleccionado. Para seleccionar un elemento HTML, se usan selectores jQuery, estudiaremos estos selectores en detalle en nuestros tutoriales. Por ahora veamos la sintaxis básica de jQuery para encontrar, seleccionar o consultar un elemento y luego realizar una acción sobre dicho elemento seleccionado.
Evento Document Ready
Antes de ver la sintaxis de jQuery, tratemos de entender qué es el evento Document Ready. En realidad, antes de ejecutar cualquier script de jQuery, queremos esperar a que el documento esté completamente cargado. Esto es porque jQuery trabaja en el DOM y si el DOM completo no está disponible antes de ejecutar las sentencias jQuery, entonces no obtendremos el resultado deseado.
La siguiente es la sintaxis básica de un evento Document Ready:
$(document).ready(function(){
// Aquí va nuestro código jQuery...
});También puedes utilizar la siguiente sintaxis para el evento de Document Ready:
$(function(){
// Aquí va nuestro código jQuery...
});Siempre se debe mantener el bloque de evento Document Ready dentro de las etiquetas <script>…</script> y se puede mantener esta etiqueta de script dentro de las etiquetas <head>…</head> o en la parte inferior de la página antes de cerrar la etiqueta <body>.
Puedes utilizar cualquiera de estas dos formas para mantener tu código jQuery dentro del bloque que se ejecutará sólo cuando el DOM completo se cargue y esté listo para ser analizado.
Sintaxis de jQuery
La siguiente es la sintaxis básica para seleccionar elementos HTML y luego realizar alguna acción sobre el/los elemento/s seleccionado/s:
$(document).ready(function(){
$(selector).action()
});Cualquier código de jQuery comienza con el signo de dólar $ (o con la palabra jQuery) y luego ponemos un selector dentro de las llaves (). Esta sintaxis $(selector) es suficiente para devolver los elementos HTML seleccionados, pero si tienes que realizar alguna acción sobre el elemento(s) seleccionado(s) entonces se requiere la parte action().
La función por defecto es $(), que es un sinónimo de la función jQuery(). Así que en caso de que esté utilizando cualquier otra biblioteca de JavaScript donde el signo $ está en conflicto con alguna otra cosa, puedes reemplazar el signo $ por la palabra jQuery y puedes utilizar la función jQuery() en lugar de $().
Ejemplos
A continuación hay algunos ejemplos para ilustrar la sintaxis básica de jQuery. El siguiente ejemplo seleccionará todos los elementos <p> de un documento HTML y los ocultará.
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("p").hide()
});
</script>
</head>
<body>
<h1>Sintaxis básica de jQuery</h1>
<p>Esto es una etiqueta p</p>
<p>Esto es otro p</p>
<span>Esto es un span</span>
<div>Esto es un div</div>
</body>
</html>Reescribamos el ejemplo anterior utilizando el método jQuery() en lugar de $():
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery("p").hide()
});
</script>
</head>
<body>
<h1>Sintaxis básica de jQuery</h1>
<p>Esto es una etiqueta p</p>
<p>Esto es otro p</p>
<span>Esto es un span</span>
<div>Esto es un div</div>
</body>
</html>A continuación la sintaxis de jQuery para cambiar el color de todos los elementos <h1> a rojo.
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("h1").css("color", "red")
});
</script>
</head>
<body>
<h1>Sintaxis básica de jQuery</h1>
<p>Esto es una etiqueta p</p>
<p>Esto es otro p</p>
<span>Esto es un span</span>
<div>Esto es un div</div>
</body>
</html>De la misma manera se puede cambiar el color de todos los elementos cuya clase es «rojo».
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".rojo").css("color", "red");
});
</script>
</head>
<body>
<h1>Sintaxis básica de jQuery</h1>
<p>Esto es una etiqueta p</p>
<p>Esto es otro p</p>
<span>Esto es un span</span>
<div class="rojo">Esto es un div</div>
</body>
</html>