☰

Οι επιλογείς (selectors)

Η jquery (όπως και η javascript) για να επεξεργαστεί ένα ή περισσότερα στοιχεία (elements) ή ετικέτες (tags) ή αντικείμενα (objects), πρέπει πρώτα να τα επιλέξει και αν δεν υπάρχουν να τα δημιουργήσει.

Για την επιλογή μιας η περισσοτέρων ετικετών η jquery χρησιμοποιεί τη συνάρτηση $() η οποία είναι μια σύντμηση της jQuery() και τους επιλογείς (selectors) των css.

$('p') 	//επιλέγει όλες τις ετικέτες (p)
$('p#main') 	//επιλέγει την ετικέτα (p) με id=main
$('#main') 	//επιλέγει την ετικέτα με id=main
$('.main') 	//επιλέγει τις ετικέτες με class=main
$('*') 	//επιλέγει όλες τις ετικέτες
$("[href]") 	//επιλέγει όλες τις ετικέτες που έχουν την ιδιότητα href
$("a[target='_blank']")	// επιλέγει τις ετικέτες a με target='_blank'
$('p', 'div') 	//επιλέγει όλες τις ετικέτες p και div
$('div' 'p') 	//επιλέγει όλες τις ετικέτες p που βρίσκονται μέσα σε ετικέτα div.

Εκτεταμένοι επιλογείς (Φίλτρα)

Οι εκτεταμένοι επιλογείς λειτουργούν όπως και οι κανονικοί επιλογείς αλλά τους χρησιμοποιούμε περισσότερο όταν έχουμε ήδη επιλέξει μια συλλογή ετικετών και θέλουμε μέσα από αυτή να κάνουμε μια πιο ειδική επιλογή (φιλτράρισμα).

Οι εκτεταμένοι επιλογείς αποτελούν μια επέκταση των επιλογέων τύπου css που είδαμε παραπάνω.

$(":first")   //επιλέγει την πρώτη ετικέτα από το έγγραφο ή μέσα από μια συλλογή δείτε παραδείγματα παρακάτω.
$(":last")   //επιλέγει την πρώτη ετικέτα από το έγγραφο ή μέσα από μια συλλογή
$(":odd")   //επιλέγει τις μονές ετικέτες
$(":even")   //επιλέγει τις ζυγές ετικέτες
$(":lt(index)")   //επιλέγει όλες τις ετικέτες που βρίσκονται σε θέση μικρότερη του index [π.χ.: $(":lt(5)")]
$(":gt(index)")   //επιλέγει όλες τις ετικέτες που βρίσκονται σε θέση μεγαλύτερη του index [π.χ.: $(":gt(5)")]
$(":eq(index)")   //επιλέγει την ετικέτα που βρίσκεται στη θέση index [π.χ.: $(":eq(5)")]
$(":contains('text')")   //επιλέγει όλες τις ετικέτες που περιέχουν το κείμενο 'text'.

Άλλοι εκτεταμένοι επιλογείς είναι:

$(":button")  //επιλέγει όλα τα κουμπιά
$(":checkbox")  //επιλέγει όλες τις ετικέτες τύπου checkbox
$(":header")  //επιλέγει h1, h2, h3 ...
$(":hidden")  //επιλέγει όλες τις hidden
$(":image")  //επιλέγει όλες τις image
$(":input")  //επιλέγει όλες τις ετικέτες τύπου input
$(":parent")  //επιλέγει όλες που είναι parent (δηλαδή έχουν ένα παιδί τουλάχιστόν)
$(":password")  //επιλέγει όλες τις ετικέτες τύπου password
$(":radio")  //επιλέγει όλες τις ετικέτες τύπου radiobutton
$(":selected")  //επιλέγει όλες τις selected
$(":text")  //επιλέγει όλες τις ετικέτες τύπου text
$(":visible")  //επιλέγει όλες τις ετικέτες τύπου visible

Σε νεότερες εκδόσεις έχουν αντικατασταθεί οι περισότεροι επιλογείς με το πρόθεμα : σε κανονικές συναρτήσεις όπως παρακάτω.

:even     .even()
:odd      .odd()
:eq       .eq()
:gt       .slice()
:lt       .slice()
:last     .last()
:first    .first()

Έτσι, για παράδειγμα η εντολή:

$("td:eq(2)")

Αλλάζει σε:

$("td").eq(3)

Στη δεύερη επιλογή η αρίθμηση αρχίζει από το 1 ενώ στην πρώτη από 0.

Το ίδιο ισχύει και για τις υπόλοιπες.