Mini charla jquery

jQuery: facilitando la
construcción de sitios 2.0

Ing. Alejandro Lizardo Celiz

Carlitos Tévez

Very emotional !

¿Que es jQuery?
Es un framework javascript

¿Que es jQuery?
Es un framework javascript

Existen otros como :
• Prototype
• YUI
• Dojo
• mooTools

¿Por qué jQuery?

- La curva de aprendizaje es mínima.
- La cantidad de plugins es enorme.
- En general se lleva bien con cualquier otra librería
- Tiene una comunidad muy accesible

Crecimiento

Según BuiltWith, una empresa dedicada a la generación de estadísticas relacionadas con
tecnologías web, jQuerry está siendo usado actualmente por el 31% de los top 10000
websites, y por casi el 40% de todos los sitios que examinan

¿Que necesito saber
para usar jQuery?

- Conocimiento básico de javascript

- Noción de Document Object Model (DOM)

Javascript vs jQuery
links = document. getElementByTagName(‘a’);

for (i=0; i < links.length; i++){
links[i].style.display = ‘none’
}

Javascript vs jQuery
links = document. getElementByTagName(‘a’);

for (i=0; i < links.length; i++){
links[i].style.display = ‘none’
}

$(‘a’).hide()

¿Cómo usar jQuery?
<script type=”text/javascript” src=”jquery.js”> </script>
<script type=”text/javascript” src=”miCodigo.js”> </script>

$(document).ready(function(){
código...
})

Filosofía de jQuery

1. Encontrar algo en el HTML

2. Hacer algo con él

Selectores
1. $(‘#mi_ID’) $(‘.mi_Clase’) $(‘div’)
2. $(‘li:first’)

3. $(‘a[target=_blank’)
4. $(‘div:visible’)
5. $(‘a:eq(0)’)
6. $(‘div’, ‘#mi_ID’, ‘.mi_Clase’)

Métodos
$('div').addClass('color').fadeIn();

Insertando elementos
append(), appendTo(), before(), after()

Atributos
css(), attr(), html(), val(), addClass()

Eventos
bind(), trigger(), unbind(), live(), click()

Efectos
show(), fadeOut(), toggle(), animate()

Traversing
find(), is(), prevAll(), next(), hasClass()

Ajax

Atributos
Get Set

.attr(‘id’) .attr(‘id’, ‘pie’)
.html() .html(‘<p>hola </p>’)
.val() .val(‘nuevo valor’)
.css(‘top’) .css(‘top’, ‘50px’)
. hasClass(‘link’) .addClass(‘oculto’)

Eventos
$(‘div[id=alerta]).click(function(){
$(this).hide();
});

$(‘p’).hover(function(){
$(this).css(‘color’, ‘red’)
});

Efectos y Animaciones
$("button").click(function () {
$("p").slideToggle("slow");
});

$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});

$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});

Traversing
$("#miCelda");

<html>
<body>
<table><tr>
<td></td>
<td></td>
<td id="miCelda">
<td></td>
</tr></table>
</body>
</html>

Traversing
$("#miCelda").prevAll();

<html>
<body>
<table><tr>
<td></td>
<td></td>
<td id="miCelda">
<td></td>
</tr></table>
</body>
</html>

Traversing
$("#miCelda").prevAll().andSelf()

<html>
<body>
<table><tr>
<td></td>
<td></td>
<td id="miCelda">
<td></td>
</tr></table>
</body>
</html>

Traversing
$("table");

<html>
<body>
<table>...</table>
<div>
<p>Hola</p>
<span>Chau</span>
</div>
</body>
</html>

Traversing
$("table").next()

<html>
<body>
<table>...</table>
<div>
<p>Hola</p>
<span>Chau</span>
</div>
</body>
</html>

Traversing
$("table").next().find(“p”)

<html>
<body>
<table>...</table>
<div>
<p>Hola</p>
<span>Chau</span>
</div>
</body>
</html>

Ajax
$.ajax({
type: 'POST/GET',
url: url,
data: data,
success: success
dataType: dataType
});

$.get(...)

$.post(...)

Ajax
$.get('ajax/prueba.html', function(data) {
$('#contenido').html(data);
});

<html>
<body>
<div id=”contenido”>
....
</div>
</body>
</html>

Ajax
$.get('ajax/prueba.html', function(data) {
data = extraer_contenido();
$('#contenido').html(data);
});

<html>
<body>
<div id=”contenido”>
<p>Esto es ajax !!!</p>
</div>
</body>
</html>

Plugins
$.fn.miPlugin = function(){
return this.each(function(){
$(this).html("Esto es un plugin!!!");
});
});

<html>
<body>
<div></div>
<div></div>
</body>
</html>

Plugins
$.fn.miPlugin = function(){
return this.each(function(){
$(this).html("Esto es un plugin!!!");
});
});

$("div").miPlugin();

<html>
<body>
<div>Esto es un plugin!!!</div>
<div>Esto es un plugin!!!</div>
</body>
</html>

Muchas gracias !!!

@Rlizardoceliz

Mini charla jquery

More Related Content

Viewers also liked (9)

Similar to Mini charla jquery (13)

Mini charla jquery