Manual básico de jQuery, Esquemas y mapas conceptuales de Programación Java

¡Descarga Manual básico de jQuery y más Esquemas y mapas conceptuales en PDF de Programación Java solo en Docsity!

Manual básico de jQuery

http://mundosica.github.io/tutorial_hispano_jQuery/

Editado por José Luis Comesaña

ÍNDICE

• Introducción a jQuery
  • Descripción de este manual
  • Breve referencia HTML
  • Concepto DOM
  • Breve referencia CSS
    • Anatomía CSS
  • Software a usar
    • 1. Editor de texto:
    • 1. Navegador web:..............................................................
    • 1. La libreria jQuery.
      • Evolución de jQuery
      • Cambios entre 1.7 y 1.8.................................................
      • Cambios en la futura versión 2.0
      • Agregando jQuery
    • 1. Servidor web.
      • Selectores con jQuery
      • Transversatilidad
    • Enlaces externos recomendables:
• Caracteristicas principales de jQuery.
  • constructor jQuery
  • $ es una alias de jQuery.
    • Ejemplo - jQuery Alias
      • Código HTML.
      • Código jQuery
  • Trabaja por grupos( Iteración implicita ).
    • Ejemplo - Comportamiento trabajo por grupo
      • Código HTML.
      • Código jQuery
  • Diseñado para realizar consultas atraves del DOM.
    • Es un sistema modular.
  • Chaining.
    • Enlaces externos.
• Manejo de eventos
  • Introducción a los eventos.
  • Evento click
    • Ejemplo - Click
      • Codigo HTML
      • Código JS......................................................................
  • Comportamiento en cola.
  • Evento hover
    • Ejemplo - Hover
      • código HTML:...............................................................
      • CSS
      • código JS:
  • Eventos del teclado
    • focusout
    • keypress
    • keyup
    • keydown
    • Ejemplo de eventos de teclado:
    • Ejemplo - Evento Teclado
    • código HTML:
    • código CSS:........................................................................
    • Código jQuery::
  • Borrando eventos función off.
    • Enlaces recomendados. - Efectos y modificaciones sobre el DOM. - insertbefore - before............................................................................ - insertafter - after............................................................................... - append - appendto....................................................................... - fadeIn - Animate......................................................................... - animate sobre un color. - Código HTML. - Código CSS................................................................... - Código jQuery. - show - hide - Lecturas recomendadas. - Ajax. - Ajax y Jquery. - Ejemplo básico - Quitando la opción asincrona. - Ejemplo Manejando el error. - Otras funciones Ajax - getScript - Ejemplo - getScript - Código JS - Código CSS................................................................... - Código HTML - getJSON - Ejemplo - getJson y la API de Flickr - Código HTML - Código CSS:.................................................................. - Código jQuery - Ejemplo load - Lecturas recomendadas. - Organización de código. - Organizando el código en archivos. - Ejemplo - tabla de contenidos - JS - jQuery Plugins. - Uso. - Ejemplo plugin jquery - Código JS - Uso.................................................................................... - Anexo I - Etiquetas en la cabecera. - Inserción de código javascript - Insercción de código CSS.............................................. - Tipo de carácteres. - Descripción de la página. - Title. - Descripción (Description) - Robots. - Parabras clave Keywords: - Enlaces recomendados:

• 4 - http://mundosica.github.io/tutorial_hispano_jQuery/

La siguiente imagen es una representación del DOM del documento visto anteriormente:

La imagen anterior muestra el documento Html en forma de un árbol. Esta representación es conocida como un árbol DOM.

El responsable del DOM es el World Wide Web Consortium ( W3C ).

Breve referencia CSS

Cascading Style Sheets (hojas de estilo en cascada). CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).

El responsable del CSS es tambien el World Wide Web Consortium ( W3C ).

Anatomía CSS Con CSS podemos hacer declaraciones de estilo sobre los elementos HTML , para esto el W3C ha definido una serie de selectores los cuales siguen el siguiente formato:

JQuery hace uso de estos selectores para interactuar con el DOM , por esta razón es importante que el lector comprenda CSS lamentablemente el alcance de este manual no contempla la explicación detallada de CSS.

Para nuestros fines basta con que conozcamos bien el uso de selectores CSS : Lista de Selectores CSS

Selector Significado

Versión CSS

• Cualquier elemento 2

E Elementos con etiqueta E 1 E[foo] Elementos E con foo como atributo 2

E[foo="bar"] Elementos E con atributo foo con valor bar 2

E[foo~="bar"]

an E element whose "foo" attribute value is a list of whitespace- separated values, one of which is exactly equal to "bar" 2

E[foo^="bar"] Elementos E con atributo foo cuyo valor inicia en bar 3

http://mundosica.github.io/tutorial_hispano_jQuery/ - 5 -

E[foo$="bar"] Elementos E con atributo foo cuyo valor termina en bar 3

E[foo*="bar"]

Elementos E con atributo foo cuyo valor contiene como subcadena a bar^3

E[foo|="en"] an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"

2

E:root Elementos E , donde E es un elemento raiz del documento 3 E:nth-child(n) Elementos enésimo E 3 E:nth-last- child(n)

Elementos enésimo E contanto del último elemento al primero 3

E:nth-of-type(n) an E element, the n-th sibling of its type 3

E:nth-last-of- type(n)

an E element, the n-th sibling of its type, counting from the last one 3

E:first-child an E element, first child of its parent 2 E:last-child an E element, last child of its parent 3 E:first-of-type an E element, first sibling of its type 3

E:last-of-type an E element, last sibling of its type 3 E:only-child an E element, only child of its parent 3

E:only-of-type an E element, only sibling of its type 3 E:empty an E element that has no children (including text nodes) 3

E:link E:visited

an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)

1

E:active E:hover E:focus

an E element during certain user actions 1 y 2

E:target an E element being the target of the referring URI 3

E:lang(fr)

an element of type E in language "fr" (the document language specifies how language is determined)

2

E:enabled E:disabled a user interface element E which is enabled or disabled^3

E:checked

a user interface element E which is checked (for instance a radio- button or checkbox) 3

E::first-line the first formatted line of an E element 1 E::first-letter E::first-letter 1

E::before generated content before an E element 2 E::after generated content after an E element 2

E.warning an E element whose class is "warning" (the document language specifies how class is determined).

1

E#myid ID selectors 1 E:not(s) an E element that does not match simple selector s 3 E F an F element descendant of an E element 1

E > F an F element child of an E element 2 E + F an F element immediately preceded by an E element 2

E ~ F an F element preceded by an E element 3 Fuente: http://www.w3.org/TR/css3-selectors/#selectors

Software a usar

Para desarrollar sitios de Internet con jQuery básicamente necesitamos 4 cosas:

1. Editor de texto
2. Navegador web.

http://mundosica.github.io/tutorial_hispano_jQuery/ - 7 -

Otra razón para usar firefox es que es un proyecto de código libre y abierto, distribuyéndose bajo triple licencia:  Licencia Pública de Mozilla (MPL)  Licencia pública general de GNU (GPL)  Licencia pública general reducida de GNU (LGPL).

3. La libreria jQuery. jQuery : biblioteca de JavaScript , fue creada por John Resig, permite simplificar la manera de interactuar con los documentos HTML , manipular el árbol DOM , manejo de eventos, desarrollar animaciones y agregar interacción con la técnica AJAX en páginas web.

Evolución de jQuery JQuery es una librería en constante cambio, es recomendable usar la libreria estable más reciente, ya que en cada nueva versión se integran características nuevas al tiempo que se mejoran las anteriores, la imagen de la derecha es una comparativa en el rendimiento de jQuery 1.6.4 vs jQuery 1.7 en distintos navegadores: Fuente: http://blog.jquery.com/2011/11/03/jquery-1-7- released/

Cambios entre 1.7 y 1. Cuando jQuery migro a la versión 1.8 se hicieron algunos cambios importantes, por ejemplo la versión 1.8 es más pequeña que 1.7 , las funciones css() y animate() libres de prefijos(-webkit, -moz, - ms, -o), se repararon 160 errores, mayor flexibilidad en animaciones y se mejoraron las consultas. Fuente: http://blog.jquery.com/2012/08/09/jquery-1-8-released/

• 8 - http://mundosica.github.io/tutorial_hispano_jQuery/

Cambios en la futura versión 2. En estos momentos la librería jQuery está evolucionando a la versión 2.0, .... Fuente: http://blog.jquery.com/2013/04/09/jquery-2-0-beta-3-released/

Agregando jQuery Una vez que tenemos la librería jQuery , lo siguiente es incluir la librería en nuestros documentos HTML , esto lo hacemos, agregando el script dentro de la cabecera del documento.

Por otra parte también puedes agregar la librería directamente del servidor de google API : https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

4. Servidor web. Un servidor web es un equipo que esta en la escucha del puerto http(80), para nuestros fines nos es suficiente con instalar apache web server , sin embargo cuando se habla de servidor web casi siempre se incluye apache , php y msql ,si deseas tener todos estos paquetes los cuales te serán útiles a futuro te recomiendo instalar un xampp el cual está disponible para:  GNU/Linux  Mac ®  Windows ®

Selectores con jQuery La propiedad más significativa de jQuery es su flexibilidad para hacer consultas a través del DOM (de ahí el nombre). jQuery básicamente nos permite hacer 3 tipos de consultas:  [Consultas CSS ]  Consultas xPath  [Consultas Trasversales ]

Este manual explica las consultas CSS y algunos métodos trasversales , dejando un poco de lado las consultas xPath ya que casi no se usan, pero es bueno que el lector sepa que existen y que también son una forma de acceder a los elementos.

Transversatilidad Se ha explicado cómo funciona la anatomía CSS , falta explicar la transversatilidad , la cual es un conjunto de métodos definidos por jQuery para refinamiento de selectores, para explicar esto ocuparemos 2 funciones.  find : Nos permite realizar una consulta sobre un objeto jQuery.  filter : Nos permite realizar un filtrado, descartando elementos, sobre un objeto jQuery.

Imaginemos que tenemos una tabla que tiene como atributo id el valor idTabla , en el cual queremos acceder a todos sus elementos th. Una forma de hacerlo seria: $("#idTabla th").css('background', '#ddd');

Otra alternativa es usar el método find para buscar en un objeto de jQuery el cual me representa una sub-rama del DOM en idTabla. $("#idTabla").find('th').css('background', '#ddd');

Si existe una alternativa mejor a otra ¿cual crees que sea la mejor?, ¿por qué?.

• 10 - http://mundosica.github.io/tutorial_hispano_jQuery/

Esto no siempre es válido, cuando se utilizan otras librerías que usan la función $ , para esto se emplea el noconflict de jQuery.

Trabaja por grupos( Iteración implicita ).

Los métodos de jQuery que realizan consultas trabajan con iteración implícita, por ejemplo, la consulta. $('h2')

Nos devuelve el conjunto de los títulos nivel 2 (h2), ahora si por ejemplo quisiéramos cambiarle el color a un gris oscuro (#333), esto lo podríamos hacer de la siguiente manera. $.each($( 'h2' ), function () { $( this ).css( "color" , "#333" ); });

En este caso estamos ocupando el método each, en el cual para cada título en la selección se ejecuta una función la cual le cambia el color.

De momento no se preocupe en comprender el each. Lo importante es que comprenda que estamos iterando explícitamente para realizar una determinada acción sobre cada elemento en el conjunto seleccionado.

Existe una forma de hacer esto más "fácil" y es ocupando el comportamiento de iteración implícita de jQuery (o acción sobre el conjunto), en este caso la función css puede trabajar sobre toda una selección: $('h2').css('color', '#333');

Ejemplo - Comportamiento trabajo por grupo

Código HTML. Acción con $ Acción con jQuery

Código jQuery $h2 = $( 'h2' ); // Cambiando el color de todos los titulos desde un ciclo each $( 'a.each' ).click( function (event){ $.each($h2, function () { $( this ).css( "color" , "red" ); }); event.preventDefault(); }); // Cambiando el color de todos los titulos desde el comportamiento en grupo $( 'a.grupo' ).click( function (event){ $h2.css( "color" , "blue" ); event.preventDefault(); });

En general las funciones en jQuery son de la siguiente forma: //ejemplo 1 $( 'selector' ).funcionNombre(param1,param2,...); //ejemplo 2 $( 'selector' ).find( 'selector 2' ).funcionNombre(param1,param2,...);

Y trabajan sobre toda la selección ( conjunto ), es decir si la selección es todo un grupo la función se ejecutara sobre todos los elementos.

A esta funciones las llamaremos jQuery.fn.funcionNombre o bien su forma reducida $.fn.funcionNombre ya que pertenecen al espacio de nombre fn de jQuery que se hacen a un

http://mundosica.github.io/tutorial_hispano_jQuery/ - 11 -

prototipo de jQuery del es decir de una extensión de jQuery , jQuery.fn es también un alias de jQuery.prototype.

Diseñado para realizar consultas atraves del DOM.

Quizás la principal característica de jQuery es que está diseñado para realizar consultas a través del DOM , como ya se menciono antes, jQuery nos permite realizar consultas CSS , xPath y trasversales. $('h2 + p').css('color', '#946900'); $('h2 + p').css('font-style', 'italic');

Con esto indicamos que todo párrafo (p) inmediatamente seguido (+) de un titulo nivel 2 (h2), va a tomar el color de la letra a café y el estilo de la fuente será del tipo itálica.

No abuse de esta característica, la tarea de realizar una consulta a través del DOM puede llegar a ser algo bastante complejo ( dependiendo de la consulta ).

Una mejor opción es almacenar la consulta realizada en una variable: $parrafosBajoTitulo = $( 'h2 + p' ); $parrafosBajoTitulo.css( 'color' , '#946900' ); $parrafosBajoTitulo.css( 'font-style' , 'italic' );

Es buena práctica agregar el prefijo $ a las variables que almacenan el resultado de una consulta.

Es un sistema modular.  jQuery plugins  jQuery UI  jQuery mobile

Chaining.

Atienda al siguiente código: $('h2').css('color','red'); $('h2').text('Cambiando el contenido a todos los elementos h2');

Ahora comparelo con el siguiente código: $('h2') .css('color','red') .text('Cambiando el contenido a todos los elementos h2');

¿Cuál cree que sea mejor?, argumente su respuesta.

Enlaces externos.  Atributos personalizados

Manejo de eventos

Introducción a los eventos.

jQuery define una lista de eventos y funciones para la administración de los mismos, la sintaxis por defecto para un manejador de evento es de la siguiente forma $.fn.nombreEvento. $( 'Selector' ).nombreEvento( function (event){ //funcion que administra el evento. //this es el elemento que disparo el evento. }

Aquí es importante resaltar que this contendrá la instancia del elemento que disparo el evento, por ejemplos si a los enlaces (a) le agregamos el evento click, this contendrá la instancia del enlace especifico sobre del cual hayamos hecho click, analice el siguiente codigo.

http://mundosica.github.io/tutorial_hispano_jQuery/ - 13 -

Cabe mencionar que este evento puede soportar 2 manejadores, el primero es ejecutado cuando el cursor pase por encima del elemento y el segundo es ejecutado cuando el cursor se quita de dicho elemento, p.e.: $( "a" ).hover( function () { $( this ).css( 'color' , 'red' ); }, function () { $( this ).css( 'color' , 'blue' ); } );

En este caso estamos agregando 2 manejadores el resultado será que cuando pasemos el mouse por encima de un enlace el color de la fuente se cambiara a rojo y cuando quitemos el cursor el color será azul, veamos otro ejemplo:

Ejemplo - Hover

código HTML:

CSS #box{ width: 100px; height: 100px; background: orange; display: block; border-radius: 5px; }

código JS: $( "#box" ).hover( function (){ $( this ).animate({ 'width' : "300px" , "height" : "300px" }); }, function (){ $( this ).animate({ 'width' : "100px" , "height" : "100px" }); } );

Eventos del teclado

jQuery define un conjunto de eventos para el teclado los eventos que definen son los siguientes.

focusout Vincula a los inputs sobre el evento out Focus. Mayor información: http://api.jquery.com/focusout/

keypress El evento es disparado cuando una tecla es presionada. Mayor información: http://api.jquery.com/keypress/

keyup El evento es disparado cuando una tecla deja de estar presionada. Mayor información: http://api.jquery.com/keyup/

keydown El evento es disparado cuando se encuentra una tecla presionada. Mayor información: http://api.jquery.com/keydown/

Ejemplo de eventos de teclado: Como podemos ver las funciones keyup, keydown y keypress, veamos un simple ejemplo: $( '#target' ).keyup( function (event) {

• 14 - http://mundosica.github.io/tutorial_hispano_jQuery/

var msg = 'El evento keyup() fue llamado para la tecla ' + event.which; console.log(msg); }).keydown( function (event) { if (event.which == 13) { event.preventDefault(); } });

Ejemplo - Evento Teclado

código HTML:

código CSS: #ecenario { width: 100%; min-width: 500px; height: 180px; background: #6FD9FF; background-repeat: repeat-x; background-image: - moz-linear-gradient(top, #6FD9FF, #289FCB); background-image: - ms-linear-gradient(top, #6FD9FF, #289FCB); background-image: - webkit-gradient(linear, left top, left bottom, from(#6FD9FF), to(#289FCB)); background-image: - webkit-linear-gradient(top, #6FD9FF, #289FCB); background-image: - o-linear-gradient(top, #6FD9FF, #289FCB); background-image: linear-gradient(top, #6FD9FF, #289FCB); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#6FD9FF' , endColorstr= '#289FCB' ,GradientType=0 ); border-bottom: 25px solid #208A00; } #pollito { position: absolute; margin-left: 400px; margin-top: 70px; background: URL( 'pollito.png' ) no-repeat; width: 161px; height: 134px; }

Código jQuery:: $pollito = $( "#pollito" ); $ecenario = $( "#ecenario" ); pos_x = 400;

$( 'body' ).keydown( function (event) { switch (event.which) { case 39: $pollito.css( "background-position" , "0 0" ); if (pos_x < ($ecenario.width() - $pollito.width()) ) { pos_x += 10; $pollito.css( "margin-left" , pos_x + "px" ); } break ; case 37: $pollito.css( "background-position" , "-161px 0" ); if (pos_x>0) { pos_x - = 10; $pollito.css( "margin-left" , pos_x + "px" ); } break ; default : console.log( 'Tecla: ' + event.which); } });

Borrando eventos función off.

Podemos desvincular los eventos con la función off por ejemplo para eliminar el evento click en H podríamos hacer. $("h1").off('click');

• 16 - http://mundosica.github.io/tutorial_hispano_jQuery/

animate sobre un color. Desgraciadamente efectos como los colores no funcionan del todo bien, anteriormente había un plugin jquery-plugin-color que nos ayudaba a realizar integrar comportamiento pero ya no le han dado mantenimiento, sin embargo una forma de realizar determinada característica es por medio de jQuery-Ui, del cual para este caso requerimos el núcleo jQuery-Ui (core), el núcleo de los efectos (Effects Core) , y finalmente la opción Effect "Highlight", una vez esto obtenemos un archivo con el nombre jquery-ui-1.8.21.custom.min.js el cual contiene de forma compacta lo que requerimos, ahora lo siguiente es agregarla a la cabecera de nuestro archivo y hacer un tests:

Código HTML.

Código CSS. div.box{ width: 100%; height: 200px; background:#666; border:1px solid #999: }

Código jQuery. colors = ['#FFB30C', '#58EC00', '#0087EC', '#EEEEEE', '#FF5A00' ]; var i = 0; $box = $('div.box'); animate_loop = function() { $($box).animate({backgroundColor:colors[(i++)%colors.length] }, 900, function(){ animate_loop(); }); } animate_loop();

show

forma simple. $( 'selector' ).show();

forma con velocidad. $('slector').show('fast');

hide

forma simple. $( 'selector' ).hide();

forma con velocidad. $('selector').hide('fast');

Lecturas recomendadas.  Categoría efectos jQuery - http://api.jquery.com/category/effects/  Manipulación jQuery - http://api.jquery.com/category/manipulation/  Efectos jQuery-Ui - http://jqueryui.com/download

Ajax.

Ajax , acrónimo de Asynchronous JavaScript And XML ( JavaScript asíncrono y XML ), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar

http://mundosica.github.io/tutorial_hispano_jQuery/ - 17 -

cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

En concepto parte del hecho que desde javascript podemos realizar solicitudes( httpRequests ) y que por medio que javascript no espera el resultado de dicha solicitud para continuar su flujo.

Ajax y Jquery.

Personalmente siento que el concepto es algo confuso con jQuery , ya que propiamente no se debería llamar ajax si no HttpRequest ó simplemente Request (como funciona en mootools).

En adelante cuando se mencione ajax en la jerga de jQuery nos referimos a una funcion de jQuery que realiza un http request , espero que quede más claro con algunos ejemplos:

Ejemplo básico $.ajax({ url: 'ajax/test.html' , success: function (data) { $( '.result' ).html(data); alert( 'Load was performed.' ); } });

Quitando la opción asincrona. Observe el siguiente código. var datos = null ; $.ajax({ url: 'ajax/test.html' , success: function (data) { datos = data; } }); console.log(datos);

Datos será null, ya que la respuesta es asíncrona es decir console.log() no espera la finalización de $.ajax para ejecutarse, hacer async igual a false resulta una opción útil para esta logica. var datos = null ; $.ajax({ url: 'ajax/test.html' , //detiene la ejecución. async : false , success: function (data) { datos = data; } }); console.log(datos);

Otra opción para esperar que ajax se haya ejecutado para realizar determinada acción sería encaminar la función done como se muestra a continuación. var datos = null ; $.ajax({ url: 'ajax/test.html' , success: function (data) { datos = data; } }).done( function ( msg ) { console.log(datos);} );

Ejemplo Manejando el error. Si somos detallistas nos daremos cuenta que console.log(datos); no garantiza que los datos no sean nulos, pues la respuesta puede llegar a fallar y en este caso tal vez deseamos rellenar a datos con valores por defecto.

http://mundosica.github.io/tutorial_hispano_jQuery/ - 19 -

Ejemplo - getJson y la API de Flickr

Código HTML Cargar info de Flicker

Código CSS: #imagenes { color: #131A04; background: #CFEC } #imagenes img{ margin: 10px auto; }

Código jQuery var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

$('a.button').one('click', function(e){ $.getJSON( flickerAPI, { tags: "fitorec", tagmode: "any", format: "json" }).done(function( data ) { $.each( data.items, function( i, item ) { $( "" ).attr( "src", item.media.m ).appendTo( "#imagenes" ); if ( i === 3 ) { return false; } }); // Fin each }); // Fin done de getJSON e.preventDefault(); });

Ejemplo load Entre las funciones que ofrece jQuery para el control asincrono esta la función load dicha función se encarga de cargar algun contenido obtenido desde alguna url, para entender mejor esta función observe el siguiente esquema:

El esquema anterior muestra un documento Html el cual contiene un div identificado como elementoDinamico el cual va a cargar el contenido de http://url/file.html en el momento que hagan click sobre el botón identificado como algunBoton. Bien ahora veamos como quedaría este ejemplo: //relacionamos el evento click del botón #algunBoton $( '#algunBoton' ).click( function (event) { //En el div #elementoDinamico vamos a cargar el contenido de file.html // Notar que el parámetro que recibe puede ser una url absoluta o un ruta referenciada. $( '#elementoDinamico' ).load( 'file.html' ); // Detenemos los demás eventos(si no hacemos esto subiría el scroll) event.preventDefault(); });

• 20 - http://mundosica.github.io/tutorial_hispano_jQuery/

Lecturas recomendadas.  http://api.jquery.com/category/ajax/  Usando herramientas de calidad de código - por Anton Kovalyov ( inglés )  Principios para escribir JavaScript consistente e idiomático

Organización de código.

Organizando el código en archivos.

Como sabemos con jQuery podemos agregar múltiples funciones para manejar un evento, y estas funciones se van a ir ejecutando en formato de cola.

Ahora imagine que tiene 2 documentos, uno con el nombre titulos.js con el siguiente contenido: $(document).ready( function (){ //Cambiamos el color para el titulo nivel 2 $( 'h2' ).css( 'color' , 'green' ); //Agregamos un evento para h $( 'h1' ).hover( function (){ $( this ).css( 'color' , 'red' ); }, function (){ $( this ).css( 'color' , '#222' ); }); });

Por otra parte tenemos el archivo con el nombre enlaces.js con el siguiente contenido: $(document).ready( function (){ //Obliga abrir los enlaces en una pestaña nueva $( 'a' ).attr( 'target' , 'blank' ); });

Si mandamos a llamar ambos documentos de la manera siguiente:

¿Qué crees que pase?.

Es una práctica bastante común separar la lógica en archivos distintos de esta manera tenemos más ordenado nuestro código.

Ejemplo - tabla de contenidos Observe la organización del siguiente código:

JS tablaContenido = ( function (div_contenedor, div_destino, tag_titulos) { /* variables a utilizar */ var $content = $(div_contenedor), /* contenedor principal */ $destino = $content.find(div_destino), /* div q contendra la tabla*/ $tagTitulos = $content.find(tag_titulos), /Titulos a observar/ modo = null , /* nos indica el tipo del archivo a genear la tabla*/ pie_links = '' , /* forma del pie de links de cada sección */ titulo = null , /* titulo de la tabla de contenidos / / funcion debug util para depurar */ debug = function (){ console.log($content); console.log($destino); console.log($tagTitulos); console.log(document.title); console.log(modo); }, /* devuelve un string que contiene un link apartir de la url y del content */ link = function (url,content){ return '' +content+ '' ; },