In questo articolo, cercherò di condensare gli snippet di codice più utili che utilizzo spesso nel mio lavoro quotidiano con jQuery. Spero che tra questi che seguono vi sia quello che cercate.
Trasformare un oggetto jQuery in un oggetto DOM
var test = $('#test')[0];
test.className = 'test';
Trasformare un set di oggetti jQuery in una NodeList
var items = $('li', '#test').get();
items[0].className = 'test';
Effettuare il preloading di un oggetto
$(window).load(function() {
var library = new Library();
$(document).ready(function() {
library.init();
});
});
Invertire l'ordine di un set di elementi
var items = $('li', '#test');
var list = $.toArray(items);
var reversed = list.reverse();
Gestire i parametri di un metodo o di una funzione
function createMessage(params) {
var defaults = {
element: 'body',
message: 'Test'
};
params = $.extend(defaults, params);
// ...
}
Verificare l'esistenza di un elemento
if($(element).length > 0) {
//...
}
Gestire le sezioni di un sito in Wordpress
(function($) {
$.isHome = function() {
if(!$('body').hasClass('home')) {
return false;
}
return true;
}
$.isPage = function() {
if(!$('body').hasClass('page')) {
return false;
}
return true;
}
$.isSingle = function() {
if(!$('body').hasClass('single')) {
return false;
}
return true;
}
});
Uso:
$(function() {
if($.isHome()) {
//...
}
});
Eliminare gli hash dai link
$('a', 'body').each(function() {
var $a = $(this);
var href = $a.attr('href');
var more = /#more$/g;
if(more.test(href)) {
$a.attr('href', href.replace(more, ''));
}
});
Gestire più eventi sullo stesso elemento
$('#link').bind('mouseover click', function(event) {
var evtType = event.type;
switch(evtType) {
case 'mouseover':
//...
break;
case 'click':
//...
event.preventDefault();
break;
default:
break;
}
});
Creare un'animazione ripetuta
var timer = setTimeout(function() {
$(element).animate({
height: 200,
width: 200
}, 1000, function() {
$(this).animate({
height: 100,
width: 100
}, 1000);
});
setTimeout(arguments.callee, 2000); // 1000 + 1000 millisecondi
}, 100);
Mostrare e nascondere un indicatore di caricamento AJAX
$.ajaxStart(function() {
$('img#loader').show();
});
$.ajaxSuccess(function() {
$('img#loader').hide();
});