jQuery
JQuery, es una librería de Java script según dicen en su página Web, sirve para escribir menos y hacer más, es una librería gratuita de código abierto. [http://jquery.com/]
Para trabajar con JQuery, deberíamos tener conocimientos básicos en HTML, CSS y JavaScript.
Esta librería tiene la posibilidad de seleccionar un elemento HTML de la página, manipularlo, manipular los estilos CSS, emplear funciones de eventos y animaciones y efectos JavaScript.
Para poder utilizar esta librería lo primero que tendremos que hacer será incluir su código en nuestras páginas. Podemos descargar el script desde su página web, subirlo a nuestro servidor, y ejecutarlo con la etiqueta script:
<script type="text/javascript" src="jquery.js"></script>
o usar las librerías que mantienen Google, Microsoft o la propia JQuery.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
La función jQuery cuenta a su vez con distintas propiedades y métodos.
Para seleccionar elementos de la página, se emplea una sintaxis muy parecida a la de CSS3-
La sintaxis se hace primero seleccionando el elemento HTML y definir las acciones sobre el elemento.
JQuery(selector).acción()
Suele cambiarse la palabra JQuery por el símbolo $
$(selector).acción()
(selector) para seleccionar elementos HTML
acción() que se ejecutan sobre ese elemento
Ejemplos:
$(this).hide() - hide oculta el elemento
$("p").hide() - oculta todos los párrafos.
$("p.test").hide() - oculta los párrafos que tienen la clase CSS test, class="test".
$("#test").hide() - Oculta los elementos con id test, id="test".
Es muy común usar la función document ready que espera a que la página se haya cargado, algunas funciones pueden fallar si los elementos no se han cargado.
$(document).ready(function(){
// jQuery functions go here...
});
Esta función se suele escribir en forma abreviada.
$(function() {
// jQuery functions go here...
});
Selectores
Selectores básicos
Selector universal: con un asterisco, se selecciona todos los elementos de la página
$("*")
Selector de tipo o etiqueta: se puede seleccionar todos los elementos que comparten un tipo de etiqueta
$("div")
Selector de clase: selecciona todos los elementos con la clase indicada (atributo class)
$("div.entrada")
Selector de identificador: selecciona el elemento con el identificador (atributo id) indicado
$("div#cabecera")
Grupos de selectores: se puede combinar el resultado de varios selectores distintos separándolos con comas
$("p,div,a")
Selectores de jerarquía
Selector de descendientes: selecciona elementos que desciendan de otro elemento, en forma de selectores CSS.
$("div.entrada h2")
Selector de hijos: selecciona elementos que sean hijos directos de otro elemento
$("div.entrada > h2")