jQuerySimplificando el JavaScript

John Resig

¿Qué es jQuery?

Una librería de JavaScript

¿Qué se puede hacer con jQuery?

● Buscar elementos en el HTML● Manipular la página● Modificar datos● Modificar estilos● Realizar efectos visuales● Definir acciones a eventos gestuales● Realizar peticiones AJAX● ...

¿Qué nos aporta jQuery?

● Hacer lo mismo con mucho menos código● Más formas de buscar elementos HTML● Gestionar los eventos de una forma más

limpia● No acabar con dolor de cabeza al

implementar llamadas AJAX● Compatibilidad con todos los navegadores● Plugins, plugins y más plugins

¿Cómo se usa jQuery?

● Una sola función "estática"● Un sólo tipo de objeto● Mucha funcionalidad en el objeto

Selectors

document.getElementById('myId');

$('#myId');

JavaScript

jQuery

Selectors

document.getElementsByClassName('myClass');

$('.myClass');

JavaScript

jQuery

Selectors

var elems = document.getElementsByClassName('myClass');for (var iter = 0; iter < elems.length; iter++) {

elems[iter].doSomething();}

$('.myClass').doSomething();

JavaScript

jQuery

Selectorsvar elems = document.getElementsByClassName('myClass');for (var iter = 0; iter < elems.length; iter++) {

if (elems[iter].tagName == 'div') {...

}}

$('div.myClass');

JavaScript

jQuery

Selectors

var elem = document.getElementById('myId');elem.getElementsByClassName('myClass');

$('#myDiv .myClass');

JavaScript

jQuery

Selectors

$('input[name="myInputName"]');

$('#myList li:eq(2)');

$('#myList li:eq(2) a.myLink');

$('input[type="checkbox"]:checked');

$('#mySelect option:selected');

jQuery

Manipulation

var myDiv = document.getElementById('myDiv');var a = document.createElement('a');a.text = 'Go';a.href = '/myurl';myDiv.appendChild(a);

var a = $('<a href="/myurl">Go</a>');$('#myDiv').append(a);

JavaScript

jQuery

Manipulation

$('#myElement').attr('name', 'myName');

$('#myElement').removeAttr('name');

$('#myElement').addClass('myClass');

$('#myElement').removeClass('myClass');

$('#myInput').val('myValue');

jQuery

Events

$('#myButton').click(function() {doSomething();

});

$('#myButton').click();

jQuery

Events

$('#myButton').click(myFunction);

function myFunction() {doSomething();

}

jQuery

Events

$('#myButton').click(myFunction);$('#myButton').click(myFunction2);$('#myButton').unbind('click', myFunction);

function myFunction() {doSomething();

}

function myFunction2() {doAnotherThing();

}

jQuery

Effects

$('#myDiv').hide();$('#myDiv').show();

$('#myDiv').hide('slow');$('#myDiv').show('slow');

$('#myDiv').fadeOut();$('#myDiv').fadeIn();

jQuery

AJAX

var xmlHttpReq = new XMLHttpRequest();xmlHttpReq.open('GET', '/myurl', true);xmlHttpReq.onreadystatechange = function() { if (xmlHttpReq.readyState == 4) { doSomething(); }}xmlHttpReq.send();

JavaScript

AJAX

$.ajax('/myurl', {type: 'GET',success: function() {

doSomething();}

});

jQuery

jQuerySimplificando el JavaScript