Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Aggiungere selettori

Analisi di uno dei metodi per estendere facilmente le funzionalità della libreria
Analisi di uno dei metodi per estendere facilmente le funzionalità della libreria
Link copiato negli appunti

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.


Ti consigliamo anche