Il nucleo di jQuery
Indice
$('h1').remove();
Tuttavia, ci sono metodi che fanno parte del namespace $ e sono considerati come metodi del nucleo di jQuery.
Queste distinzioni possono essere molto confuse per i nuovi utenti. Per evitare confusione, ricordare questi due punti:
- I metodi utilizzati nelle selezioni si trovano all’interno dello spazio dei nomi $.fn, e automaticamente ricevono e restituiscono una selezione in sè.
- Metodi nello spazio dei nomi $ sono generalmente metodi per diverse utilità, non lavorano con le selezioni, non vengono passati argomenti e valore di ritorno può variare.
Ci sono alcuni casi in cui i metodi dell’oggetto e del nucleo hanno gli stessi nomi, come succede con $.each e $.fn.each. In questi casi, è necessario fare attenzione a leggere attentamente la documentazione per sapere quale oggetto usare in modo corretto.
$
. Questi metodi sono di grande aiuto per svolgere compiti di routine di programmazione.Di seguito alcuni esempi, per una documentazione completa visita http://api.jquery.com/category/utilities/.
$.trim
$.trim(' stringa con più spazi vuoti '); // restituisce 'stringa con più spazi vuoti'
$.each([ 'foo', 'bar', 'baz' ], function(idx, val) { console.log('elemento ' + idx + 'es ' + val); }); $.each({ foo : 'bar', baz : 'bim' }, function(k, v) { console.log(k + ' : ' + v); });
var myArray = [ 1, 2, 3, 5 ]; if ($.inArray(4, myArray) !== -1) { console.log('valore trovato!'); }
var firstObject = { foo : 'bar', a : 'b' }; var secondObject = { foo : 'baz' }; var newObject = $.extend(firstObject, secondObject); console.log(firstObject.foo); // 'baz' console.log(newObject.foo); // 'baz'
var firstObject = { foo : 'bar', a : 'b' }; var secondObject = { foo : 'baz' }; var newObject = $.extend({}, firstObject, secondObject); console.log(firstObject.foo); // 'bar' console.log(newObject.foo); // 'baz'
var myFunction = function() { console.log(this); }; var myObject = { foo : 'bar' }; myFunction(); // restituisce l'oggetto window var myProxyFunction = $.proxy(myFunction, myObject); myProxyFunction(); // restituisce l'oggetto myObject
var myObject = { myFn : function() { console.log(this); } }; $('#foo').click(myObject.myFn); // registra el elemento DOM #foo $('#foo').click($.proxy(myObject, 'myFn')); // registra myObject
4.1: Verificare il tipo di un determinato valore
var myValue = [1, 2, 3]; // Utilizzare l'operatore typeof di JavaScript // per controllare tipi primitivi typeof myValue == 'string'; // false (falso) typeof myValue == 'number'; // false (falso) typeof myValue == 'undefined'; // false (falso) typeof myValue == 'boolean'; // false (falso) // Utilizzare l'operatore di uguaglianza rigorosa // per controllare i valori nulli myValue === null; // false (falso) // Utilizzare metodi di jQuery per testare // i tipi non primitivi jQuery.isFunction(myValue); // false (falso) jQuery.isPlainObject(myValue); // false (falso) jQuery.isArray(myValue); // true (vero)
4.2: Salvare e recuperare informazioni relative a un elemento
$('#myDiv').data('keyName', { foo : 'bar' }); $('#myDiv').data('keyName'); // { foo : 'bar' }
Per esempio, se si vuole stabilire una relazione tra l’item di una lista e il div che è all’interno di questo item, è possibile farlo ogni volta che si interagisce con l’item, ma una soluzione migliore è farlo una sola volta, salvando un puntatore al div utilizzando il metodo $.fn.data:
4.3: Relazione tra gli elementi utilizzando il metodo $.fn.data
$('#myList li').each(function() { var $li = $(this), $div = $li.find('div.content'); $li.data('contentDiv', $div); }); // poi, non si deve tornare a cercare al div; // è possibile leggerlo dall'informazione // associata all'item della lista var $firstLi = $('#myList li:first'); $firstLi.data('contentDiv').html('nuovo contenuto');
Per tali situazioni, jQuery fornisce l’oggetto $.support
e $.browser
(quest’ultimo non più utilizzato). Una documentazione completa su questi oggetti si trovano in http://api.jquery.com/jQuery.support/ e http://api.jquery.com/jQuery.browser/
L’obiettivo di $.support è quello di determinare quali caratteristiche supporta il browser.
L’oggetto $.browser rileva il tipo di browser e la sua versione. Questo oggetto è deprecato (anche se nel breve termine non è previsto l’eliminazione dal nucleo della libreria) e si raccomanda utilizzare l’oggetto $.support per questi scopi.
Quando jQuery è impostato in modo “non-conflitto”, la libreria offre la possibilità di assegnare un nome per sostituire la variabile $.
4.4: Mettere jQuery in modo non-conflitto
// la libreria prototype utilizza anche $ <script src="prototype.js"></script> // si carica jquery nella pagina <script src="jquery.js"></script> // se inizializza $j in modo "non-conflitto" <script>var $j = jQuery.noConflict();</script>
4.5: Utilizzare $ all'interno di una funzione anonima auto-eseguibile
<script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); (function($) { // codice va qui, e può utilizzare $ })(jQuery); </script>
Ancora nessun commento