La estructura básica se asemejará a:
$(document).ready(function(){A simple vista vemos el símbolo $ que delimita que estamos usando JQuery, una ready(function(){
$("p").click(function(){
$(this).hide(); });});
que nos asegura que está todo listo antes de cargar la función, un $(" ") en el que localizaremos el selector en este caso todos los párrafos, luego un evento (Click) y una acción (Ocultar) en este caso.
Una de las ventajas más grandes de JQuery es lo rápido que puede resultar aplicarlo.
Una de las desventajas es que trabajas sobre una capa más sobre JavaScript.
Para que funcione la función debes de llamar a la librería.
Bien sea la de modo desarrollado o bien sea la versión mini.
Estas están disponibles tanto en:
http://jquery.com/incluyendo este código
https://developers.google.com/speed/libraries/devguide?hl=es-es#jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>Tendrás cargada toda la funcionalidad de JQuery.
(Revisa en http://jquery.com/ cual es la última versión).
$(document).ready(function(){
//Cuando el documento esté preparado
$("Selector").Evento(function(){
//para todos los elementos, cuando se de este evento
$(this).efecto(); });});
//haz esto.
Selectores:
Para elegir el elemento que quieres modificar debes seleccionarlo por medio de:
$("tipo de elemento")
Donde tipo de elemento puede ser cualquier etiqueta html p, span, div, img...
$("#nombre id ")
Donde introduciremos el id que asignemos a cualquier elemento
$(".nombre class")
Donde introduciremos la class que asignemos a cualquier elemento
Más ejemplos:
Donde tipo de elemento puede ser cualquier etiqueta html p, span, div, img...
$("#nombre id ")
Donde introduciremos el id que asignemos a cualquier elemento
$(".nombre class")
Donde introduciremos la class que asignemos a cualquier elemento
Más ejemplos:
| Sintaxys | Evento de teclado |
|---|---|
| $("*") | Selecciona todos los elementos |
| $(this) | Selecciona el actual elemento |
| $("p.intro") | Todos los párrafos con la class intro |
| $("p:first") | El primer parrafo |
| $("ul li:first") | Selecciona el primer elemento de una lista |
| $("ul li:first-child") | Selecciona el primer hijo de una li |
| $("[href]") | Selecciona todos los elementos con el atributo href. |
| $("a[target='_blank']") | Selecciona todos los elementos que tienen un target blank |
| $("a[target!='_blank']") | Selecciona todos los elementos en el que el target no es blank |
| $(":button") | Selecciona todos los botones |
| $("tr:even") | Selecciona todos los tr pares |
| $("tr:odd") | Selecciona todos los tr impares |
Eventos:
| Evento de raton | Evento de teclado | Evento de formulario | Evento de pantalla |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
| Evento | Definición |
| click | Cuando clicamos con el raton |
| dblclick | Doble click |
| mouseenter | Ratón sobre |
| mouseleave | Ratón fuera |
| keypress | Clicamos una tecla |
| keydown | Dejamos la tecla presionada |
| keyup | Levantamos el dedo de la tecla |
| submit | Clicamos en envío de un formulario |
| change | Cambia el valor de un input |
| focus | Tenemos onfocus un elemento del formulario |
| blur | Quitamos el focus del elemento |
| load | Cargamos una ventana |
| resize | Reescalamos una ventana |
| scroll | Hacemos Scroll |
| unload | Cerramos una ventana |
Efectos:
| Métodos | Descipción |
|---|---|
| addClass() | Añade una o varias class |
| after() | Inserta contenido después del elemento |
| append() | Inserta contenido al final de los elementos |
| appendTo() | Inserta HTML después del elemnto |
| attr() | Setea o recoge atributos de los elementos seleccionados |
| before() | Inserta contenido antes del elemento |
| clone() | Crea una copia del elemento seleccionado |
| css() | Setea o recoge propiedades css |
| detach() | Borra elementos seleccionados |
| empty() | Borra todos los nodos hijos y su contenido de un elemento |
| hasClass() | Chequea sí los elementos tienen class |
| height() | Cambia o devuelve el alto de un elemento |
| html() | Cambia o devuelve el contenido de un elemento |
| innerHeight() | Incluye el alto más el padding sin el borde de un elemento |
| innerWidth() | Devuelve el ancho de un elemento incluyendo el padding pero no el borde |
| insertAfter() | Inserta elementos html después del elemento seleccionado |
| insertBefore() | Inserta elementos html antes del elemento seleccionado |
| offset() | Setea o devuelve la posición de un elemento |
| offsetParent() | Setea o devuelve la posición del elemento Parent |
| outerHeight() | Incluye el alto más el padding más el borde de un elemento |
| outerWidth() | Devuelve el ancho del elemento más el borde más el padding |
| position() | Devuelve la posición relativa del elemento |
| prepend() | Incluye contenido al principio del elemento |
| prependTo() | Inserta HTML al principio del elemento |
| prop() | Cambia o devuelve las propiedades de un elemento |
| remove() | Borra los elementos incluidos sus eventos |
| removeAttr() | Borra uno o más atributos del elemento |
| removeClass() | Borra la clase del elemento seleccionado |
| removeProp() | Borra una propieda através del prop() |
| replaceAll() | Remplaza elementos por HTML |
| replaceWith() | Remplaza elementos por contenido |
| scrollLeft() | Setea o devuelve un scroll a la izquierda |
| scrollTop() | Setea o devuelve un scroll a la derecha |
| text() | Introduce texto en el elemento |
| toggleClass() | Interruptor entre add/remove class |
| unwrap() | Borra los elementos padre |
| val() | Setea o devuelve el value de un elemento |
| width() | Setea o devuelve el ancho de un elemento |
| wrap() | Crea un contenedor alrededor de cada elemnto seleccionado |
| wrapAll() | Crea un contenedor alrededor de todos los elementos seleccionados |
| wrapInner() | Crea un contenedor alrededor de cada uno de los elementos seleccionados |
Fuente: http://www.w3schools.com/jquery/default.asp
No hay comentarios:
Publicar un comentario