Vad är jQuery?

Ett open source JavaScript bibliotek som förenklar interaktionen mellan HTML och JavaScript.

jQuery är byggt runt CSS selektorer (CSS 1, 2 och 3) och sedan en tid använder man motorn Sizzler för att hantera de tunga lyften.

jQuery fyllde tre år den 14:e januari, version 1.3 släpptes samma dag.

Lätt att använda

• Helt unobtrusive
• Använder CSS för att applicera funktionalitet
• Lätt att separera beteende
• Snabb, “kärnfull” syntax

$('div').addClass('special');

Varför jQuery?

• Väldokumenterat
• Vältestat (1500+ tester)
• Gratis, öppen källkod
  • GPL eller MIT (dubbellicensierad)
• Lättviktigt
  • 19kB (Minifierad och Gzippad)
• Massor av plugins
• Fri hosting hos Google (vafritt)
• Fantastisk community
• Allt fungerar i IE 6+, FF 2+, Safari 3+, Opera 9+ samt Chrome.

Vem använder jQuery?

• Projekt
  • Wordpress, Drupal, CakePHP, Textpattern, Mozilla
• Företag
  • Google, IBM, Amazon, Digg, Netflix, Dell, HP, Bank of America, Intel, NBC, CBS, BBC, Reuters, Newsweek, Boston Globe, Fler..
• Många fler…

Prestanda

Den senaste versionen (1.3.2) släpptes den 20:e februari och den innehåller ett flertal prestandaförbättringar:

Tillgänglighet

• Tangentbord
• Skärmläsare
• Bidrag från Mozilla Foundation för att implementera WAI-ARIA

Kod

Plugins

jQuery är tänkt att byggas ut med hjälp av plugins.

Att lägga på nya metoder:

jQuery('div').hideRemove();

Trivialt att implementera:

1
2
3
4
5

jQuery.fn.hideRemove = function(speed) {
  return this.hide(speed, function() {
    jQuery(this).remove();
  });
};

Exempel på plugins:

• Forms: bättre hantering av formulär
• Dimensions: mängder av mått på webbläsarfönstret
• UI: drag och släpp, widgets, teman
• jQuery Google Charts: Wrapper runt Google Charts API:et

Mer information http://plugins.jquery.com/

Konflikter

Till skillnad från många andra JavaScript ramverk så är utvecklarna av jQuery måna om att inte skräpa ner i det globala namnutrymmet. Man behöver inte ens exponera $-metoden om man inte vill.

1
2
3
4
5

jQuery.noConflict();
    
jQuery(document).ready(function(){
  // Din egen kod
});

Man kan dock fortfarande använda sig av $ om man skickar in jQuery i en anonym metod.

(function($) { /* Kod som använder sig av $ */ })(jQuery)

Mer information http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Exempel

jQuery() funktionen

1
2
3
4
5

jQuery('div#intro h2');
jQuery('div.section > p');
jQuery('input:radio');
    
$('div#intro h2');

jQuery kollektioner

$('div.section'); // returnerar en kollektion

Man kan göra metodanrop till kollektioner

1
2
3
4
5

$('div.section').size(); // Antal element som matchades av selektorn
    
$('div.section').each(function(div) {
  // Manipulation av div elementet
});

Manipulera hela kollektioner

De flesta jQuery metoderna opererar på alla matchade element i en kollektion.

1
2
3
4

$('div.section').addClass('highlighted');
$('img.photo').attr('src', '/default.png');
$('a.foo').html('<em>Click me now!</em>');
$('p:odd').css('background-color', '#ccc');

Hämta värden

Några metoder returnerar värdet på det först matchade elementet.

1
2
3

var height = $('div#intro').height();
var src = $('img.photo').attr('src');
var lastP = $('p:last').html();

Traversera DOM:en

jQuery tillhandahåller förbättrade metoder för att traversera DOM:en.

1
2
3
4
5

$('div.section').next();
$('div.section').prev();
$('div.section').prev('a');
$('div.section').parent();
$('div.section').parents();

Hantera events

jQuery tillhandahåller metoder för att tilldela event handlers.

1
2
3
4

$('a').click(function(ev) {
  $(this).css({backgroundColor:'orange'});
  ev.preventDefault();
});

Unobtrusive JavaScript

1
2
3
4
5

$(document).ready(function() {
  alert('The DOM is ready!');
});
    
$(function() { alert('This is a shortcut') });

Mer information http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

Kedja metodanrop

Alla jQuery metoder returnerar ett nytt jQuery objekt, detta gör att man kan kedja ihop metoderna efter varandra.

$('h1').fadeOut().addClass('highlight').fadeIn();

Ajax

jQuery har bra stöd för Ajax och Ajax-liknande funktionalitet som JSONP.

$('div#intro').load('/some/file.html');

Några mer avancerade metoder:

1
2
3
4

$.get(url, params, callback);
$.post(url, params, callback);
$.getJSON(url, params, callback);
$.getScript(url, callback);

Övrigt

Microsoft och Nokia <3 jQuery

Microsoft har beslutat att skeppa stöd för jQuery i kommande versioner av Visual Studio. Detta inkluderar officiellt stöd för jQuery Intellisense.

Nokia har meddelat att de kommer att använda jQuery i sin WebKit-baserade Web Run-Time

Mer information http://blog.jquery.com/2008/09/28/jquery-microsoft-nokia/

Google AJAX Libraries

Google tillhandahåller ett CDN för ett flertal olika ramverk, jQuery är ett av dem.

Mer information http://code.google.com/apis/ajaxlibs/

Dokumentation och presentationer

API Dokumentationen för jQuery hittar man på http://api.jquery.com/ där man även kan installera en AIR-version.

John Resig’s presentation Learning jQuery @ MIT