Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113
Aggiungere selettori | Guida jQuery | JavaScript HTML.it
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

[!] Ci sono problemi con l'autore. Controllare il mapping sull'Author Manager

.

Questo articolo contiene link di affiliazione: acquisti o ordini effettuati tramite tali link permetteranno al nostro sito di ricevere una commissione nel rispetto del codice etico. Le offerte potrebbero subire variazioni di prezzo dopo la pubblicazione.

Ti consigliamo anche