Sintaxis básica de jQuery | TIEngranaje

Escribir código jQuery es relativamente fácil si está ya familiarizado con el modelo de objetos de documento (DOM), JavaScript y CSS. Tú no tiene que ser un experto en cualquiera de esas áreas, para dominar jQuery.

jQuery en realidad hace que sea más fácil para que desarrolles tus páginas web. La mayor parte de lo que hará inicialmente con jQuery es acceder a elementos dentro de su página y aplicar los efectos deseados.

Sintaxis de jQuery

sintaxis de jQuery es simple de usar y entender. Podemos seleccionar fácilmente elementos HTML y realizar una acción sobre los elementos. La sintaxis básica es $(selector).action(). Empiezas con un signo de dólar $.

El signo de dólar se usa para definir el código como jQuery. A continuación, defina un selector para ubicar los elementos de destino. Finalmente, realiza una acción. Estos son algunos ejemplos de cómo seleccionar elementos.

$("div"); // selects all HTML div elements  
$("#myElement"); // selects one HTML element with ID "myElement"  
$(".myClass"); // selects HTML elements with class "myClass"  
$("div#myElement"); // selects div element with ID "myElement"  
$("ul li a.navigation"); // selects anchors with class "navigation"

Aquí hay un ejemplo de cómo colocar texto dentro de un div elemento:

<div id="test1"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#test1").text("Hello, World!");
    });
</script>

Función Documento.Listo

Es una buena práctica esperar a que el documento sea completamente cargado y listo, antes de permitir que su código jQuery sea utilizable. Una de las primeras cosas que debe aprender sobre jQuery es el ready evento. La mayor parte de su código jQuery estará contenido dentro de este controlador.

Esto asegurará que el código jQuery no corre hasta que el DOM esté listo. Confirmará que cualquier elemento al que se acceda ya está cargado y accesible, por lo que el el guión no regresará cualquier error relacionado con elementos faltantes. Además, también asegura que su código sea discreto.

$(document).ready(function(){
   // jQuery code 
});