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