You are here
JQuery Nociones Básicas Sin categoría 

JQuery Nociones Básicas

JQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2, permitiendo su uso en proyectos libres y privativos.  jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

Características

  • Selección de elementos DOM.
  • Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath.
  • Eventos.
  • Manipulación de la hoja de estilos CSS.
  • Efectos y animaciones.
  • Animaciones personalizadas.
  • AJAX.
  • Soporta extensiones.
  • Utilidades varias como obtener información del navegador, operar con objetos y vectores, funciones para rutinas comunes, etc.
  • Compatible con los navegadores Mozilla Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 10.6+ y Google Chrome 8+.

Es Importante saber que siempre tenemos que hacer el llamado al archivo núcleo de jQuery para que el código pueda ser interpretado, el mismo se encuentra en la siguiente ruta: http://code.jquery.com/jquery-1.8.3.min.js

CONTENIDO

Conceptos Básicos de jQuery

 $(document).ready()

No es posible interactuar de forma segura con el contenido de una página hasta que el documento no se encuentre preparado para su manipulación. jQuery permite detectar dicho estado a través de la declaración $(document).ready() de forma tal que el bloque se ejecutará sólo una vez que la página este disponible.

El bloque $(document).ready()

$(document).ready(function() {

        console.log(‘el documento está preparado’);

    });

Existe una forma abreviada para $(document).ready() la cual podrá encontrar algunas veces; sin embargo, es recomendable no utilizarla en caso que este escribiendo código para gente que no conoce jQuery.

Forma abreviada para $(document).ready()

$(function() {

        console.log(‘el documento está preparado’);

    });

Además es posible pasarle a $(document).ready() una función nombrada en lugar de una anónima:

Pasar una función nombrada en lugar de una función anónima

function readyFn() {

        // código a ejecutar cuando el documento este listo

    }

    $(document).ready(readyFn);

Selección de Elementos

El concepto más básico de jQuery es el de “seleccionar algunos elementos y realizar acciones con ellos”. La biblioteca soporta gran parte de los selectores CSS3 y varios más no estandarizados. En http://api.jquery.com/category/selectors/ se puede encontrar una completa referencia sobre los selectores de la biblioteca.

A continuación se muestran algunas técnicas comunes para la selección de elementos:

Selección de elementos en base a su ID

$(‘#myId’); // notar que los IDs deben ser únicos por página

Selección de elementos en base al nombre de clase

$(‘div.myClass’); // si se especifica el tipo de elemento,

                      // se mejora el rendimiento de la selección

Selección de elementos por su atributo

$(‘input[name=first_name]’); // tenga cuidado, que puede ser muy lento

Selección de elementos en forma de selector CSS

$(‘#contents ul.people li’);

Pseudo-selectores

$(‘a.external:first’);  // selecciona el primer elemento <a>

                            // con la clase ‘external’

    $(‘tr:odd’);            // selecciona todos los elementos <tr>

                            // impares de una tabla

    $(‘#myForm :input’);    // selecciona todos los elementos del tipo input

                            // dentro del formulario #myForm

    $(‘div:visible’);       // selecciona todos los divs visibles

    $(‘div:gt(2)’);         // selecciona todos los divs excepto los tres primeros

    $(‘div:animated’);      // selecciona todos los divs actualmente animados

Nota

Cuando se utilizan los pseudo-selectores :visible y :hidden, jQuery comprueba la visibilidad actual del elemento pero no si éste posee asignados los estilos CSS visibility o display — en otras palabras, verifica si el alto y ancho físico del elemento es mayor a cero. Sin embargo, esta comprobación no funciona con los elementos <tr>; en este caso, jQuery comprueba si se está aplicando el estilo display y va a considerar al elemento como oculto si posee asignado el valor none. Además, los elementos que aún no fueron añadidos al DOM serán tratados como ocultos, incluso si tienen aplicados estilos indicando que deben ser visibles (En la sección Manipulación de este manual, se explica como crear y añadir elementos al DOM).

Como referencia, este es el fragmento de código que utiliza jQuery para determinar cuando un elemento es visible o no. Se incorporaron los comentarios para que quede más claro su entendimiento:

jQuery.expr.filters.hidden = function( elem ) {

        var width = elem.offsetWidth, height = elem.offsetHeight,

            skip = elem.nodeName.toLowerCase() === “tr”;

 

        // ¿el elemento posee alto 0, ancho 0 y no es un <tr>?

        return width === 0 && height === 0 && !skip ?

 

            // entonces debe estar oculto (hidden)

            true :

 

            // pero si posee ancho y alto

            // y no es un <tr>

            width > 0 && height > 0 && !skip ?

 

                // entonces debe estar visible

                false :

 

                // si nos encontramos aquí, es porque el elemento posee ancho

                // y alto, pero además es un <tr>,

                // entonces se verifica el valor del estilo display

                // aplicado a través de CSS

                // para decidir si está oculto o no

                jQuery.curCSS(elem, “display”) === “none”;

    };

 

    jQuery.expr.filters.visible = function( elem ) {

        return !jQuery.expr.filters.hidden( elem );

    };

 


 

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
 
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts

Comments

Leave a Comment


*