JavaScript/jQuery

jQuery est un framework JavaScript libre lancé en janvier 2006 par John Resig.

**jQuery**
Leçon : JavaScript

Chapitre n^o 9
Chap. préc. :	Introduction à Prototype
Chap. suiv. :	Sommaire

En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : jQuery
JavaScript/jQuery », n'a pu être restituée correctement ci-dessus.

Installation modifier

Il suffit de télécharger le fichier du site officiel^[1], puis de le stocker dans un endroit où les scripts l'utilisant feront mention. Par exemple pour un .html ou .js dans le même répertoire :

<script type="text/javascript" src="jQuery.js"></script>

Les grandes lignes du langage jQuery modifier

Dans ce framework (comme dans Prototype), la fonction $() permet de sélectionner (remplace les getElementBy). Elle est synonyme de jQuery().

Par extension le jQuery.UI ajoute des plugins, c'est-à-dire des fonctions pré-programmées stockées sur pages JS : jQuery.NomDeLaFonction.js. Fonctions graphiques, Drag & Drop, multi-forms etc.

Déclarer une fonction dans celle-ci ($(function(){.....});) le fait après le chargement de la page (onload), ce qui assure sa bonne exécution dès l’affichage complet.

Méthodes utiles modifier

Manipulation de tableaux modifier

Pour transformer un tableau en chaine de caractères :

.join()
.toString()

Pour trier un tableau :

.sort()

Manipulation de chaînes de caractères modifier

Sur l'espace...

style=//

present{background-color:#456548;}

Penser à :

 $(document).ready(function(){
   $(selector).text("voici le texte qui sera placé sur le compartiment ''selector'' ou ''element'' etc");
 });

à chaque fois qu’il y à une fonction mise en place

Propriétés et méthodes modifier

noConflict() : permet d'annuler l'alias $, pour n'utiliser que jQuery.
browser
fn.jQuery

De nombreux sélecteurs simples, d'attributs, de classe ou d'identifiants sont disponibles sur jQuery.

 $(selector,context)
 $(element)
 $(elements)
 $(jQueryObject)
 $(html)

afin de manipuler le DOM il existe sur jQuery des méthodes.

each(callback  length ...

Gérer les Attributs et Propriétés Gérer les Classes CSS, les styles, les dimensions, positions et contenu.

La gestion des évènements (events)
la requête serveur avec $.Ajax(options)

$("lkj").link ("style","origine")  function(){alert("ceci est ma liste"};

De nombreux effets visuels sont disponibles.

Syntaxe modifier

jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes communes de JavaScript.

Les méthodes employés modifier

Obj(tableau d'éléments,Objet,Objet jQuery)

un tableau sera sérialisé en nom/valeur //un Obj par clé \ valeur .
Effets visuels // animate // toogle etc
sélecteurs CSS // $(sélecteur).animate (ObjStyle,[duration],[easing],[callback]);

jQuery(#ID).merge

jQuery().merge (Array1 ,Array2) function (){ });

jQuery(#ID).each

jQuery().each (Array , function (){(index , value )});

jQuery(#ID).grep()

jQuery().grep() (Array , function (){( value, index )});

jQuery(#ID).map()

jQuery().map (Array , function (){(value, index )});

jQuery(#ID).trim

jQuery().trim (string);

<div style="width:740px;height:632px;border:2px outset #191956;overflow:hidden;">

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">(ID : eq(2)") 
<span style="color:#ee66bb;"> sélect la 3eme cellule d'un d'un tableau</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">("tr : even").css 
<span style="color:#ee66bb;"> sélect les élements pairs</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">(a : gt(1)) 
<span style="color:#ee66bb;"> sélect. tous les link's début 3eme</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">(tr : odd).css 
<span style="color:#ee66bb;"> sélect.Elements impairs (index numérique à partir de 0)</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">$('#titre');$(#titre).html('texte') 
<span style="color:#ee66bb;"> ajout une chaine de caractère à titre</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">$('#titre');$(#titre).html('texte') 
<span style="color:#ee66bb;"> ajout une chaine de caractère à titre</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">$.extend(obj1,obj2);...var obj = $.extend({obj1,obj2,obj3});
<span style="color:#ee66bb;"> ajout </span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">//<! [CDATA[var expréss= new regexp("[a-zA-Zèéàçùî\-]+",""gi");<br />
var tabl = test.match(expréss);<br />
var aff= "nombre de noms...etc" + tabl.length + "\n";<br />
for (var i=0;i < tabl.length ;i++){aff = aff + "[" + tabl[i] + "]\n";}<br />//]]>
<form name ='form' action = ""><br />
input type = 'text' name = exempl..<br />onclick = ectraire (form) { var test = document.form.exemple.value;
<span style="color:#ee66bb;"> utiliser lastIndexOf() pour vous déplacer dans le occurrence texte vers le mot suivant (car IndexOf c’est le premier caractère</span></dd>
 jQuery chaine de caractères
 jQuery list = "liste"<br />
 jQuery surfloading = [];<br />

</div>

Formulaires modifier

Pour savoir si une case est cochée : if ($('input#my_checkbox').is(':checked')) {…
Pour créer un évènement sur libération d'un champ : $('#my_field').focusout(function() {…

AJAX modifier

La méthode jQuery.ajax() permet de lancer des requêtes asynchrones^[2] en XMLHttpRequest (XHR).

Pour appliquer un traitement dépendant du résultat de ces requêtes, il suffit de les faire suivre par les méthodes existantes qui correspondent à chaque type de résultat.

Par exemple, le code suivant récupère un fichier et affiche son contenu, ou une erreur si le fichier est inaccessible :

    $.ajax({
        url: "http://www.example.com"

    }).done(function(data) {
        alert(data);

    }).fail(function() {
        alert('The file is missing!');
    });

Le style avec callbacks "error: / success:" sous "url:" est moins bien géré au niveau "defer" que les méthodes ".done() et .fail()" (voire ".then() et .fail()"), introduites dans la v1.5^[3].

Voir aussi modifier

Outils de tests en ligne :

Plugins et frameworks jQuery :

Références modifier

JavaScript

Introduction à Prototype

Sommaire

[1] ttp://docs.jQuery.com/Downloading_jQuery

[2] ttp://api.jquery.com/jquery.ajax/

[3] ttps://stackoverflow.com/questions/10931836/should-i-use-done-and-fail-for-new-jquery-ajax-code-instead-of-success-and

[1]

[2]

[3]