jQuery xdiseñadores

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")