Jquery

 

1. Que es jQuery

2. Funciones y métodos básicos de jQuery (sus sintaxis y un ejemplo)

3. Funciones para eventos (sus sintaxis y un ejemplo)

4. Funciones para efectos visuales (sus sintaxis y un ejemplo)

5. Funciones para CSS (sus sintaxis y un ejemplo)

6. Funciones para nodos DOM (sus sintaxis y un ejemplo)

7.  Otras funciones útiles (sus sintaxis y un ejemplo)

8.  Diseñe un mapa conceptual del tema y un Mentefacto (ayuda en: https://sistemasremington.webnode.com/gerencia-de-sistemas/herramientas-mentales/)

Desarrollo

1) jQuery es una librería de JavaScript  para acceder a los objetos de DOM de mana manera más simple, también ha sido programada de la manera más eficiente y su tamaño ocupa alrededor de 20 KB, Jquery al igual que Prototype comparten muchas ideas y funciones con el mismo nombre, pero jQuery tiene en su diseño interno grandes diferencias que el Prototype, como por ejemplo el "encadenamiento" de las llamadas a los métodos.

 2) La función básica de jQuery y una de las más útiles tiene el mismo nombre que en Prototype, ya que se trata de la "función dólar": $(). A diferencia de la función de Prototype, la de jQuery es mucho más que un simple atajo mejorado de la función document.getElementById().

·         $('a')    // Selecciona todos los enlaces de la página

·          $('#primero')      // Selecciona el elemento cuyo id sea "primero"

·          $('h1.titular')      // Selecciona todos los h1 con class "titular"

·          $('a, #primero, h1.titular')    // Selecciona todo lo anterior

·          $('p[a]')     // Selecciona todos los párrafos de la página que tengan al menos un enlace

·          $('input:radio')      // Selecciona todos los radiobutton de los formularios de la página

·          $('a:contains("Imprimir")');      // Selecciona todos los enlaces que contengan la palabra "Imprimir"

·          $('div:visible')      // Selecciona los div que no están ocultos

·          $("ul#menuPrincipal li:even")       // Selecciona todos los elementos pares de una lista

·          $("ul#menuPrincipal li:odd")      // Selecciona todos los elementos impares de una lista

·          $("p:lt(5)")      // Selecciona los 5 primeros párrafos de la página

3) Una de las utilidades más interesantes de jQuery está relacionada con el evento onload de la página. Las aplicaciones web más complejas suelen utilizar un código similar al siguiente para iniciar la aplicación

·         window.onload = function() { ... };

·         // Ejecuta el evento 'onclick' en todos los párrafos de la página $('p').click();

·         // a todos los párrafos de la página $('p').click(function() { alert($(this).text()); });

·         // Ejecuta el evento 'mouseover' sobre un 'div' con id 'menu' $('div#menu').mouseover();

·         // a los elementos de un formulario

·         $('#elFormulario :input').blur(function() {

·           valida($(this));});

·         // Funcion toggle() que permite ejecutar dos funciones de forma alterna cada vez que pincha un elemento: $("p").toggle(function(){ alert("Me acabas de activar"); },function(){ alert("Me acabas de desactivar"); });

4) Las aplicaciones web más avanzadas incluyen efectos visuales complejos para construir interacciones similares a las de las aplicaciones de escritorio. JQuery incluye en la propia librería varios de los efectos más comunes:

·         // Oculta todos los enlaces de la página $('a').hide();

·         // Muestra todos los 'div' que estaban ocultos $('div:hidden').show();

·         // los 'div' que eran visibles $('div').toggle();

·         Otros efectos visuales incluidos son los relacionados con el fundido o "fading" (fadeIn() muestra los elementos con un fundido suave, fadeOut() oculta los elementos con un fundido suave y fadeTo()establece la opacidad del elemento en el nivel indicado) y el despliegue de elementos (slideDown()hace aparecer un elemento desplegándolo en sentido descendente, slideUp() hace desaparecer un elemento desplegándolo en sentido ascendente, slideToggle() hace desaparecer el elemento si era visible y lo hace aparecer si no era visible).

5) jQuery dispone de varias funciones para la manipulación de las propiedades CSS de los elementos. Todas las funciones se emplean junto con una selección de elementos realizada con la función $().

·         // En este caso, solo para el primer 'div' de la página $('div').css('background');

·         // En este caso, para todos los 'div' de la página $('div').css('color', '#000000');

·         // En este caso, para todos los 'div' de la página $('div').css({ padding: '3px', color: '#CC0000' });

·         // Obtiene la altura en píxel del primer 'div' de la página $('div').height(“150px”);

·         // Establece la anchura en píxel de todos los 'div' de la página $('div').width('300px');

6) La función $() permite seleccionar elementos (nodos DOM) de la página de forma muy sencilla. JQuery permite, además, seleccionar nodos relacionados con la selección realizada. Para seleccionar nodos relacionados, se utilizan funciones de filtrado y funciones de búsqueda.

·         // Sólo obtiene los párrafos que contengan la palabra 'importante' $('p').contains('importante');

·         // Selecciona todos los enlaces de la página, salvo el que // tiene una 'class' igual a 'especial' $('a').not('.especial'); // La siguiente instrucción es equivalente a la anterior $('a').not($('.especial'));

·         // Selecciona todas las listas de elementos de la página y quedate // sólo con las que tengan una 'class' igual a 'menu' $('ul').filter('.menu');

·         // Una función especial relacionada con los filtros y buscadores es end(), que permite volver a la selección original de elementos después de realizar un filtrado de elementos:

·         $('a') .filter('.pinchame')

.click(function(){ alert('Estás abandonando este sitio web');

 })

.end()

.filter('ocultame')

.click(function(){

 $(this).hide();

 return false;

})

.end();

7) jQuery detecta automáticamente el tipo de navegador en el que se está ejecutando y permite acceder a esta información a través del objeto $.browser:

·         $.browser.msie; // 'true' para navegadores de la familia Internet Explorer $.browser.mozilla; // 'true' para navegadores de la familia Firefox

·         $.browser.opera; // 'true' para navegadores de la familia Opera

·          $.browser.safari; // 'true' para navegadores de la familia Safari

 

Extraido de: https://sistemasremington.webnode.com/desarrollo-web-i/javascript/jquery/