Download - jQuery, simplificando el javascript
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