XPath selectors

XPath è un linguaggio che serve ad individuare i nodi in un file xml.

JQuery può usare la sintassi XPath insieme ai selettori CSS.

Esempio:

• In questo modo seleziono tutti i link che hanno l'attributo title. Da notare l'uso della 'chiocciola' per identificare gli attributi

  $('a[@title]')

• Qui invece sto selezionando tutti i div che hanno al loro interno una lista ordinata.

  $('div[ol]')

Da notare l'uso delle parentesi quadri che rappresentano ciò che è contenuto nel nodo che le precede. E' l'array dei suoi figli.

Aggiungiamo un po' di stile ai link della nostra lista

Poniamo il caso di voler dare una diversa formattazione a link diversi: per gli indirizzi email, i pdf o le pagine interne del mio sito.

Prima di tutto definisco il mio CSS:

a {
  color: #00f; 
 }

a.mailto {
  color: #f00;
  }

a.pdflink {
  color: #090; 
}

a.mysite {
  text-decoration: none; 
  border-bottom: 1px dotted #00f;
} 

Poi aggiungo l tre classi agli elementi tramite JQuery:

$(document).ready(function() {

  $('a[@href^="mailto:"]').addClass('mailto');

  $('a[@href$=".pdf"]').addClass('pdflink');

  $('a[@href*="mysite.com"]').addClass('mysite');
});

I selettori importanti in questa sintassi sono:

• '^' - indica l'inizio di una stringa.
• '$' - indica la fine di una stringa.
• '*' - indica una stringa in qualsiasi posizione.

E questo è il risultato: XPath selectors sample