Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

jQuery

Escriba menos, haga más, libreria de Javascript.
by

Arturo Gaona Vara

on 7 September 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of jQuery

Escriba menos, haga más. jQuery Qué es jQuery? Es una biblioteca o framework de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el arbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. Qué es DOM? Document Object Model es un modelo en objetos para la representación de documentos o también modelo de objetos del documento. A través del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML. Nuestros primeros pasos... Requisitos Conocer HTML y CSS
Saber Javascript (nivel Junior)
Descargar jQuery.js
Muchas ganas de empezar!!! Hacer click para descargar jQuery.js http://jquery.com/ En cada página que lo requiera agregar: La librería jQuery en resumen nos aporta las siguientes ventajas:

Nos ahorra muchas líneas de código.
Nos hace transparente el soporte de nuestra aplicación para los navegadores principales.
Nos provee de un mecanismo para la captura de eventos.
Provee un conjunto de funciones para animar el contenido de la página en forma muy sencilla.
Integra funcionalidades para trabajar con AJAX. Pagina de prueba
http://kgarthur.16mb.com/JQUERY/ Función $. La función principal de esta librería se llama $.
A la función $ le podemos pasar distintos valores como por ejemplo el objeto document del DOM o el id del un control button. x=$(document).ready Esta función nos devuelve un objeto de tipo jQuery.

El primer método que nos interesa de esta clase es el ready:

var x;
x=$(document);
x.ready(iniciarEventos);

El método ready tiene como parámetro un nombre de función. Esta función se ejecutará cuando todos los elementos de la página estén cargados. Ejemplo: var x;
x=$(document);
x.ready(inicializarEventos);

function inicializarEventos()
{
var x;
x=$("#boton");
x.click(presionBoton)
}

function presionBoton()
{
alert("Se presionó el botón");
} Establecemos

<h2 id="boton">Parrafo 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat </p> La sintaxis para seleccionar un elemento particular de la página mediante la propiedad id es:

$("#nombre")

La sintaxis para tener la referencia de todos los elementos de cierto tipo (a, p, h1, etc.):

$("nombre")

Es decir es casi igual que obtener la referencia de un elemento particular mediante el id, solo difiere en que no le antecedemos el caracter $. x.css("background-color","eeeeee");

x.click(presionFila);

x.dbclick(presionFila);

var x;
x=$("ul");
x.append("<li>otro item al final</li>");
x.prepend("<li>otro item al principio</li>"); var x;
x=$("ul");
x.empty();

var x=$("#descripcion");
x.hide("slow");

var x=$("#descripcion");
x.show("fast"); jQueryUI Es una biblioteca de componentes para el framework jQuery que le añaden un conjunto de plug-ins, widgets y efectos visuales para la creación de aplicaciones web. <script>
$(function() {
$( "#nombre" ).accordion();
});
</script> Acordion <script>
$(function() {
$( "#nombre" ).tabs();
});
</script> Tabs <script>
$(function() {
$( "#nombre" ).dialog();
});
</script> Dialog Plugins Variados!!! Gracias por su atención!!! Enciso Samaniego
Gaona Vara
Sitush Pérez
Full transcript