Επιστροφή στο blog

Τι είναι το jQuery και πώς μπορείτε να το χρησιμοποιήσετε;

Τι είναι το jQuery και πώς μπορείτε να το χρησιμοποιήσετε;

Εισαγωγή

Αν είστε εξοικειωμένοι με τον κόσμο του προγραμματισμού, γνωρίζετε πόσο σημαντικές είναι οι γλώσσες προγραμματισμού. Μερικές από τις πιο κρίσιμες και συχνά χρησιμοποιούμενες περιλαμβάνουν τις HTML, CSS, και JavaScript. Εκεί που η HTML και το CSS σάς βοηθούν να σχεδιάσετε και να δομήσετε τον ιστότοπό σας, η JavaScript σάς επιτρέπει να τον κάνετε διαδραστικό. Υπάρχει ένας αριθμός βιβλιοθηκών JavaScript που μπορείτε να χρησιμοποιήσετε για να προσθέσετε μοναδικά χαρακτηριστικά στο διαδικτυακό σας έργο. Μεταξύ αυτών είναι η βιβλιοθήκη jQuery.

jQuery από μόνη της δεν είναι γλώσσα προγραμματισμού. Είναι ένα εργαλείο που μπορείτε να χρησιμοποιήσετε για να διευκολύνετε την ανάπτυξη ιστού σε JavaScript. Αυτό βοηθά να γίνουν οι εργασίες πιο απλές και ξεκάθαρες. Είναι πασίγνωστη για τη βάση της στη φιλοσοφία «Γράψε λιγότερα, κάνε περισσότερα» (Write Less, Do More). Εκτός από το να κάνει την ανάπτυξη ιστού ευκολότερη, η jQuery σάς προσφέρει επίσης το πρόσθετο πλεονέκτημα της συμβατότητας μεταξύ διαφορετικών προγραμμάτων περιήγησης (cross-browser compatibility). Αυτό σημαίνει ότι ο κώδικας μπορεί να αποδοθεί κατάλληλα ανεξάρτητα από το ποιο πρόγραμμα περιήγησης χρησιμοποιείται για το αποτέλεσμα.

Για να κατανοήσετε καλύτερα πώς η jQuery κάνει τα πράγματα πιο συνοπτικά, σκεφτείτε ένα παράδειγμα. Ας υποθέσουμε ότι γράφουμε το πρόγραμμα «Hello, World!». Δείτε πώς θα εμφανιζόταν σε JavaScript και jQuery αντίστοιχα:

Και οι δύο αυτές γραμμές κώδικα θα αποδώσουν το ίδιο αποτέλεσμα. Ωστόσο, όπως μπορείτε να δείτε, η jQuery κάνει τη γραφή πιο συνοπτική και ουσιαστική.

Σε αυτόν τον οδηγό, θα μάθετε τα πάντα για τα βασικά της jQuery. Μπορείτε να κατεβάσετε το εργαλείο για τον εαυτό σας από αυτόν τον ιστότοπο. Θα προχωρήσουμε σαν να είστε εντελώς αρχάριος χωρίς καμία γνώση σχετικά με την jQuery. Αυτός ο οδηγός θα σας διδάξει πώς να εγκαταστήσετε την jQuery και μερικές από τις θεμελιώδεις έννοιες που σχετίζονται με αυτήν. Θα εξερευνήσουμε μερικούς από τους κοινούς επιλογείς (selectors), συμβάντα (events) και εφέ (effects) στην jQuery. Στη συνέχεια, θα μάθετε πώς να δοκιμάζετε έννοιες ανάπτυξης όπως API, DOM και CDN μέσα από χρήσιμα παραδείγματα. Διαβάστε παρακάτω για να εξοικειωθείτε με τον κόσμο της jQuery.

Πριν Ξεκινήσουμε

Υπάρχουν ορισμένα πράγματα που θα λειτουργήσουν υπέρ σας εάν τα γνωρίζετε εκ των προτέρων. Για παράδειγμα, το να έχετε μια βασική κατανόηση του πώς λειτουργούν η HTML και το CSS θα σας βοηθήσει πολύ. Δεν θα το καλύψουμε αυτό σε αυτόν τον οδηγό. Θα εργαστούμε με την υπόθεση ότι γνωρίζετε τουλάχιστον πώς να στήσετε έναν απλό ιστότοπο. Θα πρέπει επίσης να έχετε μια βασική κατανόηση του πώς λειτουργεί ο προγραμματισμός γενικά. Αυτό δεν σημαίνει απαραίτητα ότι πρέπει να είστε ειδικός στη JavaScript για να προχωρήσετε. Αρκεί απλώς να έχετε κάποια εξοικείωση με πράγματα όπως η λογική, οι μεταβλητές και οι τύποι δεδομένων στον προγραμματισμό.

Πώς να Εγκαταστήσετε την jQuery στο Σύστημά σας

Πρώτα απ’ όλα, ας δούμε πώς μπορείτε να εγκαταστήσετε την jQuery στο σύστημά σας. Η jQuery είναι διαθέσιμη ως αρχείο JavaScript, καθώς πρόκειται για μια βιβλιοθήκη JavaScript. Πρέπει να συνδέσετε αυτό το αρχείο στον κώδικα HTML του ιστοτόπου μας. Υπάρχουν δύο τρόποι για να το κάνετε αυτό. Όπως ανέφερα προηγουμένως, ένας τρόπος είναι να την κατεβάσετε από εδώ. Εκτός από τον επίσημο ιστότοπο, μπορείτε επίσης να βρείτε την jQuery στις Google Hosted Libraries ακριβώς εδώ.

Ένας άλλος τρόπος είναι να χρησιμοποιήσετε το Δίκτυο Διανομής Περιεχομένου ή CDN για να συνδέσετε το αρχείο. Ένα CDN αποτελείται από ένα σύνολο διακομιστών που βοηθά στην τοπική παράδοση περιεχομένου ιστού. Η φιλοξενία ενός αρχείου jQuery μέσω CDN επιτρέπει στο περιεχόμενο να φτάνει πολύ πιο γρήγορα στον χρήστη. Γι' αυτό θα χρησιμοποιούμε το Δίκτυο Διανομής Περιεχομένου από αυτό το σημείο και μετά σε αυτόν τον οδηγό.

Στο πρώτο μας παράδειγμα, θα φτιάξουμε ένα διαδικτυακό έργο. Αυτό το μικρό έργο περιέχει style.css στον φάκελο css/. script.js βρίσκεται στον κατάλογο js/. Τέλος, ένα index.html βρίσκεται στη ρίζα του διαδικτυακού έργου:

Project Structure

Σύμφωνα με αυτό το έργο, θα δημιουργήσουμε έναν σκελετό HTML. Στη συνέχεια, θα τον αποθηκεύσουμε ως index.html:

Εδώ είναι το σημείο όπου θα συνδέσουμε το αρχείο jQuery. Όπως είπα και πριν, θα το συνδέσουμε μέσω CDN. Θα εισαγάγετε τον σύνδεσμο jQuery πριν από την </body> ετικέτα. Μετά από αυτό, μπορείτε να προσθέσετε το δικό σας αρχείο JavaScript το οποίο ήταν το script.js στο παράδειγμά μας. Θυμηθείτε να τοποθετείτε πάντα το αρχείο JavaScript κάτω από τη βιβλιοθήκη jQuery, κάπως έτσι:

Τι θα κάνατε αν αντ' αυτού κατεβάζατε ένα τοπικό αντίγραφο της βιβλιοθήκης jQuery; Σε αυτήν την περίπτωση, πρέπει να αποθηκεύσετε το αρχείο jQuery στον φάκελο js/ . Στη συνέχεια, μπορείτε να το συνδέσετε ως js/jquery.min.js.

jQuery: Τα Βασικά

Πριν εμβαθύνουμε στις λεπτομέρειες, ας δούμε μερικά από τα βασικά στοιχεία του jQuery. Η κύρια δουλειά του jQuery είναι να χρησιμοποιεί το DOM για να συνδέει στοιχεία HTML στο πρόγραμμα περιήγησης. Το DOM σημαίνει Document Object Model. Είναι η μέθοδος που επιτρέπει στη JavaScript να αλληλεπιδρά με την HTML σε ένα πρόγραμμα περιήγησης. Μπορείτε να οπτικοποιήσετε το DOM κάνοντας δεξί κλικ στην ιστοσελίδα σας και επιλέγοντας Επιθεώρηση. Η HTML που εμφανίζεται στα Εργαλεία Προγραμματιστή είναι το DOM.

Ένας κόμβος είναι ένα μεμονωμένο στοιχείο HTML στο DOM. Η JavaScript μπορεί να τροποποιήσει όλα αυτά τα αντικείμενα ή στοιχεία. Μπορείτε να φανταστείτε τη διάταξη αυτών των αντικειμένων ως μια δομή που μοιάζει με δέντρο. <html> βρίσκεται στη ρίζα, ενώ τα στοιχεία διακλαδίζονται περαιτέρω.

Κάνοντας δεξί κλικ και επιλέγοντας Προβολή πηγαίου κώδικα σελίδας θα δείτε την ακατέργαστη HTML της ιστοσελίδας. Θυμηθείτε ότι αυτό δεν είναι το ίδιο με το DOM. Ενώ το DOM μπορεί να αλλάξει, ο πηγαίος κώδικας HTML είναι εντελώς στατικός. Οποιεσδήποτε αλλαγές κάνετε στη JavaScript δεν θα επηρεάσουν αυτό το αρχείο HTML. Ολόκληρος ο κόμβος <html> περιβάλλεται από ένα εξωτερικό επίπεδο που ονομάζεται document object.

Στη συνέχεια, θα δούμε πώς μπορείτε να χειριστείτε την ιστοσελίδα σας και τις δυνατότητές της χρησιμοποιώντας το jQuery. Πριν το κάνετε αυτό, ωστόσο, πρέπει να βεβαιωθείτε ότι η σελίδα είναι έτοιμη.

Πληκτρολογήστε τα ακόλουθα αφού δημιουργήσετε το αρχείο script.js στον js/ κατάλογο:

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

Θα επανέλθουμε στο σενάριο κώδικα «Hello, World!» για το οποίο μιλήσαμε στην αρχή του οδηγού. Ας υποθέσουμε ότι θέλουμε να ξεκινήσουμε αυτό το σενάριο. Για να χρησιμοποιήσουμε το jQuery ώστε να εκτυπώσουμε αυτό το κείμενο στο πρόγραμμα περιήγησης, πρέπει να εφαρμόσουμε το ID demo σε μια κενή παράγραφο επιπέδου μπλοκ κάπως έτσι:

Για να καλέσουμε το jQuery, πρέπει να χρησιμοποιήσουμε το σύμβολο $ . Μπορείτε να εφαρμόσετε σύνταξη και μεθόδους CSS για να αποκτήσετε πρόσβαση στο DOM με το jQuery. Ένα απλό παράδειγμα είναι το εξής:

Αυτή είναι η μορφή που θα χρησιμοποιήσετε με το jQuery. Γνωρίζουμε ήδη ότι το σύμβολο # αντιπροσωπεύει το ID στο CSS. Επομένως, μπορείτε να αποκτήσετε πρόσβαση στο demo ID χρησιμοποιώντας τον επιλογέα #demo.html() . Αυτή η μέθοδος θα σας επιτρέψει να αλλάξετε την HTML που υπάρχει σε ένα στοιχείο.

Ο ακόλουθος κώδικας μας δείχνει την τοποθέτηση του προγράμματος “Hello, World” στο jQuery του αρχείου script.js’ ready() wrapper:

Πρέπει να προσθέσετε αυτή τη γραμμή κώδικα στο script.js αρχείο. Αποθηκεύστε αυτό το αρχείο. Μετά από αυτό, μπορείτε να ανοίξετε το index.html αρχείο στο πρόγραμμα περιήγησης. Θα πρέπει να μπορείτε να δείτε το αποτέλεσμα Hello, World!. Αυτό είναι επίσης ένα καλό σημείο για να ελέγξετε το DOM για χάρη της κατανόησής σας. Κάντε δεξί κλικ στο κείμενο “Hello, World!”. Επιλέξτε Επιθεώρηση στοιχείου. Το DOM θα δείξει <p id="demo">Hello, World!</p>. Από την άλλη πλευρά, κάνοντας κλικ στο Προβολή πηγαίου κώδικα σελίδας, θα εμφανιστεί μόνο η ακατέργαστη html. Σε αυτήν την περίπτωση, αυτό θα ήταν <p id="demo"></p>.

Τι είναι οι Επιλογείς;

Τώρα θα προχωρήσουμε σε μερικά από τα κρίσιμα χαρακτηριστικά του jQuery. Μεταξύ αυτών είναι οι επιλογείς. Οι επιλογείς jQuery λένε στο πρόγραμμα με ποια στοιχεία θέλετε να εργαστείτε ή να «επιλέξετε». Είναι πολύ παρόμοιοι με τους επιλογείς που μπορεί να χρησιμοποιείτε στο CSS. Εδώ είναι η βασική μορφή για το πώς να αποκτήσετε πρόσβαση σε έναν επιλογέα στο jQuery:

Μπορείτε να χρησιμοποιήσετε συμβολοσειρές με μονά ή διπλά εισαγωγικά, αν και ο οδηγός στυλ του jQuery προτιμά το δεύτερο. Αν θέλετε, μπορείτε να δείτε την πλήρη λίστα των επιλογέων jQuery στη αυτήν την επίσημη σελίδα. Για ενημέρωσή σας, εδώ είναι μερικοί από τους πιο συχνά χρησιμοποιούμενους επιλογείς:

  • $("*")

Αυτός είναι ο επιλογέας μπαλαντέρ (Wildcard selector). Θα επιλέξει κάθε στοιχείο στη σελίδα σας.

  • $(this)

Αυτός είναι ο τρέχων επιλογέας (Current selector). Επιλέγει το στοιχείο στο οποίο εργάζεστε αυτήν τη στιγμή με μια συνάρτηση.

  • $("p")

Αυτός είναι ο επιλογέας ετικέτας (Tag selector). Επιλέγει κάθε εμφάνιση της <p> ετικέτας.

  • $(".example")

Αυτός είναι ο επιλογέας κλάσης (Class selector). Θα επιλέξει κάθε μεμονωμένο στοιχείο που έχει εφαρμοσμένη την example κλάση.

  • $("#example")

Αυτός είναι ο επιλογέας Id (Id selector). Επιλέγει μόνο μία εμφάνιση του example id.

  • $("[type='text']")

Αυτός είναι ο επιλογέας ιδιότητας (Attribute selector). Θα επιλέξει οποιοδήποτε δεδομένο στοιχείο με text εφαρμοσμένο στο type χαρακτηριστικό.

  • $("p:first-of-type")

Αυτός είναι ο επιλογέας ψευδοστοιχείου (Pseudo Element selector). Σας βοηθά να επιλέξετε το πρώτο <p>.

Τι είναι τα Συμβάντα;

Υπάρχουν ορισμένα χαρακτηριστικά της ιστοσελίδας που φορτώνονται μόλις φορτωθεί η σελίδα. Σκεφτείτε το παράδειγμα “Hello, World”. Σε αυτήν την περίπτωση, θα μπορούσαμε να προσθέσουμε τον κώδικα απευθείας στην πηγαία HTML. Αλλά τι συμβαίνει όταν η φόρτωση ενός χαρακτηριστικού απαιτεί αλληλεπίδραση με τον χρήστη; Εκεί είναι που το jQuery γίνεται χρήσιμο.

Ας πούμε’ ότι θέλουμε να εμφανίζεται κάποιο κείμενο αφού ο χρήστης κάνει κλικ σε ένα κουμπί. Για να προσθέσετε αυτήν τη δυνατότητα, πρέπει να προσθέσετε ένα στοιχείο <button> στο αρχείο index.html . Αυτό το κουμπί θα «ακούει» για το «συμβάν» κλικ:

Κάθε φορά που ο χρήστης αλληλεπιδρά με το πρόγραμμα περιήγησης θεωρείται συμβάν. Η αλληλεπίδραση μπορεί να γίνει μέσω του δείκτη του ποντικιού ή του πληκτρολογίου. Στο παραπάνω παράδειγμα, το κλικ ενός κουμπιού είναι το συμβάν μας. Γι' αυτό ονομάζεται συμβάν κλικ (click event).

Στη συνέχεια, πρέπει να καλέσουμε μια συνάρτηση που έχει τον κώδικα “Hello, World”. Για να το κάνουμε αυτό, θα χρησιμοποιήσουμε τη μέθοδο click() :

Όπως μπορείτε να δείτε, το ID του στοιχείου μας <button> ονομάζεται trigger. Μπορούμε να το επιλέξουμε χρησιμοποιώντας το $(#trigger"). Ο σκοπός της προσθήκης της μεθόδου click() είναι να κάνει το πρόγραμμα να ακούει για το συμβάν κλικ. Στη συνέχεια, θα τοποθετήσουμε τη συνάρτηση με τον κώδικα κειμένου μέσα στη μέθοδο:

Ο κώδικάς μας θα μοιάζει κάπως έτσι στο τέλος:

Τώρα μπορείτε να αποθηκεύσετε το αρχείο script.js . Ανανεώστε το index.html στο πρόγραμμα περιήγησης για να εφαρμόσετε τις αλλαγές. Αφού κάνετε κλικ στο κουμπί, θα εμφανιστεί το αποτέλεσμα της δοκιμής «Hello, World!».

Υπάρχουν επίσης και άλλοι τύποι συμβάντων jQuery εκτός από το click. Μπορείτε να δείτε μια πλήρη λίστα με αυτές τις μεθόδους συμβάντων από αυτό το επίσημο έγγραφο. Ακολουθούν μερικά από τα πιο συχνά χρησιμοποιούμενα που μπορεί να συναντήσετε περιστασιακά:

  • click()

Το συμβάν click εκτελεί τον κώδικα με ένα μόνο κλικ του ποντικιού.

  • hover()

Το συμβάν hover εκτελεί τον κώδικα όταν ο δείκτης του ποντικιού περνάει πάνω από ένα στοιχείο. Μπορείτε επίσης να καθορίσετε εάν ο κώδικας ενεργοποιείται από την είσοδο ή την έξοδο του ποντικιού με mouseenter() και mouseleave() αντίστοιχα.

  • submit()

Η υποβολή μιας φόρμας ενεργοποιεί τον κώδικα.

  • scroll()

Η κύλιση προς τα κάτω στην οθόνη θα είναι το συμβάν που εκτελεί τον κώδικα.

  • keydown()

Πατώντας ένα πλήκτρο στο πληκτρολόγιο θα εκτελεστεί ο κώδικας.

Τι είναι τα Effects;

jQuery effects λειτουργούν μαζί με τα συμβάντα jQuery. Ο κύριος σκοπός των εφέ, όπως γίνεται κατανοητό από τον όρο, είναι να προσθέσουν κινούμενα σχέδια στη σελίδα. Σας επιτρέπει να χειρίζεστε τα στοιχεία για να εφαρμόσετε διάφορα είδη εφέ. Αυτά τα εφέ μπορούν να ενεργοποιηθούν από ορισμένα συμβάντα.

Για να κατανοήσουμε καλύτερα, θα εξετάσουμε ένα παράδειγμα. Ας υποθέσουμε ότι θέλουμε να ανοίξουμε και να κλείσουμε ένα αναδυόμενο παράθυρο (popup overlay). Ένας τρόπος για να το κάνουμε αυτό θα ήταν να χρησιμοποιήσουμε δύο διαφορετικά ID. Το ένα θα άνοιγε το overlay και το άλλο θα το έκλεινε. Ο άλλος τρόπος είναι να χρησιμοποιήσουμε μια κλάση για να το κάνουμε αυτό. Το όφελος από τη χρήση μιας κλάσης είναι ότι η ίδια συνάρτηση μπορεί να ανοίγει και να κλείνει το overlay.

Ανοίξτε το αρχείο σας index.html. Στη συνέχεια, διαγράψτε τις ετικέτες <button> και <p> από το body. Τώρα προσθέστε τις ακόλουθες γραμμές κώδικα στο HTML:

Ας δούμε το αρχείο μας style.css στη συνέχεια. Εδώ, ο στόχος μας είναι να χρησιμοποιήσουμε το ελάχιστο CSS για να αποκρύψουμε το overlay. Για αυτό, θα χρησιμοποιήσουμε το display: none και να το κεντράρουμε έτσι:

Στη συνέχεια, θα χρησιμοποιήσουμε τη μέθοδο toggle(). Αυτή η μέθοδος θα μας επιτρέψει να εναλλάσσουμε την ιδιότητα display μεταξύ none και block. Συνεπώς, το overlay θα κρύβεται και θα εμφανίζεται όποτε κάνουμε κλικ. Προσθέστε αυτόν τον κώδικα στο αρχείο script.js αρχείο:

Τέλος, ανανεώστε το index.html για να εφαρμόσετε τις αλλαγές. Τώρα θα μπορείτε να εναλλάσσετε την ορατότητα του modal. Το μόνο που έχετε να κάνετε είναι να κάνετε κλικ στα κουμπιά. Υπάρχουν και άλλα εφέ jQuery που μπορείτε να χρησιμοποιήσετε σε συνδυασμό με αυτό. Για παράδειγμα, μπορείτε να αλλάξετε το απλό toggle() σε slideToggle() ή fadeToggle().

Ακολουθούν μερικές από τις πιο συχνά χρησιμοποιούμενες μεθόδους εφέ στο jQuery:

  • toggle()

Αυτή η μέθοδος σας επιτρέπει να αλλάξετε την ορατότητα του στοιχείου. Τα μονόδρομα εφέ που σχετίζονται με αυτήν είναι τα show() και hide().

  • fadeToggle()

Αυτή η μέθοδος θα σας επιτρέψει να αλλάξετε την ορατότητα και τη διαφάνεια του στοιχείου μέσω κίνησης. Τα μονόδρομα εφέ σε αυτήν την περίπτωση είναι τα fadeIn() και fadeOut().

  • slideToggle()

Αυτή η μέθοδος θα σας επιτρέψει να χρησιμοποιήσετε εφέ ολίσθησης για να εναλλάξετε την ορατότητα του στοιχείου. Τα μονόδρομα εφέ σε αυτήν την περίπτωση είναι τα slideUp() και slideDown().

  • animate()

Αυτή η μέθοδος εφέ σας επιτρέπει να εκτελείτε προσαρμοσμένα εφέ κίνησης. Χρησιμοποιεί την ιδιότητα CSS του δεδομένου στοιχείου.

Συμπέρασμα

Ελπίζουμε ότι αυτός ο οδηγός αποδείχθηκε χρήσιμος για να σας προσφέρει μια εις βάθος εισαγωγή στο jQuery. Είναι ένα απίστευτα χρήσιμο εργαλείο που συμβάλλει σημαντικά στη διευκόλυνση της ανάπτυξης ιστού και της συγγραφής κώδικα. Αυτό ισχύει ιδιαίτερα εάν είστε σχετικά νέοι στον κόσμο του προγραμματισμού.

Εξερευνήσαμε τα διάφορα στοιχεία που αποτελούν τα θεμέλια του jQuery. Μάθαμε επίσης πώς μπορείτε να επιλέγετε και να τροποποιείτε αυτά τα στοιχεία, καθώς και πώς να αξιοποιείτε σωστά τα συμβάντα και τα εφέ. Η εξοικείωση με εργαλεία όπως το jQuery μπορεί να σας βοηθήσει να δημιουργήσετε ιστότοπους γεμάτους με διαδραστικά χαρακτηριστικά που προσφέρουν μια ελκυστική εμπειρία χρήστη.

Δείτε μερικούς πόρους από το blog μας που θα σας βοηθήσουν όταν εργάζεστε με τη JavaScript:

Καλό προγραμματισμό!

author

Pranay Kapgate

Συγγραφέας · CloudSigma

Ο Preslav Dobrev είναι Δημιουργικός Σχεδιαστής στην CloudSigma, με εστίαση στη συνεπή επιχειρηματική ταυτότητα μέσω παραδοσιακών και καινοτόμων καναλιών μάρκετινγκ. Διαθέτει την ικανότητα να συνδυάζει το καλλιτεχνικό όραμα με το στρατηγικό μάρκετινγκ για τη δημιουργία εντυπωσιακών αφηγήσεων επωνυμίας.

Σχόλια

Δεν υπάρχουν σχόλια ακόμα. Γράψτε το πρώτο.