jQuery: è possibile assegnare un elemento DOM a una variabile per un uso futuro?

Question

Sto lavorando a un progetto che utilizza jQuery, che conosco molto più con Mootools.

Inizierò prima con il mio codice.

var customNamespace = { 
    status: 'closed', 
    popup: $('#popup'), 

    showPopup: function() { 
     // ... 
    } 
} 

$(document).ready(function(){ 
    console.log($('#popup')); 
    console.log(customNamespace.popup); 
    console.log($(customNamespace.popup)); 

    $('#popup').fadeIn('slow'); 
    (customNamespace.popup).fadeIn('slow'); 
    $(customNamespace.popup).fadeIn('slow'); 
}); 

Il mio obiettivo è quello di non avere jQuery attraversare il DOM ogni volta che voglio fare qualcosa con il div #popup, così ho voluto salvarlo in una variabile da utilizzare per tutta la mia sceneggiatura.

Quando la pagina viene caricata, la console stampa l'oggetto 3 volte come mi sarei aspettato, quindi ho pensato che per ogni metodo, il fadeIn avrebbe funzionato. Ma non è così, solo

$('#popup').fadeIn('slow'); 

In realtà si sbiadisce nel div.

Anche se io rimuovere il mio spazio dei nomi di hash, e solo salvare l'oggetto ad una variabile globale, e fare un

var globalVariable = $('#popup'); 
. 
. 
. 
globalVariable.fadeIn('slow'); 

Inoltre non funziona come ho pensato che sarebbe. JQuery può fare ciò che sto cercando di fare?

Answer 1

Dove si assegnano le variabili globali?

Se è al di fuori della dichiarazione document.ready, è possibile che si stia assegnando qualcosa che non è stato caricato.

Prova questo:

$(document).ready(function(){ 
    var customNamespace = { 
     status: 'closed', 
     popup: $('#popup'), 

     showPopup: function() { 
      // ... 
     } 
    } 
    console.log($('#popup')); 
    console.log(customNamespace.popup); 
    console.log($(customNamespace.popup)); 

    $('#popup').fadeIn('slow'); 
    (customNamespace.popup).fadeIn('slow'); 
    $(customNamespace.popup).fadeIn('slow'); 
}); 

cosa succede quando si tenta di uscita .length? :

console.log($('#popup').length); 
console.log(customNamespace.popup.length); 
console.log($(customNamespace.popup.length)); 

Answer 2

Certo, funziona. In realtà è una buona cosa migliorare le prestazioni.

Answer 3

si vuole essere attenti che il DOM è effettivamente caricato prima di eseguire il selettore e assegnare alla variabile, ma per il resto è possibile memorizzare un riferimento a un elemento DOM in una variabile senza problemi.

var globalVariable; 

$(document).ready(function(){ 
    globalVariable = $('#popup'); 
    console.log($('#popup')); 
    console.log(globalVariable); 

    $('#popup').fadeIn('slow'); 
    globalVariable.fadeIn('slow'); 
}); 

Answer 4

Tutto ciò che si ottiene indietro dalla $() sarà sempre un oggetto. Il tuo problema è che quando viene assegnato customNamespace e il codice viene eseguito, l'elemento DOM #popup non esiste ancora e in questo caso, ti ritroverai con un oggetto di lunghezza zero in quell'esempio.

Per verificare se hai trovato un oggetto in jQuery, non controlli il risultato per null, ne controlli la lunghezza.

per essere sicuri che i nodi DOM esistono quando viene eseguito il codice, rinviare a domready: metodo di dati

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

Answer 5

Usa ed evitare la memorizzazione dei dati all'interno del DOM. Alcuni sviluppatori hanno l'abitudine di memorizzare i dati in attributi HTML come fx .:

$('selector').attr('alt', 'data being stored'); 

// seguito i dati possono essere recuperati utilizzando: $ ('selettori').attr ('alt');

Gli attributi HTML non sono pensati per memorizzare dati del genere e "alt" come nome di parametro non ha molto senso. L'alternativa giusta nella maggior parte dei casi è l'utilizzo del metodo dati in jQuery. Ti consente di associare i dati con un elemento sulla pagina.

$('selector').data('paramtername', 'data being stored'); 

// poi ottenere i dati con $ ('selettori') dei dati ('paramtername.');

Questo approccio consente di archiviare dati con nomi significativi ed è più flessibile in quanto è possibile memorizzare tutti i dati desiderati su qualsiasi elemento della pagina. Per ulteriori informazioni su data() e removeData(), vedere qui jQuery internals Un uso classico di ciò è il salvataggio del valore predefinito di un campo di input perché si desidera eliminarlo.

 <form id="testform"> 
<input type="text" class="clear" value="Always cleared" /> 
<input type="text" class="clear once" value="Cleared only once" /> 
<input type="text" value="Normal text" /> 
</form> 

$(function() { 
//Go through every input field with clear class using each function 
//(NB! "clear once" is two classes clear and once) 
$('#testform input.clear').each(function(){ 
    //use the data function to save the data 
    $(this).data("txt", $.trim($(this).val())); 
}).focus(function(){ 
    // On focus test for default saved value and if not the same clear it 
    if ($.trim($(this).val()) === $(this).data("txt")) { 
    $(this).val(""); 
    } 
}).blur(function(){ 
    // Use blur event to reset default value in field that have class clear 
    // but ignore if class once is present 
    if ($.trim($(this).val()) === "" && !$(this).hasClass("once")) { 
    //Restore saved data 
    $(this).val($(this).data("txt")); 
    } 
}); 
}); 

Demo qui: link text

Answer 6

mi piace di strutturare il mio script simile a questo. Per me mantiene tutti i miei controlli di pagina insieme. Permette anche a me di mantenere i miei script più facilmente per ogni pagina.

/* CONTROLS GLOBAL */ 
var Controls; 


var Class = { 
    create: function() { 
     return function() { 
      this.initialize.apply(this, arguments); 
     } 
    } 
} 

//Set up page control objects 
PageControls = Class.create(); 
PageControls.prototype = { 
    initialize: function() { 

     //Use jquery to initialize our controls, 
     //one should probably use more appropriate names other than ctrl1, ctrl2 .. 
     //but for demo purposes ... 
     this.ctrl1 = $($("#Control1")); 
     this.ctrl2 = $($("#Control2")); 
     this.ctrl3 = $($("#Control3")); 

    } 
} 

Una volta pronto ...

$(document).ready(function() { 

    /* Initialize our global page controls */ 
    Controls = new PageControls(); 

    //Now we can use our controls 
    Controls.ctrl1.val("Text for control 1"); 
    Controls.ctrl2.val("Text for control 2"); 
    Controls.ctrl3.val("Text for control 3"); 
});