jQuery Selectors

Οι επιλέκτες επιτρέπουν να δράσετε σε ομάδες στοιχείων ή σε μοναδικά στοιχεία.

jQuery Selectors

Στα προηγούμενα κεφάλαια, παρουσιάσαμε μερικά παραδείγματα για το πώς να επιλέξετε στοιχεία HTML.

Κρίσιμη σημείο είναι η μάθηση πώς ο επιλεγμένος επιλέκτης jQuery επιλέγει ακριβώς τα στοιχεία που θέλετε να εφαρμόσετε τα αποτελέσματα.

Οι επιλογές στοιχείων και οι επιλογές ιδιοτήτων jQuery επιτρέπουν την επιλογή των στοιχείων HTML μέσω του ονόματος ετικέτας, του ονόματος ιδιότητας ή του περιεχομένου.

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

Στα όρια του HTML DOM:

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

Επιλογές στοιχείων jQuery

Η jQuery χρησιμοποιεί επιλογές CSS για να επιλέξει στοιχεία HTML.

$("p") επιλέγει το στοιχείο <p>.

$("p.intro") επιλέγει όλα τα στοιχεία <p> με class="intro".

$("p#demo") επιλέγει όλα τα στοιχεία <p> με id="demo".

Επιλογές ιδιοτήτων jQuery

Η jQuery χρησιμοποιεί εκφράσεις XPath για να επιλέξει στοιχεία με δεδομένη ιδιότητα.

$("[href]") επιλέγει όλα τα στοιχεία με την ιδιότητα href.

$("[href='#']") επιλέγει όλα τα στοιχεία με την ιδιότητα href που είναι "#".

$("[href!='#']") επιλέγει όλα τα στοιχεία με την ιδιότητα href που δεν είναι "#".

$("[href$='.jpg']") επιλέγει όλα τα στοιχεία με την ιδιότητα href που τελειώνει με ".jpg".

Επιλογές CSS jQuery

Οι επιλογές CSS jQuery μπορούν να αλλάξουν τις ιδιότητες CSS των στοιχείων HTML.

Το παρακάτω παράδειγμα αλλάζει το χρώμα φόντου όλων των στοιχείων <p> σε κόκκινο:

Παράδειγμα

$("p").css("background-color","red");

Δοκιμάστε個人

Περισσότερες περιπτώσεις επιλογών

Γλώσσα Περιγραφή
$(this) τρέχον στοιχείο HTML
$("p") πάνω από όλα τα στοιχεία <p>
$("p.intro") πάνω από όλα τα στοιχεία <p> με class="intro"
$(".intro") πάνω από όλα τα στοιχεία με class="intro"
$("#intro") στο στοιχείο με id="intro"
$("ul li:first") πρώτο στοιχείο <li> κάθε <ul>
$("[href$='.jpg']") πάνω από όλους τους στοιχεία με την ιδιότητα href που τελειώνει με ".jpg"
$("div#intro .head") στο στοιχείο <div> με id="intro" και όλους τους στοιχεία με class="head"

Για πλήρη έγχειρίδιο αναφοράς, επισκεφθείτε τον Εγχειρίδιο επιλογών jQuery。