Javascript Framework : jQuery

J'ai décidé d'un peu laisser de côté mon blog avec commentaire. Je vais encore juste le mettre en ligne un de ces jours. J'avais envie de quelque chose d'autre. Quelque chose de nouveau. Quelque chose de révolutionnaire. Là, j'exagère un peu. Comme le titre le dit, je vais m'attaquer au jQuery, un Framework Javascript.

L'installation

L'installation? Qui parle d'installer quelque chose? C'est simple comme bonjour.Ce n'est qu'un petit lien vers le script.

Get started!

Je commence tout doux avec le jQuery. Je vais commencer par manipuler le contenue. C'est-à-dire modifier la couleur du texte, mettre en gras, mettre en italique, voir le code (à la place du texte), regrouper des liens et des titres. A première vue cela ne sert à rien dans la vie de tout les jours.

Dans le code HTML il y a des buttons qui vont manipuler le texte. Quand on clique sur le bouton (grâce au onclick) il va appeler la fonction mettreTitres ou enleverLiens. Ces fonctions se trouvent dans le fichier Javascript.
On peut voir quoi dans ce code? Les fonctions! Oui mais elle vont faire quoi? Prenons la fonction enleverLiens. Le nom est très clair. Mais pourquoi elle va enlever les liens? Et quels lien?
Dans le 'span' qui a comme 'id' contenu il va 'remover' ('enlever') les a. Ah oui j'oubliais. Ici, le code HTML avec le texte. :D

 Lorem ipsum dolor sit amet, 
 consectetur adipiscing elit.Etiam facilisis 
 ultrices dolor, eu fermentum
  eros aliquet ac. Aenean varius ultrices nisi
  vel aliquet. Nam eu viverra sem. Fusce facilisis
  eros ac elit scelerisque molestie. Morbi
  lacus orci, interdum ac faucibus hendrerit,
  facilisis vel nunc. Sed in
  mauris lorem. 
 Integer facilisis, augue et suscipit molestie,
  lectus lectus pellentesque mi, 
 at condimentum nulla nibh ut turpis. 
 Cum sociis natoque penatibus et magnis dis 
 parturient montes, nascetur ridiculus mus. Etiam quis nisl 
 metus.Phasellusullamcorper posuere augue quis placerat. 
 Duis sed quamodio. Donec aliquam
  metus a ligula lacinia a tempor leo imperdiet.
  Cras augue purus, lobortis eu scelerisque sed,
  venenatis ut turpis. Donec quis
  magna sapien. Ut ut diam arcu. Suspendisse nec
  risus id lacus venenatis rhoncus. In vitae 
 justo tellus, vitae lacinia nunc
 . Aliquam erat volutpat.

Autre fonction! Vider button : avec .empty(). Fastoche! mettreTitres : il va 'wrapper'. Ici le jQuery va mettre la class titre1 en h1. Avec le wrap on peut mettre du texte en gras, italique et en couleur.

Explication en image

Example

Autre fonctions possible

• replaceWith() : replacerAvec


• replaceAll() : Replacer tout


• prepend() : Permet d'ajouter du contenu à celui existant AVANT


• append() : Permet d'ajouter du contenu à celui existant APRES


• insertAfter() : Permet d'ajouter du contenu à celui existant EN DEHORS des balises

Manipuler le décor

Après avoir manipuler le texte on va manipuler le décor. Hehe! Commençons par changer le 'background-color'. Oooh! Waaaaw!

Explication d'abord! On devras changer la 'class' de son texte. Donc il faut mettre 2 'class' dans le css

#contenu p
{
 background-color: #ff8;
}

#contenu p.rouge
{
 background-color: #f00;
 color: #fff;
}

On voit ici que normalement l'arrière plans du texte est jaune. Le but est que quand on clique sur le bouton, l'arrière-plan devient rouge et la couleur du texte blanc. Comme pour manipuler le texte ici aussi il faudrait appeler une fonction.

$(function(){

interchangerClasseParagraphe();

});

function interchangerClasseParagraphe() {
 $('p:first')
   .toggleClass('rouge')
   .hasClass('rouge')
     ? $('p:first span').text('Ce paragraphe est rouge. Ici la valeur est TRUE')
     : $('p:first span').text("Ce paragraphe n'est pas rouge. Ici la valeur est FALSE");
}

Que veut dire hasClass : hasClass renvoie la valeur True ou False. C'est-à-dire vrai ou faux. Si c'est vrai le texte est pas rouge. Si c'est faux le texte n'est pas rouge. Quand je cliquerai sur le bouton il renverra une fois True et une fois Faux, puis True,...
Ca c'est 1 truc. toggleClass jongle entre une ou plusieurs class. Ici entre deux.
Donc on ne doit pas rien que changer l'arrière-plan mais la grandeur du texte, le font,...

function interchangerClasseSurligner(){
 $('a').toggleClass('surligner');
}

function interchangerClasseRouge(){
 $('a').toggleClass('rouge');
}

}

Explication en image

Example

Voilà j'arrête pour aujourd'hui. Assez expérimenter! Demain on continue? On se retrouve ici? Ok ça me va! :D

A demain!