Utilitaires JQuery

Cette page est propulsée par


Cette page Webjax vous présente les fonctionnalités JQuery dites "utilitaires" ou "Utilities" en anglais. C'est à dire des fonctionnalités vous permettant de manipuler des tableaux et objets, des chaînes de caractères, ainsi que des informations générales au notamment du "browser", navigateur et de ses caractéristiques.



#00 :: Navigateur web , User Agent: #01 :: Opérations sur tableaux et objets , Array and Object operations: #02 :: Opérations de test , Test operations: #03 :: Opérations sur les chaînes de caractères , String operations:

00 :: Requêtes AJAX , Ajax Requests:

jQuery.browser

Contient des variables flags à partir de "js.navigator.userAgent" .
Les flags disponibles sont listés ci après :

• safari
• opera
• msie
• mozilla

Ces flags sont disponibles avant que le modèle n'ai été chargé donc vous pouvez utiliser cette propriété pour gérer des évènements selon le navigateur qui est utilisé.
Il existe des situations ou la détection via cet objet n'est pas optimisée et ou il peut être intéressant de passer une vraie identification du navigateur.
Une combinaison des deux méthodes permet d'obtenir un résultat potentiellement très valide. Vous pouvez tester l'exemple en utilisant le formulaire ci après :

jQuery.browser

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
jQuery.each(jQuery.browser, function(i, val) { $("<div>" + i + " : <span>" + val + "</span>").appendTo("#myTest00"); });

jQuery.browser.version

L'identification précise du navigateur utilisé pour rendre la page.
Ci après une liste typique de résultats :

• Internet Explorer: 6.0, 7.0
• Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3
• Opera: 9.20
• Safari/Webkit: 312.8, 418.9

Vous pouvez tester l'exemple en utilisant le formulaire ci après :

jQuery.browser.version

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("#myTest01 p").html("La version du navigateur est : <span>" +jQuery.browser.version + "</span>");

jQuery.boxModel

Permet de déterminer si le navigateur utilise le W3C CSS Box Model
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

jQuery.boxModel

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("#myTest02 p").html("Ce navigateur utilise t-il le modèle W3C CSS Box Model ? : <span>" +jQuery.boxModel + "</span>");

01 :: Opérations sur tableaux et objets , Array and Object operations:

jQuery.each( object, callback )

Une fonction générique itérative peut être utilisée aussi bien avec des tableaux que des objets.
La fonction n'est pas la même que "$().each()" qui utilise l'itération uniquement avec des objets JQuery. Cette fonction peut être utilisée pour itérer n'importe quel type de données.
Le "callback" a deux arguments : la clé (objet) ou un index (tableau) en premier, et la valeur en second.
Si vous souhaitez "casser" la boucle "each()" pour une itération particulière vous pouvez le faire en faisant retourner "false" à votre fonction. Toutes les autres valeurs retournées seront ignorées.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

jQuery.each( object, callback )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
var arr03 = [ "un", "deux", "trois", "quatre", "cinq" ]; var obj03 = { un:1, deux:2, trois:3, quatre:4, cinq:5 }; jQuery.each(arr03, function() { $("#myTest03 #" + this).text("My id is " + this + "."); return (this != "quatre"); // s'arrêtera à "cinq" }); jQuery.each(obj03, function(i, val) { $("#myTest03 #" + i).append(document.createTextNode(" - " + val)); });

jQuery.extend( target, object1, [objectN] )

Cette instruction permet d'étendre un objet avec un ou plusieurs autres et retourne l'objet original modifié.
Si aucune cible n'est précisée, l'objet JQuery est lui même étendu. Cela peut être utile pour les créateurs de plugins qui souhaitent brancher de nouvelles fonctions dans JQuery.
Si un booléen "false" est spécifié comme premier argument, JQuery effectue une copie propre, en recopiant tout objet qui peut être trouvé. Autrement, la copié partagera la structure avec l'objet originel.
Les propriétés indéfinies ne seront pas copiées.

Le code source de cet exemple est ci après présenté :
var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options);
Le code source ci avant donnera le code suivant comme résultat :
settings == { validate: true, limit: 5, name: "bar" }
Le code source de cet exemple est ci après présenté :
var empty = {} var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; var settings = $.extend(empty, defaults, options);
Le code source ci avant donnera le code suivant comme résultat :
settings == { validate: true, limit: 5, name: "bar" } empty == { validate: true, limit: 5, name: "bar" }

jQuery.grep( array, callback, [invert] )

Cette instruction permet de filtrer des items en dehors d'un tableau "Array" en utilisant une fonction.
La dite fonction passera deux arguments à savoir le tableau courant et la fonction de filtrage.
La fonction doit retourner "true" pour permettre de conserver la valeur dans le tableau et "false" pour la supprimer.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

jQuery.grep( array, callback, [invert] )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ]; $("#myTest05 div").text(arr.join(", ")); arr = jQuery.grep(arr, function(n, i){ return (n != 5 && i > 4); }); $("#myTest05 p").text(arr.join(", ")); arr = jQuery.grep(arr, function (a) { return a != 9; }); $("#myTest05 span").text(arr.join(", "));

jQuery.makeArray( obj )

Permet de transcrire un objet de type "Array" ou tableau en vrai tableau "Array".
Les objets de type "Array" ont une propriété "length" et cette propriété est numérotée de 0 à -1 .
Typiquement, il ne sera pas nécessaire d'utiliser cette fonction si vous utilisez JQuery qui l'utilise en interne.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

jQuery.makeArray( obj )

Tester le sélecteur :

Un

Deux

Trois

Quatre

Le code source de cet exemple est ci après présenté :
var arr = jQuery.makeArray($("#myTest06 div")); arr.reverse(); // utilisation d'une méthode "Array" $(arr).appendTo("#myTest06");

jQuery.map( array, callback )

Permet de transcrire tous les items d'un tableau "Array" dans un autre tableau "Array".
La fonction de transcription qui est fournie avec cette méthode est appelée pour chaque item dans le tableau "Array" et transmet deux arguments à savoir l'item à transcrire et son index dans le tableau "Array". La fonction peut retourner la valeur transcrite, "null" (pour supprimer l'item) , ou un tableau "Array" d'items qui seront ensuite insérés dans le tableau "Array".
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

jQuery.map( array, callback )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
var arr = [ "a", "b", "c", "d", "e" ] $("#myTest07 div").text(arr.join(", ")); arr = jQuery.map(arr, function(n, i){ return (n.toUpperCase() + i); }); $("#myTest07 p").text(arr.join(", ")); arr = jQuery.map(arr, function (a) { return a + a; }); $("#myTest07 span").text(arr.join(", "));

jQuery.inArray( value, array )

Permet de déterminer l'index du premier paramètre dans le tableau "Array" (-1 si non trouvé).
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

jQuery.inArray( value, array )

Tester le sélecteur :

"John" trouvé à l'index

4 trouvé à l'index

"David" trouvé à l'index

Le code source de cet exemple est ci après présenté :
var arr08 = [ 4, "Pete", 8, "John" ]; $("#myTest08 span:eq(0)").text(jQuery.inArray("John", arr08)); $("#myTest08 span:eq(1)").text(jQuery.inArray(4, arr08)); $("#myTest08 span:eq(2)").text(jQuery.inArray("David", arr08));

jQuery.unique( array )

Supprimer tous les éléments dupliqués d'un tableau d'éléments.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

jQuery.unique( array )

Tester le sélecteur :

Il y a 6 "div" dans cette box myTest09.

Le code source de cet exemple est ci après présenté :
var divs = $("#myTest09 div").get(); // ajoute 3 éléments avec la classe "dup" (des "div") divs = divs.concat($("#myTest09 .dup").get()); $("#myTest09 div:eq(1)").text("Avant le changement il y avait " + divs.length + " élements."); divs = jQuery.unique(divs); $("#myTest09 div:eq(2)").text("Après le changement il y avait " + divs.length + " élements.") .css("color", "#F9BA1C");

02 :: Opérations de test , Test operations:

jQuery.isFunction( obj )

L'instruction détermine si le paramètre transmis est une fonction.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

jQuery.isFunction( obj )

Tester le sélecteur :

jQuery.isFunction(objs[0]) =

jQuery.isFunction(objs[1]) =

jQuery.isFunction(objs[2]) =

jQuery.isFunction(objs[3]) =

jQuery.isFunction(objs[4]) =

Le code source de cet exemple est ci après présenté :
function stub() { } function demo10(){ var objs = [ function () {}, { x:15, y:20 }, null, stub, "function" ]; jQuery.each(objs, function (i) { var isFunc = jQuery.isFunction(objs[i]); $("#myTest10 span:eq( " + i + ")").text(isFunc); }); }

03 :: Opérations sur les chaînes de caractères , String operations:

jQuery.trim( str )

Permet de supprimer les espaces "whitespaces" à gauche et à droite d'une chaîne de caractères.
Utiliser une expression régulière pour supprimer les espaces d'une chaîne de caractères.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

jQuery.trim( str )

Tester le sélecteur :

Afficher le texte avec et sans espace

Le code source de cet exemple est ci après présenté :
function demo11(){ $("#myTest11 button").click(function () { var str = " beaucoup d'espace avant et après le vrai texte "; alert("'" + str + "'"); str = jQuery.trim(str); alert("'" + str + "' - et voilà c'est tout propre, plus d'espaces ni à droite ni à gauche"); }); }

: 11/03/2008 22:05:32 | : JQuery, utilities, utilitaires, javascript, framework, ajax, library, jquery, j, query, Framework, Javascript, Library, Ajax, asyncronous, web2.0, ria, dom, control, enh,

Aucun commentaire enregistré