Suggerimenti e trucchi per jQuery

Sintassi

• Stenografia per il pronto evento di roosteronacid
• Interruzioni di linea e incatenabilità di roosteronacid
• Filtri di nidificazione di Nathan Long
• Memorizza nella cache una raccolta ed esegui comandi sulla stessa riga di roosteronacid
• Contiene selettore di roosteronacid
• Definizione delle proprietà alla creazione dell'elemento da parte di roosteronacid
• Accedi alle funzioni di jQuery come faresti con un array di roosteronacid
• La funzione noConflict - Liberare la variabile $ da Oli
• Isola la variabile $ in modalità noConflict da nickf
• Modalità senza conflitto di roosteronacid

Archivio dati

• La funzione dati - associa i dati agli elementi di TenebrousX
• Supporto per attributi di dati HTML5, su steroidi! di roosteronacid
• Il plug-in per metadati jQuery di Filip Dupanović

Ottimizzazione

• Ottimizza le prestazioni di selettori complessi con roosteronacid
• Il parametro di contesto di lupefiasco
• Salva e riutilizza le ricerche di Nathan Long
• Creazione di un elemento HTML e mantenimento di un riferimento, Verifica dell'esistenza di un elemento, Scrittura dei selettori da parte di Andreas Grech

miscellaneo

• Controlla l'indice di un elemento in una raccolta di redsquare
• Gestori di eventi live di TM
• Sostituisci le funzioni anonime con le funzioni con nome di ken
• Microsoft AJAX framework e jQuery bridge di Slace
• Tutorial jQuery di egyamado
• Rimuovi elementi da una raccolta e preserva la catenabilità di roosteronacid
• Dichiarare $ questo all'inizio delle funzioni anonime di Ben
• FireBug Lite, plug-in Hotbox, indica quando un'immagine è stata caricata e Google CDN di Color Blend
• Uso giudizioso di script jQuery di terze parti da parte di harriyott
• Ogni funzione di Jan Zich
• Modulo di estensione plug-in di Chris S
• Asincrona ogni funzione di OneNerd
• Il plug-in del modello jQuery: implementazione di una logica complessa usando le funzioni di rendering di roosteronacid

Creazione di un elemento HTML e mantenimento di un riferimento

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

Verifica dell'esistenza di un elemento

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

Scrivi i tuoi selettori

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

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

Il data()metodo di jQuery è utile e poco noto. Ti consente di associare i dati agli elementi DOM senza modificare il DOM.

Filtri di nidificazione

Puoi annidare i filtri (come mostrato da Nickf qui ).

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

Non sono davvero un fan della $(document).ready(fn)scorciatoia. Sicuramente riduce il codice ma riduce anche la leggibilità del codice. Quando vedi $(document).ready(...), sai cosa stai guardando. $(...)è usato in troppi altri modi per dare immediatamente un senso.

Se hai più framework puoi usare jQuery.noConflict();come dici tu, ma puoi anche assegnare una variabile diversa per questo in questo modo:

var $j = jQuery.noConflict();

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

Molto utile se si dispone di diversi framework che possono essere ridotti a $x(...)chiamate in stile.

Ooooh, non dimentichiamoci dei metadati di jQuery ! La funzione data () è ottima, ma deve essere popolata tramite chiamate jQuery.

Invece di infrangere la conformità W3C con attributi di elementi personalizzati come:

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

Usa invece i metadati:

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

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

Gestori di eventi live

Imposta un gestore eventi per qualsiasi elemento corrispondente a un selettore, anche se viene aggiunto al DOM dopo il caricamento della pagina iniziale:

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

Ciò consente di caricare i contenuti tramite Ajax o di aggiungerli tramite JavaScript e di configurare automaticamente i gestori di eventi per tali elementi.

Allo stesso modo, per interrompere la gestione degli eventi live:

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

Questi gestori di eventi live hanno alcune limitazioni rispetto agli eventi regolari, ma funzionano alla grande per la maggior parte dei casi.

Per ulteriori informazioni, consultare la documentazione di jQuery .

AGGIORNAMENTO: live()e die()sono obsoleti in jQuery 1.7. Vedere http://api.jquery.com/on/ e http://api.jquery.com/off/ per funzionalità di sostituzione simili.

UPDATE2: live()è stato a lungo deprecato, anche prima di jQuery 1.7. Per le versioni jQuery 1.4.2+ precedenti alla 1.7 utilizzare delegate()e undelegate(). L' live()esempio ( $('button.someClass').live('click', someFunction);) può essere riscritta utilizzando delegate()così: $(document).delegate('button.someClass', 'click', someFunction);.

Sostituisci funzioni anonime con funzioni denominate. Questo sostituisce davvero il contesto jQuery, ma entra in gioco più come quando si utilizza jQuery, a causa della sua dipendenza dalle funzioni di callback. I problemi che ho con le funzioni anonime incorporate sono che sono più difficili da eseguire il debug (molto più facile guardare un callstack con funzioni con nomi distinti, anziché 6 livelli di "anonimo"), e anche il fatto che più funzioni anonime all'interno della stessa jQuery-chain può diventare ingombrante da leggere e / o mantenere. Inoltre, le funzioni anonime in genere non vengono riutilizzate; d'altra parte, dichiarare le funzioni nominate mi incoraggia a scrivere codice che ha maggiori probabilità di essere riutilizzato.

Un'illustrazione; invece di:

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

Preferisco:

function onState(){
    // do something
}

function offState(){
    // do something else
}

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

Definizione delle proprietà alla creazione dell'elemento

In jQuery 1.4 puoi usare un oggetto letterale per definire le proprietà quando crei un elemento:

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

... Puoi anche aggiungere stili:

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

Ecco un link alla documentazione .

invece di usare un diverso alias per l'oggetto jQuery (quando si usa noConflict), scrivo sempre il mio codice jQuery avvolgendolo in una chiusura. Questo può essere fatto nella funzione document.ready:

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

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

in alternativa puoi farlo in questo modo:

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

Trovo che questo sia il più portatile. Ho lavorato su un sito che utilizza sia Prototype che jQuery contemporaneamente e queste tecniche hanno evitato tutti i conflitti.

Controlla l'indice

jQuery ha .index ma è una seccatura da usare, poiché è necessario l'elenco di elementi e passare l'elemento di cui si desidera l'indice di:

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

Quanto segue è molto più semplice:

Se si desidera conoscere l'indice di un elemento all'interno di un set (ad es. Voci di elenco) all'interno di un elenco non ordinato:

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

Stenografia per il pronto evento

Il modo esplicito e dettagliato:

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

La stenografia:

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

Sulla funzione jQuery principale, specificare il parametro context oltre al parametro selector. La specifica del parametro di contesto consente a jQuery di iniziare da un ramo più profondo nel DOM, piuttosto che dalla radice DOM. Dato un DOM abbastanza grande, specificare il parametro di contesto dovrebbe tradursi in miglioramenti delle prestazioni.

Esempio: trova tutti gli ingressi di tipo radio nel primo modulo nel documento.

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

Riferimento: http://docs.jquery.com/Core/jQuery#expressioncontext

Non solo jQuery, ma ho creato un piccolo ponte per jQuery e MS AJAX:

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

È davvero bello se stai facendo un sacco di ASP.NET AJAX, dal momento che jQuery è supportato da MS che ora ha un bel ponte significa che è davvero facile fare operazioni jQuery:

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

Quindi l'esempio sopra non è eccezionale, ma se stai scrivendo controlli server ASP.NET AJAX, è facile avere jQuery nella tua implementazione di controllo lato client.

Ottimizza le prestazioni di selettori complessi

Interrogare un sottoinsieme del DOM quando si utilizzano selettori complessi migliora drasticamente le prestazioni:

var subset = $("");

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

Parlando di suggerimenti e trucchi e anche di alcuni tutorial. Ho trovato queste serie di tutorial (la serie di video "jQuery per Absolute Beginners") di Jeffery Way sono MOLTO DI aiuto.

Si rivolge a quegli sviluppatori che sono nuovi a jQuery. Mostra come creare molte cose interessanti con jQuery, come l'animazione, la creazione e la rimozione di elementi e altro ...

Ho imparato molto da questo. Mostra come è facile usare jQuery. Ora lo adoro e posso leggere e comprendere qualsiasi script jQuery anche se è complesso.

Ecco un esempio che mi piace " Ridimensionare il testo "

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

Consiglio vivamente questi tutorial ...

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

Ciascuna () funzione asincrona

Se hai documenti davvero complessi in cui l'esecuzione di jquery ogni () funzione blocca il browser durante l'iterazione e / o Internet Explorer apre il messaggio " vuoi continuare a eseguire questo script ", questa soluzione salverà il giorno.

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

Il primo modo in cui puoi usarlo è proprio come ogni ():

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

Un secondo parametro facoltativo consente di specificare la velocità / ritardo tra le iterazioni che può essere utile per le animazioni ( il seguente esempio attenderà 1 secondo tra le iterazioni ):

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

Ricorda che poiché funziona in modo asincrono, non puoi fare affidamento sulle iterazioni da completare prima della prossima riga di codice, ad esempio:

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

Ho scritto questo per un progetto interno e, sebbene sia sicuro che possa essere migliorato, ha funzionato per ciò di cui avevamo bisogno, quindi spero che alcuni di voi lo trovino utile. Grazie -

Sintattica stenografia-zucchero-cosa: memorizza nella cache una raccolta di oggetti ed esegui comandi su una riga:

Invece di:

var jQueryCollection = $("");

jQueryCollection.command().command();

Lo voglio:

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

Un caso d'uso un po '"reale" potrebbe essere qualcosa del genere:

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

Mi piace dichiarare una $thisvariabile all'inizio di funzioni anonime, quindi so di poter fare riferimento a jQueried this.

Così:

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

    // Other code
});

Salvare gli oggetti jQuery in variabili per il riutilizzo

Il salvataggio di un oggetto jQuery in una variabile consente di riutilizzarlo senza dover cercare nuovamente nel DOM per trovarlo.

(Come suggerito da @Louis, ora uso $ per indicare che una variabile contiene un oggetto 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...

Come esempio più complesso, supponiamo che tu abbia un elenco di alimenti in un negozio e desideri mostrare solo quelli che corrispondono ai criteri di un utente. Hai un modulo con caselle di controllo, ognuna contenente un criterio. Le caselle di controllo hanno nomi come organice lowfate i prodotti hanno classi corrispondenti - .organic, ecc.

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

Ora puoi continuare a lavorare con quell'oggetto jQuery. Ogni volta che si fa clic su una casella di spunta (per selezionare o deselezionare), iniziare dall'elenco principale degli alimenti e filtrare verso il basso in base alle caselle selezionate:

// 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();
});

Sembra che la maggior parte dei suggerimenti interessanti e importanti siano già stati menzionati, quindi questo è solo una piccola aggiunta.

Il piccolo suggerimento è la funzione jQuery.each (oggetto, callback) . Probabilmente tutti usano jQuery.each (callback) per sull'oggetto jQuery stesso perché è naturale. La funzione di utilità jQuery.each (oggetto, callback) scorre su oggetti e matrici. Per molto tempo, in qualche modo non ho visto che cosa potesse essere a parte una diversa sintassi (non mi dispiace scrivere tutti i loop di moda), e mi vergogno un po 'di aver realizzato la sua forza principale solo di recente.

Il fatto è che, poiché il corpo del ciclo in jQuery.each (oggetto, callback) è una funzione , si ottiene un nuovo ambito ogni volta nel ciclo, il che è particolarmente conveniente quando si creano chiusure nel ciclo.

In altre parole, un tipico errore comune è fare qualcosa del tipo:

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

Ora, quando invochi le funzioni functionsnell'array, riceverai tre volte un avviso con il contenuto undefinedche molto probabilmente non è quello che volevi. Il problema è che esiste solo una variabile ie tutte e tre le chiusure si riferiscono ad essa. Al termine del ciclo, il valore finale di iè 3 ed someArrary[3]è undefined. Potresti aggirarlo chiamando un'altra funzione che creerebbe la chiusura per te. Oppure usi l'utilità jQuery che praticamente lo farà per te:

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

Ora, quando invochi le funzioni, ricevi tre avvisi con il contenuto 1, 2 e 3 come previsto.

In generale, non è niente che tu non possa fare da solo, ma è bello averlo.

Accedi alle funzioni di jQuery come faresti con un array

Aggiungi / rimuovi una classe basata su un valore booleano ...

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

È la versione più breve di ...

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

Non ci sono molti casi d'uso per questo. Mai meno; Penso che sia pulito :)

Aggiornare

Nel caso in cui tu non sia il tipo di lettura dei commenti, ThiefMaster sottolinea che toggleClass accetta un valore booleano , che determina se aggiungere o rimuovere una classe. Quindi, per quanto riguarda il mio codice di esempio sopra, questo sarebbe l'approccio migliore ...

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

Aggiornare:

Includi questo script sul sito e otterrai una console Firebug che si aprirà per il debug in qualsiasi browser. Non abbastanza completo ma è ancora abbastanza utile! Ricordati di rimuoverlo quando hai finito.

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

Dai un'occhiata a questo link:

Dai trucchi CSS

Aggiornamento: ho trovato qualcosa di nuovo; è il JQuery Hotbox.

JQuery Hotbox

Google ospita diverse librerie JavaScript su Google Code. Caricandolo da lì si risparmia larghezza di banda e si carica rapidamente perché è già stato memorizzato nella 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>

O

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

Puoi anche usarlo per sapere quando un'immagine è completamente caricata.

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

Il "console.info" di firebug, che puoi usare per scaricare messaggi e variabili sullo schermo senza usare caselle di avviso. "console.time" ti consente di impostare facilmente un timer per avvolgere un sacco di codice e vedere quanto tempo impiega.

console.time('create list');

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

console.timeEnd('create list');

Usa i metodi di filtro su pseudo-selettori quando possibile, così jQuery può usare querySelectorAll (che è molto più veloce di sfrigolare). Considera questo selettore:

$('.class:first')

La stessa selezione può essere effettuata usando:

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

Che è più veloce perché la selezione iniziale di '.class' è compatibile con QSA

Rimuovi elementi da una raccolta e preserva la catenabilità

Considera quanto segue:

<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()funzione rimuove elementi dall'oggetto jQuery. In questo caso: verranno rimossi tutti gli elementi li che non contengono il testo "Uno" o "Due".

Modifica del tipo di un elemento di input

Ho riscontrato questo problema durante il tentativo di modificare il tipo di un elemento di input già collegato al DOM. Devi clonare l'elemento esistente, inserirlo prima del vecchio elemento e quindi eliminare il vecchio elemento. Altrimenti non funziona:

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

Uso giudizioso di script jQuery di terze parti, come la convalida del campo modulo o l'analisi dell'URL. Vale la pena vedere di cosa si tratta, quindi saprai quando incontrerai un requisito JavaScript.

Interruzioni di linea e catenabilità

Quando si concatenano più chiamate su raccolte ...

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

È possibile aumentare la leggibilità con le interruzioni di riga. Come questo:

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

Utilizzare .stop (true, true) quando si attiva un'animazione per impedirle di ripetere l'animazione. Ciò è particolarmente utile per le animazioni di rollover.

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

Utilizzo di funzioni anonime autoeseguite in una chiamata di metodo tale da .append()iterare attraverso qualcosa. IE:

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

Lo uso per iterare cose che sarebbero grandi e scomode per uscire dalla mia catena per costruire.

Supporto degli attributi di dati HTML5, sugli steroidi!

La funzione dati è stata menzionata in precedenza. Con esso, puoi associare i dati agli elementi DOM.

Recentemente il team di jQuery ha aggiunto il supporto per gli attributi dati * * personalizzati HTML5 . E come se ciò non bastasse; hanno alimentato forzatamente la funzione dati con steroidi, il che significa che sei in grado di memorizzare oggetti complessi sotto forma di JSON, direttamente nel tuo markup.

HTML:

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

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!