jQuery trucs et Astuces

création d'un élément HTML et conservation d'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érification de l'existence d'un élément

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 méthode de jQuery data() est utile et peu connue. Il vous permet de lier des données à des éléments DOM sans modifier le DOM.

Filtres De Nidification

vous pouvez nicher des filtres (comme nickf montré ici ).

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

Je ne suis pas fan du raccourci $(document).ready(fn) . Bien sûr, cela réduit le code, mais aussi la lisibilité du code. Quand vous voyez $(document).ready(...) , vous savez ce que vous cherchez. $(...) est utilisé de bien trop d'autres façons pour avoir un sens immédiat.

si vous avez plusieurs frameworks vous pouvez utiliser jQuery.noConflict(); comme vous dites, mais vous pouvez aussi assigner une variable différente pour cela comme ceci:

var $j = jQuery.noConflict();

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

très utile si vous avez plusieurs cadres qui se résument à $x(...) style appels.

Ooooh, ne l'oublions pas jQuery métadonnées ! La fonction data () est grande, mais elle doit être peuplée via jQuery calls.

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

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

utiliser 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>

Live Event Handlers

définir 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 de la page initiale:

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

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

de même, pour arrêter la manipulation de l'événement en direct:

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

ces gestionnaires d'événements en direct ont quelques limites par rapport aux événements réguliers, mais ils travaillent très bien pour la majorité des cas.

pour plus d'information voir la jQuery Documentation .

mise à JOUR: live() et die() sont déconseillés dans jQuery 1.7. Voir http://api.jquery.com/on / et http://api.jquery.com/off / pour les fonctionnalité de remplacement.

UPDATE2: live() a été longtemps déprécié, même avant jQuery 1.7. Pour les versions jQuery 1.4.2+ avant 1.7, utilisez delegate() et undelegate() . l'exemple live() ( $('button.someClass').live('click', someFunction); ) peut être réécrit en utilisant delegate() comme ceci: $(document).delegate('button.someClass', 'click', someFunction); .

remplacer les fonctions anonymes par les fonctions nommées. Cela remplace vraiment le contexte jQuery, mais il entre en jeu plus comme il semble lors de l'utilisation de jQuery, en raison de sa dépendance sur les fonctions de callback. Les problèmes que j'ai avec les fonctions anonymes inline, sont qu'ils sont plus difficiles à déboguer (beaucoup plus facile à regarder une callstack avec des fonctions distinctement nommées, au lieu de 6 niveaux de "anonymous"), et aussi le fait que les fonctions anonymes multiples au sein de la même chaîne jQuery peuvent devenir lourd à 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 les fonctions nommées m'encourage à écrire du code qui est 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 à la création de l'élément

dans jQuery 1.4 vous pouvez utiliser un objet littéral 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 (en utilisant noConflict), j'écris toujours mon code jQuery en l'enveloppant dans une fermeture. Cela peut être fait dans le document.fonction prête:

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

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

vous pouvez aussi 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 à la fois Prototype et jQuery simultanément et ces techniques ont évité tous les conflits.

vérifier L'Index

jQuery A.index mais c'est une douleur à utiliser, comme vous avez besoin de la liste des éléments, et passer dans l'élément que vous voulez l'index de:

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, Liste des éléments) dans une liste non ordonnée:

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

Raccourci pour le prêt-à-événement

L'explicite et détaillé de la manière:

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

L'abréviation:

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

sur la fonction core jQuery, spécifier le paramètre context en plus du paramètre selector. Spécifier le paramètre context permet à jQuery de partir d'une branche plus profonde du DOM, plutôt que de la racine du DOM. Avec un DOM suffisamment grand, spécifier le paramètre contextuel devrait se traduire par des gains de performance.

exemple: trouve toutes les entrées de type radio dans la première forme du document.

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

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

pas vraiment jQuery seulement mais j'ai fait un beau petit pont pour jQuery et Mme AJAX:

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

c'est vraiment agréable si vous faites beaucoup de ASP.NET AJAX, puisque jQuery est supporté par MS maintenant avoir un beau pont signifie qu'il est vraiment facile de faire des opérations jQuery:

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

donc l'exemple ci-dessus n'est pas génial, mais si vous écrivez ASP.NET AJAX server contrôle, rend facile d'avoir jQuery à l'intérieur de votre contrôle côté client application.

optimiser la performance des sélecteurs complexes

interroger un sous-ensemble du DOM en utilisant des sélecteurs complexes améliore considérablement les performances:

var subset = $("");

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

en Parlant de trucs et Astuces et des tutoriels. J'ai trouvé ces séries de tutoriels ( "jQuery pour les débutants absolus" série vidéo) par Jeffery Way sont très utiles.

Il cible les développeurs qui sont nouveaux à jQuery. Il montre comment créer beaucoup de choses cool 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 c'est facile à utiliser jQuery. Maintenant je l'aime et je peux lire et comprendre toutes les script jQuery, même si c'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 - css style...

<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>

fortement recommander ces tutoriel...

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

asynchrone chaque() fonction

si vous avez really complex documents où l'exécution de la fonction jquery each () bloque le navigateur pendant l'itération, et/ou Internet Explorer apparaît le ' voulez-vous continuer à exécuter ce script " message, Cette solution sauvera le jour.

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 dont vous pouvez l'utiliser est juste comme chaque ():

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

An 2e paramètre optionnel vous permet de spécifier la vitesse / délai entre les itérations qui peut être utile pour les animations ( l'exemple suivant attendra 1 seconde entre les itérations ):

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

rappelez-vous que puisque cela fonctionne asynchrone, vous ne pouvez pas compter sur le itérations à compléter avant la ligne suivante du code, 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é, il a fonctionné pour ce dont nous avions besoin, donc j'espère que certains d'entre vous le trouvent utile. Merci -

abréviations Syntaxiques-sucre-chose--Cache un objet de collection et d'exécuter des commandes sur une seule ligne:

au lieu de:

var jQueryCollection = $("");

jQueryCollection.command().command();

je n':

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

un cas d'utilisation un peu "réelle" pourrait être quelque chose du genre:

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

j'aime déclarer une variable $this au début des fonctions anonymes, donc je sais que je peux me référer à un jQueried ceci.

Comme suit:

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

    // Other code
});

Enregistrer jQuery Objets dans des Variables pour la Réutilisation

sauvegarder un objet jQuery dans une variable vous permet de le réutiliser sans avoir à chercher à travers le DOM pour le trouver.

(comme @Louis l'a suggéré, j'utilise maintenant $ pour indiquer qu'une variable détient 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...

comme exemple plus complexe, dites que vous avez une liste d'aliments dans un magasin, et vous voulez montrer seulement 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 organic et lowfat , et les produits ont les classes correspondantes - .organic , etc.

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

maintenant vous pouvez continuer à travailler avec cet objet jQuery. Chaque fois qu'une case à cocher est cochée (pour cocher ou décocher), commencez par la liste principale des aliments et filtrez vers le bas 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 ont déjà été mentionnés, donc celui-ci est juste un petit ajout.

le petit bout est le jQuery.chaque objet, callback) de la fonction. Tout le monde utilise probablement le jQuery .chaque (callback) fonction pour itérer sur l'objet jQuery lui-même parce qu'il est naturel. Le jQuery.chaque fonction utilitaire (objet, callback) itère des objets et des tableaux. Pendant longtemps, je n'ai d'une façon ou d'une autre pas vu ce que cela pouvait être à part une syntaxe différente (je n'ai pas l'esprit d'écrire toutes les boucles façonnées), et je suis un peu honteux que j'ai réalisé sa force principale que récemment.

la chose est que depuis le corps de la boucle à jQuery.chaque (objet, callback) est une fonction , vous obtenez un nouvelle portée chaque fois dans la boucle qui est particulièrement commode lorsque vous créez 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, quand vous invoquez les fonctions dans le tableau functions , vous obtiendrez trois fois alerte avec le contenu undefined qui est très probablement pas ce que vous vouliez. Le problème est qu'il n'y a qu'une seule variable i , et les trois fermetures s'y réfèrent. Lorsque la boucle est terminée, la valeur finale de i est de 3, et someArrary[3] est undefined . Vous pourriez contourner cela 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 invoquez 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 pouviez pas faire vous-même, mais c'est bien d'avoir.

Accès des fonctions jQuery comme vous le feriez 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 plus courte de...

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

peu de cas d'utilisation pour cela. Jamais le moins, je pense que c'est chouette :)

mise à Jour

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

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

mise à jour:

il suffit d'inclure ce script sur le site et vous obtiendrez une console Firebug qui apparaît pour le débogage dans n'importe quel navigateur. Pas tout à fait aussi complet présenté, mais il est encore assez utile! N'oubliez pas de l'enlever lorsque vous avez terminé.

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

voir ce lien:

De CSS Astuces

mise à jour: J'ai trouvé quelque chose de nouveau, c'est la boîte chaude JQuery.

JQuery Hotbox

Google héberge plusieurs bibliothèques JavaScript sur Google Code. Le charger à partir de là permet d'économiser de la bande passante et il se 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 utiliser ceci pour dire quand une image est complètement chargée.

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

"console.info" de firebug, que vous pouvez utiliser pour vider les messages et les variables à l'écran sans avoir à utiliser des boîtes d'alerte. "console.temps" vous permet de configurer un minuteur pour envelopper un tas de code et de 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');

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

$('.class:first')

la même sélection peut être faite en utilisant:

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

qui est doit plus rapide parce que la sélection initiale de '.la classe " est QSA compatible

enlever des éléments d'une collection et préserver la possibilité de les conserver

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 fonction filter() 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.

changer le type d'un élément d'entrée

j'ai rencontré ce problème lorsque j'ai essayé 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 de 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, comme la validation de champs de formulaires ou l'analyse d'url. Il est intéressant de voir ce qu'il en est donc vous saurez quand vous rencontrez la prochaine exigence JavaScript.

lignes-bris et possibilité de chaîne

lors de l'enchaînement d'appels multiples sur des recouvrements...

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

vous pouvez augmenter la lisibilité avec linebreaks. Comme ceci:

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

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

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

utilisant des fonctions anonymes auto-exécutables dans un appel de méthode tel que .append() pour itérer à travers 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();
}()));

j'utilise ceci pour itérer à travers des choses qui seraient grandes et inconfortables pour sortir de mon enchaînement à construire.

HTML5 attributs de données de soutien, sur les stéroïdes!

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

récemment, l'équipe de jQuery a ajouté le soutien pour HTML5 données personnalisées - * attributs . Et comme si cela ne suffisait pas, ils ont forcé la fonction de données avec des stéroïdes, ce qui signifie que vous êtes en mesure de stocker objets complexes sous forme de JSON, directement dans votre markup.

the 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!