JQuery es una biblioteca de JavaScript rápida, pequeña y rica en funciones. Hace
cosas como el recorrido y manipulación de documentos HTML, manejo de
eventos, animación, y Ajax mucho más simple con una API fácil de usar
que funciona en una multitud de navegadores. Con una combinación de versatilidad y extensibilidad, jQuery ha cambiado la forma en que millones de personas escriben JavaScript.
Uso
jQuery consiste en un único fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX.
La característica principal de la biblioteca es que permite
cambiar el contenido de una página web sin necesidad de recargarla,
mediante la manipulación del árbol DOM y peticiones AJAX. Para ello
utiliza las funciones
$() o jQuery().Función $()
La forma de interactuar con la página es mediante la función
Formas de agregar jquery al documento Html:
Ejemplos:
$(this).hide() - Oculta el elemento actual.
$("p").hide() - Oculta todos los elementos <p> .
$(".test").hide() - Oculta todos los elementos con class="test".
$("#test").hide() - Oculta todos los elementos con id="test".
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
indicamos que cuando el documento este cargado se ejecute una funcion que hara que los elementos de tipo parrafo se escondan.
$(document).ready(function(){
$("button").click(function(){
$("#test").show();
});
});
Ahora utilizamos el selector del boton para indicar que luego del evento click del mismo los elementos con el id="test" se muestren
Jquery y css:
Sintaxis: css("propertyname","value");
$("p").css("background-color", "yellow");
Si deseamos saber el valor de la propiedad basta con usar el metodo y solo pasar un argumento el cual será el nombre del atributo y la funcion retornara el valor del mismo.
Sintaxis para agregar multiples propuedades:
css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color": "yellow", "font-size": "200%"});
$(), un alias de jQuery(),
que recibe como parámetro una expresión CSS o el nombre de una etiqueta
HTML y devuelve todos los nodos (elementos) que concuerden con la
expresión. Esta expresión es denominada selector en la terminología de jQuery. Formas de agregar jquery al documento Html:
<head>
<script src="jquery-3.3.1.min.js"></script>
</head>
Con la etiqueta de script e importando el archivo de jquery con extension .js
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
Utilizand el cdn desde google.
Ejemplos:
$(this).hide() - Oculta el elemento actual.
$("p").hide() - Oculta todos los elementos <p> .
$(".test").hide() - Oculta todos los elementos con class="test".
$("#test").hide() - Oculta todos los elementos con id="test".
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
indicamos que cuando el documento este cargado se ejecute una funcion que hara que los elementos de tipo parrafo se escondan.
$(document).ready(function(){
$("button").click(function(){
$("#test").show();
});
});
Ahora utilizamos el selector del boton para indicar que luego del evento click del mismo los elementos con el id="test" se muestren
Jquery y css:
Sintaxis: css("propertyname","value");
$("p").css("background-color", "yellow");
Si deseamos saber el valor de la propiedad basta con usar el metodo y solo pasar un argumento el cual será el nombre del atributo y la funcion retornara el valor del mismo.
Sintaxis para agregar multiples propuedades:
css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color": "yellow", "font-size": "200%"});
Ejemplo animado:
