Trucs et astuces jQuery

Syntaxe

• Sténographie pour le prêt-événement par roosteronacid
• Ruptures de ligne et chaînabilité par le coqéronacide
• Filtres emboîtables par Nathan Long
• Mettre en cache une collection et exécuter des commandes sur la même ligne par roosteronacid
• Contient un sélecteur de roosteronacid
• Définition des propriétés à la création d'élément par roosteronacid
• Accédez aux fonctions jQuery comme vous le feriez avec un tableau par roosteronacid
• La fonction noConflict - Libérer la variable $ par Oli
• Isolez la variable $ en mode noConflict par nickf
• Mode sans conflit par roosteronacid

Stockage de données

• La fonction de données - lier des données à des éléments par TenebrousX
• Prise en charge des attributs de données HTML5, sur les stéroïdes! par roosteronacid
• Le plug-in de métadonnées jQuery par Filip Dupanović

Optimisation

• Optimiser les performances des sélecteurs complexes par roosteronacid
• Le paramètre de contexte par lupefiasco
• Sauvegarde et réutilisation des recherches par Nathan Long
• Créer un élément HTML et conserver une référence, Vérifier si un élément existe, Écrire vos propres sélecteurs par Andreas Grech

Divers

• Vérifier l'index d'un élément dans une collection par redsquare
• Gestionnaires d'événements en direct par TM
• Remplacer les fonctions anonymes par des fonctions nommées par ken
• Framework Microsoft AJAX et pont jQuery par Slace
• Tutoriels jQuery par egyamado
• Supprimer des éléments d'une collection et préserver la chaîne grâce au roosteronacid
• Déclarez $ this au début des fonctions anonymes par Ben
• FireBug Lite, plug-in Hotbox, indique quand une image a été chargée et Google CDN par Color Blend
• Utilisation judicieuse de scripts jQuery tiers par harriyott
• La fonction de Jan Zich
• Module d'extension de formulaire par Chris S
• Chaque fonction asynchrone par OneNerd
• Le plug-in de modèle jQuery: implémentation d'une logique complexe à l'aide de fonctions de rendu par roosteronacid

Créer un élément HTML et conserver une référence

var newDiv = $("<div />");

newDiv.attr("id", "myNewDiv").appendTo("body");

/* Now whenever I want to append the new div I created, 
   I can just reference it from the "newDiv" variable */

Vérifier si un élément existe

if ($("#someDiv").length)
{
    // It exists...
}

Écrire vos propres sélecteurs

$.extend($.expr[":"], {
    over100pixels: function (e)
    {
        return $(e).height() > 100;
    }
});

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});

La data()méthode de jQuery est utile et peu connue. Il vous permet de lier des données aux éléments DOM sans modifier le DOM.

Filtres d'imbrication

Vous pouvez imbriquer des filtres (comme l' a montré nickf ici ).

.filter(":not(:has(.selected))")

Je ne suis vraiment pas fan du $(document).ready(fn)raccourci. Bien sûr, cela réduit le code, mais cela réduit également la lisibilité du code. Quand vous voyez $(document).ready(...), vous savez ce que vous regardez. $(...)est utilisé de beaucoup trop de façons pour avoir immédiatement un sens.

Si vous avez plusieurs frameworks, vous pouvez utiliser jQuery.noConflict();comme vous le dites, mais vous pouvez également lui affecter une variable différente comme ceci:

var $j = jQuery.noConflict();

$j("#myDiv").hide();

Très utile si vous disposez de plusieurs frameworks qui peuvent être réduits à $x(...)des appels de style.

Ooooh, n'oublions pas les métadonnées jQuery ! La fonction data () est géniale, mais elle doit être remplie via des appels jQuery.

Au lieu de briser la conformité W3C avec des attributs d'élément personnalisés tels que:

<input 
  name="email" 
  validation="required" 
  validate="email" 
  minLength="7" 
  maxLength="30"/> 

Utilisez plutôt des métadonnées:

<input 
  name="email" 
  class="validation {validate: email, minLength: 2, maxLength: 50}" />

<script>
    jQuery('*[class=validation]').each(function () {
        var metadata = $(this).metadata();
        // etc.
    });
</script>

Gestionnaires d'événements en direct

Définissez un gestionnaire d'événements pour tout élément qui correspond à un sélecteur, même s'il est ajouté au DOM après le chargement initial de la page:

$('button.someClass').live('click', someFunction);

Cela vous permet de charger du contenu via ajax, ou de les ajouter via javascript et de configurer les gestionnaires d'événements correctement pour ces éléments automatiquement.

De même, pour arrêter la gestion des événements en direct:

$('button.someClass').die('click', someFunction);

Ces gestionnaires d'événements en direct ont quelques limitations par rapport aux événements réguliers, mais ils fonctionnent très bien dans la majorité des cas.

Pour plus d'informations, consultez la documentation jQuery .

MISE À JOUR: live()et die()sont obsolètes dans jQuery 1.7. Voir http://api.jquery.com/on/ et http://api.jquery.com/off/ pour des fonctionnalités de remplacement similaires.

UPDATE2: live()est obsolète depuis longtemps, même avant jQuery 1.7. Pour les versions jQuery 1.4.2+ avant 1.7, utilisez delegate()et undelegate(). L' live()exemple ( $('button.someClass').live('click', someFunction);) peut être réécrite en utilisant delegate()comme ça: $(document).delegate('button.someClass', 'click', someFunction);.

Remplacez les fonctions anonymes par des fonctions nommées. Cela remplace vraiment le contexte jQuery, mais il entre plus en jeu, il semble que lorsque vous utilisez jQuery, en raison de sa dépendance à l'égard des fonctions de rappel. Les problèmes que j'ai avec les fonctions anonymes en ligne sont qu'ils sont plus difficiles à déboguer (beaucoup plus faciles à regarder une pile d'appels avec des fonctions distinctes, au lieu de 6 niveaux "anonymes"), et aussi le fait que plusieurs fonctions anonymes au sein de la même La chaîne jQuery peut devenir difficile à lire et / ou à entretenir. De plus, les fonctions anonymes ne sont généralement pas réutilisées; d'autre part, déclarer des fonctions nommées m'encourage à écrire du code plus susceptible d'être réutilisé.

Une illustration; au lieu de:

$('div').toggle(
    function(){
        // do something
    },
    function(){
        // do something else
    }
);

Je préfère:

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

Définition des propriétés lors de la création de l'élément

Dans jQuery 1.4, vous pouvez utiliser un littéral objet pour définir des propriétés lorsque vous créez un élément:

var e = $("<a />", { href: "#", class: "a-class another-class", title: "..." });

... Vous pouvez même ajouter des styles:

$("<a />", {
    ...
    css: {
        color: "#FF0000",
        display: "block"
    }
});

Voici un lien vers la documentation .

au lieu d'utiliser un alias différent pour l'objet jQuery (lors de l'utilisation de noConflict), j'écris toujours mon code jQuery en enveloppant le tout dans une fermeture. Cela peut être fait dans la fonction document.ready:

var $ = someOtherFunction(); // from a different library

jQuery(function($) {
    if ($ instanceOf jQuery) {
        alert("$ is the jQuery object!");
    }
});

vous pouvez également le faire comme ceci:

(function($) {
    $('...').etc()    // whatever jQuery code you want
})(jQuery);

Je trouve que c'est le plus portable. J'ai travaillé sur un site qui utilise simultanément Prototype ET jQuery et ces techniques ont évité tous les conflits.

Vérifiez l'index

jQuery a .index mais c'est difficile à utiliser, car vous avez besoin de la liste des éléments, et passez l'élément dont vous voulez l'index:

var index = e.g $('#ul>li').index( liDomObject );

Ce qui suit est beaucoup plus facile:

Si vous voulez connaître l'index d'un élément dans un ensemble (par exemple des éléments de liste) dans une liste non ordonnée:

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

Sténographie pour le prêt-événement

La manière explicite et verbeuse:

$(document).ready(function ()
{
    // ...
});

La sténographie:

$(function ()
{
    // ...
});

Sur la fonction jQuery principale, spécifiez le paramètre de contexte en plus du paramètre de sélecteur. La spécification du paramètre de contexte permet à jQuery de démarrer à partir d'une branche plus profonde dans le DOM, plutôt qu'à partir de la racine du DOM. Étant donné un DOM suffisamment grand, la spécification du paramètre de contexte devrait se traduire par des gains de performances.

Exemple: recherche toutes les entrées de type radio dans le premier formulaire du document.

$("input:radio", document.forms[0]);

Référence: http://docs.jquery.com/Core/jQuery#expressioncontext

Pas vraiment jQuery mais j'ai fait un joli petit bridge pour jQuery et MS AJAX:

Sys.UI.Control.prototype.j = function Sys$UI$Control$j(){
  return $('#' + this.get_id());
}

C'est vraiment bien si vous faites beaucoup d'ASP.NET AJAX, car jQuery est pris en charge par MS ayant maintenant un joli pont signifie qu'il est vraiment facile de faire des opérations jQuery:

$get('#myControl').j().hide();

Ainsi, l'exemple ci-dessus n'est pas génial, mais si vous écrivez des contrôles serveur ASP.NET AJAX, il est facile d'avoir jQuery dans votre implémentation de contrôle côté client.

Optimiser les performances des sélecteurs complexes

Interroger un sous-ensemble du DOM lors de l'utilisation de sélecteurs complexes améliore considérablement les performances:

var subset = $("");

$("input[value^='']", subset);

En parlant de trucs et astuces et aussi de quelques tutoriels. J'ai trouvé cette série de tutoriels ( série vidéo «jQuery for Absolute Beginners») par Jeffery Way sont TRÈS UTILES.

Il cible les développeurs qui ne connaissent pas jQuery. Il montre comment créer de nombreuses choses sympas avec jQuery, comme l'animation, la création et la suppression d'éléments et plus encore ...

J'en ai beaucoup appris. Il montre comment il est facile d'utiliser jQuery. Maintenant, je l'adore et je peux lire et comprendre n'importe quel script jQuery même s'il est complexe.

Voici un exemple que j'aime " Redimensionner le texte "

1- jQuery ...

<script language="javascript" type="text/javascript">
    $(function() {
        $('a').click(function() {
            var originalSize = $('p').css('font-size'); // get the font size 
            var number = parseFloat(originalSize, 10); // that method will chop off any integer from the specified variable "originalSize"
            var unitOfMeasure = originalSize.slice(-2);// store the unit of measure, Pixle or Inch

            $('p').css('font-size', number / 1.2 + unitOfMeasure);
            if(this.id == 'larger'){$('p').css('font-size', number * 1.2 + unitOfMeasure);}// figure out which element is triggered
         });        
     });
</script>

2- Style CSS ...

<style type="text/css" >
body{ margin-left:300px;text-align:center; width:700px; background-color:#666666;}
.box {width:500px; text-align:justify; padding:5px; font-family:verdana; font-size:11px; color:#0033FF; background-color:#FFFFCC;}
</style>

2- HTML ...

<div class="box">
    <a href="#" id="larger">Larger</a> | 
    <a href="#" id="Smaller">Smaller</a>
    <p>
    In today’s video tutorial, I’ll show you how to resize text every time an associated anchor tag is clicked. We’ll be examining the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods. 
    </p>
</div>

Recommande fortement ces tutoriels ...

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

Fonction each () asynchrone

Si vous avez des documents vraiment complexes où l'exécution de la fonction jquery each () verrouille le navigateur pendant l'itération, et / ou Internet Explorer affiche le message `` voulez-vous continuer à exécuter ce script '', cette solution sauvera la journée.

jQuery.forEach = function (in_array, in_pause_ms, in_callback)
{
    if (!in_array.length) return; // make sure array was sent

    var i = 0; // starting index

    bgEach(); // call the function

    function bgEach()
    {
        if (in_callback.call(in_array[i], i, in_array[i]) !== false)
        {
            i++; // move to next item

            if (i < in_array.length) setTimeout(bgEach, in_pause_ms);
        }
    }

    return in_array; // returns array
};


jQuery.fn.forEach = function (in_callback, in_optional_pause_ms)
{
    if (!in_optional_pause_ms) in_optional_pause_ms = 10; // default

    return jQuery.forEach(this, in_optional_pause_ms, in_callback); // run it
};

La première façon de l'utiliser est comme chaque ():

$('your_selector').forEach( function() {} );

Un deuxième paramètre facultatif vous permet de spécifier la vitesse / le délai entre les itérations, ce qui peut être utile pour les animations ( l'exemple suivant attend 1 seconde entre les itérations ):

$('your_selector').forEach( function() {}, 1000 );

N'oubliez pas qu'étant donné que cela fonctionne de manière asynchrone, vous ne pouvez pas compter sur les itérations pour qu'elles soient terminées avant la ligne de code suivante, par exemple:

$('your_selector').forEach( function() {}, 500 );
// next lines of code will run before above code is complete

J'ai écrit ceci pour un projet interne, et même si je suis sûr qu'il peut être amélioré, cela a fonctionné pour ce dont nous avions besoin, alors j'espère que certains d'entre vous le trouveront utile. Merci -

Syntactic shorthand-sugar-thing - Cache une collection d'objets et exécute des commandes sur une seule ligne:

Au lieu de:

var jQueryCollection = $("");

jQueryCollection.command().command();

Je fais:

var jQueryCollection = $("").command().command();

Un cas d'utilisation quelque peu «réel» pourrait être quelque chose dans ce sens:

var cache = $("#container div.usehovereffect").mouseover(function ()
{
    cache.removeClass("hover").filter(this).addClass("hover");
});

J'aime déclarer un $this variable au début des fonctions anonymes, donc je sais que je peux référencer un jQueried this.

Ainsi:

$('a').each(function() {
    var $this = $(this);

    // Other code
});

Enregistrer des objets jQuery dans des variables pour les réutiliser

L'enregistrement d'un objet jQuery dans une variable vous permet de le réutiliser sans avoir à rechercher dans le DOM pour le trouver.

(Comme l'a suggéré @Louis, j'utilise maintenant $ pour indiquer qu'une variable contient un objet jQuery.)

// Bad: searching the DOM multiple times for the same elements
$('div.foo').each...
$('div.foo').each...

// Better: saving that search for re-use
var $foos = $('div.foo');
$foos.each...
$foos.each...

À titre d'exemple plus complexe, supposons que vous ayez une liste d'aliments dans un magasin et que vous souhaitiez n'afficher que ceux qui correspondent aux critères d'un utilisateur. Vous avez un formulaire avec des cases à cocher, chacune contenant un critère. Les cases à cocher ont des noms comme organicet lowfat, et les produits ont des classes correspondantes - .organic, etc.

var $allFoods, $matchingFoods;
$allFoods = $('div.food');

Vous pouvez maintenant continuer à travailler avec cet objet jQuery. Chaque fois qu'une case est cochée (pour cocher ou décocher), commencez à partir de la liste principale des aliments et filtrez en fonction des cases cochées:

// Whenever a checkbox in the form is clicked (to check or uncheck)...
$someForm.find('input:checkbox').click(function(){

  // Start out assuming all foods should be showing
  // (in case a checkbox was just unchecked)
  var $matchingFoods = $allFoods;

  // Go through all the checked boxes and keep only the foods with
  // a matching class 
  this.closest('form').find("input:checked").each(function() {  
     $matchingFoods = $matchingFoods.filter("." + $(this).attr("name")); 
  });

  // Hide any foods that don't match the criteria
  $allFoods.not($matchingFoods).hide();
});

Il semble que la plupart des conseils intéressants et importants aient déjà été mentionnés, donc celui-ci n'est qu'un petit ajout.

La petite astuce est la fonction jQuery.each (objet, rappel) . Tout le monde utilise probablement le jQuery.each (rappel) pour itérer sur l'objet jQuery lui-même, car il est naturel. La fonction utilitaire jQuery.each (objet, rappel) parcourt les objets et les tableaux. Pendant longtemps, je ne savais pas en quoi cela pouvait servir en dehors d'une syntaxe différente (cela ne me dérange pas d'écrire toutes les boucles façonnées), et j'ai un peu honte de n'avoir réalisé sa force principale que récemment.

Le fait est que puisque le corps de la boucle dans jQuery.each (objet, rappel) est une fonction , vous obtenez une nouvelle portée à chaque fois dans la boucle, ce qui est particulièrement pratique lorsque vous créez des fermetures dans la boucle.

En d'autres termes, une erreur courante typique est de faire quelque chose comme:

var functions = [];
var someArray = [1, 2, 3];
for (var i = 0; i < someArray.length; i++) {
    functions.push(function() { alert(someArray[i]) });
}

Maintenant, lorsque vous appelez les fonctions du functionstableau, vous obtiendrez une alerte trois fois avec le contenu undefinedqui n'est probablement pas ce que vous vouliez. Le problème est qu'il n'y a qu'une seule variable iet que les trois fermetures s'y réfèrent. Une fois la boucle terminée, la valeur finale de iest 3 et someArrary[3]est undefined. Vous pouvez contourner ce problème en appelant une autre fonction qui créerait la fermeture pour vous. Ou vous utilisez l'utilitaire jQuery qui le fera essentiellement pour vous:

var functions = [];
var someArray = [1, 2, 3];
$.each(someArray, function(item) {
    functions.push(function() { alert(item) });
});

Maintenant, lorsque vous appelez les fonctions, vous obtenez trois alertes avec le contenu 1, 2 et 3 comme prévu.

En général, ce n'est rien que vous ne pourriez pas faire vous-même, mais c'est agréable à avoir.

Accédez aux fonctions jQuery comme vous le feriez pour un tableau

Ajouter / supprimer une classe basée sur un booléen ...

function changeState(b)
{
    $("selector")[b ? "addClass" : "removeClass"]("name of the class");
}

Est la version courte de ...

function changeState(b)
{
    if (b)
    {
        $("selector").addClass("name of the class");
    }
    else
    {
        $("selector").removeClass("name of the class");
    }
}

Pas autant de cas d'utilisation pour cela. Néanmoins; Je pense que c'est bien :)

Mise à jour

Juste au cas où vous n'êtes pas du type lecture-commentaire, ThiefMaster souligne que le toggleClass accepte une valeur booléenne , qui détermine si une classe doit être ajoutée ou supprimée. Donc, en ce qui concerne mon exemple de code ci-dessus, ce serait la meilleure approche ...

$('selector').toggleClass('name_of_the_class', true/false);

Mise à jour:

Incluez simplement ce script sur le site et vous obtiendrez une console Firebug qui apparaîtra pour le débogage dans n'importe quel navigateur. Pas tout à fait aussi complet mais c'est toujours très utile! N'oubliez pas de le retirer lorsque vous avez terminé.

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

Consultez ce lien:

De CSS Tricks

Mise à jour: j'ai trouvé quelque chose de nouveau; c'est le JQuery Hotbox.

JQuery Hotbox

Google héberge plusieurs bibliothèques JavaScript sur Google Code. Le charger à partir de là économise de la bande passante et il charge rapidement car il a déjà été mis en cache.

<script src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">  

    // Load jQuery  
    google.load("jquery", "1.2.6");  

    google.setOnLoadCallback(function() {  
        // Your code goes here.  
    });  

</script>

Ou

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

Vous pouvez également l'utiliser pour savoir quand une image est entièrement chargée.

$('#myImage').attr('src', 'image.jpg').load(function() {  
    alert('Image Loaded');  
});

Le "console.info" de firebug, que vous pouvez utiliser pour vider des messages et des variables à l'écran sans avoir à utiliser des boîtes d'alerte. "console.time" vous permet de configurer facilement une minuterie pour envelopper un tas de code et voir combien de temps cela prend.

console.time('create list');

for (i = 0; i < 1000; i++) {
    var myList = $('.myList');
    myList.append('This is list item ' + i);
}

console.timeEnd('create list');

Utilisez des méthodes de filtrage sur les pseudo-sélecteurs lorsque cela est possible afin que jQuery puisse utiliser querySelectorAll (ce qui est beaucoup plus rapide que sizzle). Considérez ce sélecteur:

$('.class:first')

La même sélection peut être effectuée en utilisant:

$('.class').eq(0)

Ce qui doit être plus rapide car la sélection initiale de '.class' est compatible QSA

Supprimer des éléments d'une collection et préserver la chaînabilité

Considérer ce qui suit:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

$("li").filter(function()
{
    var text = $(this).text();

    // return true: keep current element in the collection
    if (text === "One" || text === "Two") return true;

    // return false: remove current element from the collection
    return false;
}).each(function ()
{
    // this will alert: "One" and "Two"       
    alert($(this).text());
});

La filter()fonction supprime des éléments de l'objet jQuery. Dans ce cas: tous les éléments li ne contenant pas le texte "Un" ou "Deux" seront supprimés.

Modification du type d'un élément d'entrée

J'ai rencontré ce problème lorsque j'essayais de changer le type d'un élément d'entrée déjà attaché au DOM. Vous devez cloner l'élément existant, l'insérer avant l'ancien élément, puis supprimer l'ancien élément. Sinon ça ne marche pas:

var oldButton = jQuery("#Submit");
var newButton = oldButton.clone();

newButton.attr("type", "button");
newButton.attr("id", "newSubmit");
newButton.insertBefore(oldButton);
oldButton.remove();
newButton.attr("id", "Submit");

Utilisation judicieuse de scripts jQuery tiers, tels que la validation de champ de formulaire ou l'analyse d'url. Cela vaut la peine de voir de quoi il s'agit afin que vous sachiez la prochaine fois que vous rencontrez une exigence JavaScript.

Sauts de ligne et chaînabilité

Lors du chaînage de plusieurs appels sur des collections ...

$("a").hide().addClass().fadeIn().hide();

Vous pouvez augmenter la lisibilité avec les sauts de ligne. Comme ça:

$("a")
.hide()
.addClass()
.fadeIn()
.hide();

Utilisez .stop (true, true) lorsque le déclenchement d'une animation l'empêche de répéter l'animation. Ceci est particulièrement utile pour les animations de survol.

$("#someElement").hover(function(){
    $("div.desc", this).stop(true,true).fadeIn();
},function(){
    $("div.desc", this).fadeOut();
});

Utiliser des fonctions anonymes auto-exécutables dans un appel de méthode de manière .append()à parcourir quelque chose. C'EST À DIRE:

$("<ul>").append((function ()
{
    var data = ["0", "1", "2", "3", "4", "5", "6"],
        output = $("<div>"),
        x = -1,
        y = data.length;

    while (++x < y) output.append("<li>" + info[x] + "</li>");

    return output.children();
}()));

Je l'utilise pour parcourir des choses qui seraient grandes et inconfortables pour sortir de mon enchaînement à construire.

Prise en charge des attributs de données HTML5, sur les stéroïdes!

La fonction de données a déjà été mentionnée. Avec lui, vous pouvez associer des données à des éléments DOM.

Récemment, l'équipe jQuery a ajouté la prise en charge des attributs de données * personnalisés HTML5 . Et comme si cela ne suffisait pas; ils ont alimenté la fonction de données avec des stéroïdes, ce qui signifie que vous pouvez stocker des objets complexes sous forme de JSON, directement dans votre balisage.

Le HTML:

<p data-xyz = '{"str": "hi there", "int": 2, "obj": { "arr": [1, 2, 3] } }' />

Le JavaScript:

var data = $("p").data("xyz");

data.str // "hi there"
typeof data.str // "string"

data.int + 2 // 4
typeof data.int // "number"

data.obj.arr.join(" + ") + " = 6" // "1 + 2 + 3 = 6"
typeof data.obj.arr // "object" ... Gobbles! Errrghh!