Présentation
Kiwi Party

  • Date : 16 Avril 2010
  • Lieu : Epitech Strasbourg
  • Organisateur : Alsacreations
  • Auteur : Telesphore ESSIQUE
  • Licence : Creative Commons BY-NC-SA

Historique

  • XmlHttpRequest
  • Web 2.0
  • Framework javascript
  • jQuery 1.0 : 26/08/2006
  • jQuery 1.4.2 : 19/02/2010

Principes

  • Comptatible tous navigateurs
  • Exécution après le chargement du DOM
  • En natif :
    • Sélecteur CSS
    • Manipulation du DOM
    • Gestion des évenements
    • Ajax
    • Chainage des fonctions
  • Exemple : Transformer le titre en majuscule et en blanc sur fond rouge

Sélecteurs

Utilisation des sélecteurs CSS 1-3

  • Elément : $("h2")
  • Classe : $(".title")
  • Identifiant : $("#unique")
  • Attribut : $("img[src$=.png]")
  • Hiérarchie : $("#main p .myclass")
  • Prédéfini : $(":selected") , $(":visible") , $(":first") ...
  • Personnalisé

Manipulation

  • Afficher/masquer élément : .show() , .hide()
  • Insérer un élément : .append()
  • Définir un attribut : .attr()
  • Récupérer le contenu HTML : .html()
  • Exemple : <div id="j3"><p>Lorem Elsass ipsum leverwurscht non ftomi!</p></div>
    $("#j3").append( "<p>" + $("#j3 p:first").html() + "</p>" ).find("p:last").css('color', colors.random());

    Lorem Elsass ipsum leverwurscht non ftomi!

CSS

  • Propriété : .css(propriété, valeur);
  • Classe : .addClass(className); removeClass(className);
  • Basculement : .toggleClass(className);
  • Exemple : $("#j5 p").toggleClass('highlight');

    Lorem Elsass ipsum leverwurscht non ftomi!

Evénements

  • Enregistrement sur un événement : .bind()
  • Souris : .click() , .onmouseover() , .onmouseout()
  • Clavier : .keydown() , .keyup() , .keypress()
  • Changement d'état : .change() , .focus() , .blur() , .hover()
  • En temps réel : .live()
    $("#j6 input").click(function(){ $(this).after($(this).clone(); });
    $("#j7 input").live('click', function(){ $(this).after($(this).clone(); });

Ajax

En natif : Requêtes GET et POST, support de JSON
Chargement d'un contenu html dans un élément : $("#j9").load('html/ajax.html');

jQuery UI

Suite de plugins qui ajoute des widgets, des animations, des effets, une gestion de thèmes, ...

$('#datepicker').datepicker();
Date :

Accordéon et éléments déplaçables :

Section 1

Lorem Elsass ipsum Oberschaeffolsheim hopla habitant salu so tristique hopla Hans suspendisse Wurschtsalad flammekueche Racing. hop semper barapli Miss Dahlias lotto-owe munster Carola schneck turpis ullamcorper ac jetz gehts los adipiscing turpis, condimentum ornare Salut bisamme schpeck vielmols, hoplageiss risus, porta amet und ac eleifend knepfle amet, leo hopla tellus Pfourtz ! dignissim elementum tchao bissame elit Kabinetpapier leo merci vielmols Chulien mamsell consectetur libero, rhoncus sed sit quam. Chulia Roberstau lacus rossbolla Spätzle libero, DNA, messti de Bischheim amet kougelhopf id Salu bissame sagittis Christkindelsmärik dolor id, libero. non s'guelt mänele Gal. gewurztraminer sed et picon bière tellus nullam geïz ftomi! météor sit rucksack pellentesque quam, auctor, Mauris vulputate varius knack bredele Morbi kuglopf schnaps morbi réchime wurscht.

Section 2

senectus ante placerat ornare sit ch'ai yeuh. Yo dû. aliquam Richard Schirmeck wie eget purus Verdammi nüdle geht's in

Section 3

bissame kartoffelsalad Oberschaeffolsheim Heineken chambon dui Huguette gravida mollis Coopé de Truchtersheim leverwurscht baeckeoffe blottkopf, Strasbourg gal Pellentesque non commodo hopla Gal !

  • Picon bière
  • Melfor
  • Carola
  • Flammekueche
  • Wurscht

Plugins