XPath selectors

Custom selectors

Oltre a selettori XPath e CSS, JQuery mette a disposizione selettori propri della libreria. Sono tantissimi. Ecco i principali che sono detti anche pseudo selettori per la somiglianza con gli pseudo selettori CSS, essendo preceduti dalla sintassi dei due punti

':eq' - serve ad individuare la posizione di un elemento nell'array - Es. $('div.horizontal:eq(1)') : trova il secondo div che ha classe .horizontal (CSS selector: $('div:nth-child(1)') - I CSS selector sono 1 based, i CUSTOM SELECTOR 0 based)

':odd' e ':even' - servono soprattutto per le righe delle tabelle (dispari e pari) - Es. $('tr:odd') - $('tr:even')

':contains' - per individuare un elemento con un particolare contenuto - Es. $('td:contains("Henry")')

Ecco un esempio di formattazione di una tabella usando questo tipo di sintassi:

CSS code:

.odd { background-color: #ffc; }
.even { background-color: #cef; }
.highlight { font-weight:bold; color: #f00; }

Javascript code:

$(document).ready(function() {
$('tr:odd').addClass('odd');
$('tr:even').addClass('even');
$('td:contains("Henry")').addClass('highlight');
});

<table>
	<tr>
		<td>As You Like It</td>
		<td>Comedy</td>
	</tr>
	<tr>
		<td>All's Well that Ends Well</td>
		<td>Comedy</td></tr>
	<tr>
		<td>Hamlet</td>
		<td>Tragedy</td>
	</tr>
	<tr>
		<td>Macbeth</td>
		<td>Tragedy</td>
	</tr>
	<tr>
		<td>Romeo and Juliet</td>
		<td>Tragedy</td>
	</tr>
	<tr>
		<td>Henry IV, Part I</td>
		<td>History</td>
	</tr>
	<tr>
		<td>Henry V</td>
		<td>History</td>
	</tr>
</table>

As You Like It	Comedy
All's Well that Ends Well	Comedy
Hamlet	Tragedy
Macbeth	Tragedy
Romeo and Juliet	Tragedy
Henry IV, Part I	History
Henry V	History