JavaScript  »  Guide  »  Guida jQuery 

Uno dei maggiori punti di forza di jQuery è la facilità con la quale è possibile estendere le sue funzionalità. Questo può avvenire in tre modi:

• aggiungendo uno pseudo-selettore personalizzato al motore CSS
• aggiungendo un metodo statico (o funzione)
• aggiungendo un metodo (i cosiddetti plugins)

Aggiungere selettori

Come visto nella lezione sui selettori, jQuery offre alcuni pseudo-selettori che non sono rintracciabili nelle specifiche CSS come :hidden o :checked, ma sono stati introdotti dagli sviluppatori come scorciatoie per ricerche molto frequenti.

Nonostante il numero e le caratteristiche di questi pseudo-selettori riescano a coprire la maggior parte delle esigenze di scripting, potremmo voler rendere più snelle alcune operazioni (con conseguente riduzione del codice) aggiungendo degli pseudo-selettori personalizzati.

Tutto ciò è possibile estendo l'oggetto $.expr[':'] con il metodo statico $.extend()già visto nella lezione sulle utlilty:

$.extend($.[":"], {

	nomeselettore : function (elemento) {
		//codice
	} 

});

In sintesi, la funzione nomeselettore andrà a creare lo pseudo-selettore $(":nomeselettore") che opererà da filtro fra gli elementi del DOM e. Come nel metodo .filter(), nomeselettore dovrà restituire true affinché l'elemento sia selezionato.

Per esempio, ecco com'è realizzato lo pseudo-selettore :checked:

$.extend($.[":"], {
	
	checked : function (elem) {
		 //se l'elemento è selezionato restuisce true
		return elem.checked === true;
	} 

});

Nell'esempio precedente è stata utilizzata come filtro una proprietà nativa dei campi di input JavaScript, tuttavia è anche possibile utilizzare metodi propri di jQuery.

Nel prossimo esempio vedremo di ricavare tutti i campi di input in un modulo che siano stati selezionati o compilati:

$.extend($.expr[':'],{
    filled : function(elem) {
        return (
				$('[name='+elem.name+']:radio:checked').length == 1 || 
				$(elem).is(':checkbox:checked') || 
				( $(elem).is('select,:text,textarea') && $(elem).val() != "" )
			);
    }
});;

Come potete vedere, è possibile realizzare pseudo-selettori molto complessi, ma sicuramente molto efficaci e capaci di semplificare il nostro codice in operazioni ripetitive:

if ($(".richiesto").not(":filled").length > 0) {
		alert("Non tutti i campi richiesti sono stati compilati!");
} else {
		alert("I campi obbligatori sono stati compilati!");
}

Ecco questo nuovo pseudo-selettore in azione.

Altri articoli

Altre guide

Altre newsletter