Σε προηγούμενα άρθρα έχουμε δεί τα βασικά χαρακτηριστικά της JQuery, και μάθαμε σχεδόν όλα όσα χρειαζόμαστε για να ξεκινήσουμε την περιήγηση μας στον κόσμο της. Σε αυτό το άρθρο θα ασχοληθούμε με ένα ζήτημα που αποτελεί ακρογωνιαίο λίθο στην JQuery, και αυτό είναι οι selectors της πασίγνωστης βιβλιοθήκης Javascript.
Στο τέλος του οδηγού θα μπορούμε:
- Να κάνουμε χρήση των κλασικών JQuery selectors
- Να κάνουμε χρήση των ιεραρχικών JQuery selectors
Προαπαιτούμενα
Εισαγωγή στην JQuery: Μέρος 1ο, Μέρος 2ο (του Παναγιώτη Γρηγορόπουλου)
Πριν ξεκινήσουμε…
… θα ήθελα να επισημάνω ένα – δύο πρακτικά ζητήματα.
Στη συνέχεια παρουσιάζεται ο τρόπος για να επιτευχθούν οι στόχοι που περιγράψαμε στην εισαγωγή. Θα παρατηρήσετε ότι το άρθρο ακολουθεί τη δομή:
Μικρή περιγραφή του τι θέλουμε να επιτύχουμε (+ επιπλέον σχόλια)
Παράδειγμα κώδικα
Στο τέλος του άρθρου θα βρείτε συνημμένο ένα συμπιεσμένο αρχείο που περιέχει:
- Τις δύο εκδόσεις της JQuery
- Συγκεντρωμένα όλα τα παραδείγματα.
Για να χρησιμοποιήσετε ορθά το πακέτο, το μόνο που έχετε να κάνετε είναι να το αποσυμπιέσετε σε κάποιο κατάλογο του συστήματος σας και στη συνέχεια χωρίς να κάνετε καμία αλλαγή στο περιεχόμενο του…
- Κάνοντας διπλό κλικ στα αρχεία τύπου html μπορείτε να δείτε το αποτέλεσμα των παραδειγμάτων.
- Ανοίγοντας τα αρχεία τύπου html με τον αγαπημένο σας επεξεργαστή κειμένου (προσωπικά χρησιμοποιώ τον Notepad++ και ορίζω την γλώσσα προγραμματισμού σε Javascript) μπορείτε να δείτε τον κώδικα (html και JQuery).
Βεβαιωθείτε ότι δεν ξεχάσατε το μάτι της κουζίνας ανοικτό, ετοιμάστε μία κούπα καφέ ή τσάι, βάλτε απαλή μουσική και ξεκινάμε…
Τι είναι οι JQuery Selectors;
Αναρωτηθήκατε ποτέ γιατί η JQuery ονομάστηκε έτσι; Πολλοί από εσάς ίσως αναγνωρίζουν το J σαν συντομογραφία της JavaScript αλλά, το Query που κολλάει;
Θα σας βοηθήσω. Η έννοια query είναι γνωστότερη στην περιοχή των βάσεων δεδομένων όπου περιγράφει μία ερώτηση, μία αναζήτηση αν θέλετε, του χρήστη ως προς τη βάση δεδομένων με σκοπό να του επιστραφεί το σύνολο των εγγραφών, των στοιχείων δηλαδή της βάσης δεδομένων, που ικανοποιούν το ερώτημα αυτό. Σε μία βάση δεδομένων με τα δημογραφικά στοιχεία μιας χώρας για παράδειγμα ενδεικτικά queries θα μπορούσαν να είναι: «Αναζητώ όλους τους άνδρες με ηλικία άνω των 50 ετών», ή «Αναζητώ όλους τους κατοίκους της περιοχής Άνω Πόλη» ή «Αναζητώ γυναίκες μεταξύ 25 και 35 ετών που είναι ανύπαντρες» (ΟΚ το τελευταίο ακούγεται κάπως αλλά εν πάση περιπτώσει αντιλαμβάνεστε πως λειτουργεί ένα query).
Στην JQuery ένα query λειτουργεί με παρόμοιο τρόπο. Αναλαμβάνει να συλλέξει ένα σύνολο από τα στοιχεία που βρίσκονται στην υπό ανάπτυξη ιστοσελίδα ώστε να μπορέσει στη συνέχεια, ο προγραμματιστής, να επέμβει σε αυτά (είτε αισθητικά, είτε λειτουργικά). Τον ρόλο των queries στην JQuery βιβλιοθήκη παίζουν δύο ομάδες συναρτήσεων που ονομάζονται Selectors και Filters αντίστοιχα. Σήμερα θα ασχοληθούμε με τους Selectors.
Κάτι μου θυμίζει…
Αν η παραπάνω συζήτηση σας φαίνεται γνώριμη τότε μάλλον έχετε παρακολουθήσει κάποιο από τα άρθρα που συνιστούμε ως προαπαιτούμενα στην αρχή του άρθρου. Σε αυτά τα δύο άρθρα, ο Παναγιώτης Γρηγορόπουλος έχει περιγράψει το μεγαλύτερο μέρος των βασικών σημείων της βιβλιοθήκης της JQuery και, όπως είναι φυσικό, έχει ασχοληθεί και με το θέμα των Selectors. Σε αυτό εδώ το άρθρο, θα δούμε το ζήτημα αυτό αναλυτικότερα και θα παρουσιάσουμε εξειδικευμένα παραδείγματα. Ακόμη και αν έχετε διαβάσει τα παραπάνω άρθρα, μείνετε μαζί μας. Σας υπόσχομαι ότι δεν θα βαρεθείτε J
JQuery selectors. Πλοηγηθείτε στα στοιχεία της ιστοσελίδας σας.
Για την καλύτερη κατανόηση των εννοιών που παρουσιάζουμε σε αυτό το άρθρο έχω ετοιμάσει ένα δείγμα ιστοσελίδας στο οποίο και θα δουλεύουμε για λίγο καιρό. Το αποτέλεσμα, όταν το ανοίξουμε με τον αγαπημένο μας browser μοιάζει κάπως έτσι:
Αντίστοιχα ο κώδικας του αρχείου χωρίς το κομμάτι της JQuery είναι ο ακόλουθος:
<html> <head> <title>JQuery Selectors | GreekTuts.net</title> </head> <body> <h1 id="header">Μια επικεφαλίδα</h1> <p>Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου. Μια απλή παράγραφος κειμένου.</p> <p id="secondparagraph">Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος. Μία ακόμη παράγραφος.</p> <table> <tr> <td>Δεδομένο 1.1</td> <td>Δεδομένο 1.2</td> <td>Δεδομένο 1.3</td> </tr> <tr> <td>Δεδομένο 2.1</td> <td>Δεδομένο 2.2</td> <td>Δεδομένο 2.3</td> </tr> <tr> <td>Δεδομένο 3.1</td> <td>Δεδομένο 3.2</td> <td class="someclass">Δεδομένο 3.3</td> </tr> </table> <p>3η παράγραφος...</p> <p>4η <b>παράγραφος...</b> ( μπορεί να γίνεται <b>κουραστικό</b> αλλά είναι για καλό σκοπό)</p> </body> </html>
Ας πάμε να εμπλουτίσουμε τον κώδικά μας με λίγο JQuery και να δούμε πως μπορούμε να επιλέξουμε κάποια από τα στοιχεία στην ιστοσελίδα μας. Υπενθυμίζω ότι ο κώδικας JQuery μπαίνει στο τμήμα <head> … </head> της ιστοσελίδας μας και αρχίζει πάντοτε με την συμπερίληψη της βιβλιοθήκης JQuery.
<script src="jquery-1.4.2.min.js"></script>
Στη συνέχεια πρέπει να δηλώσουμε στον browser ότι θέλουμε ο JQuery κώδικάς μας να εκτελεστεί όταν φορτώνεται η ιστοσελίδα. Για τον λόγο αυτό δηλώνουμε την παρακάτω συνάρτηση μέσα στην οποία θα πειραματιστούμε (τώρα και σε όλα τα υπόλοιπα άρθρα της σειράς)
<script>
$("document").ready(function() {
//κώδικας
});
</script>
Μερικοί απλοί selectors
Πριν ξεκινήσουμε 1 – 2 διευκρινήσεις:
- HTML tag: Ένα html tag είναι μια λέξη κλειδί (εντολή) της html. Π.χ. <body>, <p>, <li>, <b>, κλπ.
- .css(…): Συνάρτηση της JQuery που επεμβαίνει στο CSS του στοιχείου που προηγείται της τελείας και επιδρά με τον τρόπο που περιγράφουν τα ορίσματα της παρένθεσης. Στο σημερινό άρθρο θα συναντήσετε την δήλωση css(“border”, “thin solid red”). Αυτό που πρακτικά κάνει είναι να περικλείει το / τα επιλεγμένο(α) στοιχείο(α) σε ένα κόκκινο πλαίσιο ώστε να μπορείτε να δείτε το αποτέλεσμα του JQuery κώδικα κάθε φορά. Θα σας πρότεινα να αγνοήσετε τον τρόπο που λειτουργεί για την ώρα. Επικεντρωθείτε στους selectors.
- Σχόλια JQuery ( // ): Όπως σε κάθε γλώσσα προγραμματισμού έτσι και στην JQuery υπάρχει η δυνατότητα δήλωσης σχολίων. Αυτή γίνεται με την προσθήκη των χαρακτήρων // μπροστά από τη γραμμή που θέλουμε να προσδιορίσουμε ως σχόλιο. Στο σημερινό παράδειγμά μας (που μπορείτε να κατεβάσετε στο τέλος του άρθρου) θα βρείτε συγκεντρωμένους όλους τους selectors που θα παρουσιάσουμε. Για να μην μπερδευτείτε, τους δίνουμε υπό μορφή σχολίων. Κάθε φορά που θέλετε να δοκιμάσετε κάποιον το μόνο που έχετε να κάνετε είναι να αφαιρέσετε το // μπροστά από τη γραμμή που σας ενδιαφέρει (και φυσικά να προσθέσετε // σε όλες τις υπόλοιπες) ώστε να είναι ενεργοποιημένος μόνον ένας selector κάθε φορά.
Επιλογή όμοιων tags
$("p").css("border", "thin solid red")
Ο παραπάνω selector θα επιλέξει όλα τα στοιχεία <p> που βρίσκονται στην ιστοσελίδα μας. Όπως παρατηρείτε ο selector δεν είναι τίποτε άλλο παρά το σήμα κατατεθέν της JQuery (δηλαδή το $) ακολουθούμενο από τον προσδιοριστή που θέλουμε, στην περίπτωσή μας το p κλεισμένο σε παρενθέσεις και διπλά εισαγωγικά. Παρατηρήστε ότι βάζουμε την περιγραφή του tag μόνο, χωρίς τα < > στα οποία περικλείεται κανονικά.
Επιλογή στοιχείων με ίδια κλάση
$(".someclass").css("border", "thin solid red")
Πολλές φορές ρυθμίζουμε την εμφάνιση συγκεκριμένων στοιχείων κάνοντας χρήση κλάσεων CSS. Με τον selector $(“.myClass”) μπορούμε να επιλέξουμε όλα τα στοιχεία της ιστοσελίδας μας που ανήκουν σε αυτήν την κλάση.
Επιλογή στοιχείου με βάση το id
$("#header").css("border", "thin solid red")
Ένας άλλος μηχανισμός που προσφέρεται από τα CSS είναι τα ids. Ο selector $(“#id”) μας επιτρέπει να διαχειριστούμε στοιχεία με ids μέσω της JQuery.
Επιλογή στοιχείων με βάση το tag και την κλάση
$("td.someclass").css("border", "thin solid red")
Είναι εφικτό να υπάρξουν συνδυαστικοί selectors. Ο παραπάνω επιλέγει όλα τα tags τύπου td που όμως ανήκουν στην κλάση someclass.
Επιλογή στοιχείων με βάση το tag, το id και την κλάση
$("p#secondparagraph.someclass").css("border", "thin solid red")
Σε αυτόν τον πολύ συγκεκριμένο selector γίνεται χρήση των μηχανισμών του id και της κλάσης. Πιο συγκεκριμένα θα επιλεγεί εκείνο το στοιχείο με id secondparagraph και κλάση someclass.
Selectors ιεραρχίας
Εκτός από τους παραπάνω selectors υπάρχει και μία ομάδα selectors που σχετίζονται με την ιεραρχία των στοιχείων μέσα με μια ιστοσελίδα. Ας τους δούμε έναν – έναν.
Επιλογή στοιχείων παιδιών
$("tr > td").css("border", "thin solid red")
Ο selector $(“a > b”) επιλέγει όλα τα tags τύπου b που αποτελούν παιδιά του tag a (βρίσκονται δηλαδή ακριβώς ένα επίπεδο κάτω από το b). Στην προκειμένη περίπτωση θα επιλεγούν όλα τα td tags που είναι άμεσα παιδιά ενός tr tag (μην βιαστείτε να σκεφθείτε… «μα ένα td πάντα περιέχεται σε ένα tr» γιατί τα μάτια μου έχουν δει πολλά J ).
Επιλογή απογόνων
$("p b").css("border", "thin solid red")
Λειτουργεί όπως και ο a > b selector με τη διαφορά ότι δεν περιορίζεται σε άμεσα παιδιά. Με τον selector $(“a b”) μας επιστρέφεται μία λίστα με όλα τα tags b που αποτελούν απογόνους του a όσα επίπεδα κάτω και αν βρίσκονται από το a.
Επιλογή επομένου στοιχείου
$("table + p").css("border", "thin solid red")
Ο selector $(“a + b”) επιστρέφει το αμέσως επόμενο tag τύπου b που βρίσκεται μετά το tag a. Στο παράδειγμά μας θα επιστραφεί η αμέσως επόμενη παράγραφος μετά τον πίνακα.
Επιλογή συγγενικού στοιχείου (ή αδερφού κόμβου)
$("table ~ p").css("border", "thin solid red")
Ο selector $(“a ~ b”) επιστρέφει όλους τους αδερφούς κόμβους του a που είναι τύπου b. Στο συγκεκριμένο παράδειγμα θα επιστραφούν όλες οι παράγραφοι που αποτελούν συγγενικούς κόμβους του πίνακα της ιστοσελίδα μας.
Δοκιμάστε τα παραδείγματα που συνοδεύουν το άρθρο και πειραματιστείτε. Ως την επόμενη συνάντησή μας…
Να είστε καλά και να φροντίζεται τον εαυτό σας.
Μπορείτε να κατεβάσετε τα αρχεία του βοηθήματος εδώ
Κανένα Σχόλιο