[PPT] jQuery débutant cours sur les concepts et pratiques pour reviser et s'entrainer | Cours jquery

(1)

jQuery (Débutant)

(2)

Qu’est-ce que jQuery ?

• jQuery est un framework JavaScript parmis tant

d’autres (Mootools, Prototype, YUI etc...)

• _{Son objectif: Changer les méthodes avec lesquelles}

vous écrivez du javascript

(3)

Ses avantages

• _{Cross browser (IE 6.0+, FF 2.0+, Safari 2.0+, Opera}

9.0+)

• Support des sélecteurs CSS 3 (Draft)

• _{Léger ~24KB en version minified (jquery.com)}

• _{Documentation complète et communautés actives}

(4)

Comment commencer ?

• _{Simplement en ajoutant dans le header de votre code}

HTML l’import du fichier js

• _{Exécuter votre code dans la méthode Document.Ready}

<a href="http://jquery.com/">jQuery</a> </body>

(5)

Utilisation du selecteur

• Sélectionner avec $ ou jQuery -> jQuery.noConflict(); • _{Sélectionner par ID -> $(“#monId”)}

• Sélectionner par type -> $(“div”)

• _{Sélectionner par CSS -> $(“.maClass + div, p >}

span”)

(6)

Manipuler le DOM - Partie

#1

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

(7)

Manipuler le DOM - Partie

#2

•

$('div.section').next();

• $('div.section').prev(); • _{$('div.section').prev('a');} • _{$('div.section').parent();} • $('div.section').parents();

(8)

Chaînage

• _{La plupart des méthodes jQuery retournent un objet}

jQuery qui représente souvent la même collection. Ce qui signifie que vous pouvez enchaîner les méthodes entre elles

• _Exemple:

(9)

Les événements

• Pas de javascript dans les balises HTML !

• _{Binder des actions à des événements simplement} •var message = 'Spoon!';_{$('#foo').bind('click', function() {}_Exemple:

alert(message); });

(10)

Les performances

• _{Les performances dépendent de votre code et non}

du framework

• _{jQuery parse le DOM à chaque utilisation de $/Find} • _{Utilisation des ID (plus rapide)}

$(“input”) -> lent

(11)

AJAX

• _{jQuery possède un support excellent pour AJAX}

• _{Il implémente des méthodes génériques Cross-Browser}

pour une mise en place facile d’un fonctionnement AJAX

• _{Voici quelques méthodes à utiliser pour faire de l’AJAX:}

• _{$.get(url, params, callback)} • _{$.post(url, params, callback)} • _{$.getJSON(url, params, callback)} • _{$.getScript(url, callback)}

(12)

Extensible (Plugins)

• _{jQuery est extensible grave aux plugins qui peuvent}

ajouter des nouvelles méthodes à l’objet jQuery

• UI (Contrôles utilisateurs plus ‘user friendly’)

• _{Interface (Carousel, Drag and Drop, Thickbox,}

jQuery UI)

• _{Formulaire (Manipulation plus aisé, gestion des}

(13)

Aller plus loin

• _{www.jQuery.com (Officiel, EN)}

• www.learningjQuery.com (EN)

• _{docs.jquery.com (Documentation, EN)} • _{plugins.jquery.com (Plugins, EN)}