Question Conseils et astuces jQuery


Syntaxe

Stockage de données

Optimisation

Divers


508
2017-12-20 03:08


origine


Réponses:


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");
});

252
2017-10-08 13:11



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


111
2017-10-10 12:58



Filtres imbriqués

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

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

95
2017-10-10 12:39



Je ne suis vraiment pas fan de $(document).ready(fn) raccourci. Bien sûr, cela réduit le code, mais réduit aussi la lisibilité du code. Quand tu vois $(document).ready(...), vous savez ce que vous regardez. $(...) est utilisé de bien d'autres 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 avez plusieurs frameworks qui peuvent se résumer à $x(...)appels de style


80
2017-10-08 13:21



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

Au lieu de rompre la conformité W3C avec les attributs d'éléments personnalisés tels que:

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

Utilisez des métadonnées à la place:

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

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

77



Gestionnaires d'événements en direct

Définir un gestionnaire d'événement 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 automatiquement les gestionnaires d'événements pour ces éléments.

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 voir le Documentation jQuery.

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

UPDATE2: live() a été longtemps obsolète, même avant jQuery 1.7. Pour les versions jQuery 1.4.2+ avant 1.7 utilisation delegate() et undelegate(). le live() Exemple ($('button.someClass').live('click', someFunction);) peut être réécrit en utilisant delegate() comme ça: $(document).delegate('button.someClass', 'click', someFunction);.


74



Remplacez les fonctions anonymes par des fonctions nommées. Cela surpasse le contexte jQuery, mais il semble plus important lors de l'utilisation de jQuery, en raison de son utilisation 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 facile à regarder une callstack avec des fonctions distinctement nommées, plutôt 6 niveaux de "anonyme"), et aussi le fait que plusieurs fonctions anonymes dans le même jQuery-chain peut devenir difficile à lire et / ou à maintenir. De plus, les fonctions anonymes ne sont généralement pas réutilisées; d'un autre côté, 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 );

46



Définir les propriétés à la création d'un élément

Dans jQuery 1.4, vous pouvez utiliser un littéral d'objet pour définir les 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.


45



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 l'enveloppant 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!");
    }
});

sinon, vous pouvez le faire comme ceci:

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

Je trouve cela le plus portable. J'ai travaillé sur un site qui utilise à la fois Prototype et jQuery simultanément et ces techniques ont évité tous les conflits.


43