JQuery Tutorial (Μέρος 4)

Διαφήμιση

Σήμερα πρόκειται να το κλωτσήσουμε σε μια εγκοπή και να δείξουμε πραγματικά πού jQuery λάμπει - γεγονότα. Αν ακολουθήσατε τα προηγούμενα μαθήματα, θα πρέπει τώρα να έχετε μια αρκετά καλή κατανόηση του βασική δομή κώδικα του jQuery jQuery Tutorial - Ξεκινώντας: Βασικά και επιλογέςΤην περασμένη εβδομάδα, μίλησα για το πόσο σημαντικό είναι το jQuery σε κάθε σύγχρονο προγραμματιστή ιστού και γιατί είναι φοβερό. Αυτή την εβδομάδα, νομίζω ότι ήρθε η ώρα να βγάλουμε τα χέρια μας με κάποιο κωδικό και μάθαμε πώς ... Διαβάστε περισσότερα (και όλες τις φρικτές σγουρές αγκύλες που πηγαίνουν με αυτό), καθώς και πώς βρίσκουν στοιχεία του DOM και μερικά από τα πράγματα που μπορείτε να κάνετε για να τα χειριστείτε Εισαγωγή στο jQuery (Μέρος 2): Μέθοδοι & ΛειτουργίεςΑυτό είναι μέρος μιας τρέχουσας αρχαίας εισαγωγή στην jQuery σειρά προγραμματισμού web. Το πρώτο μέρος κάλυψε τα βασικά στοιχεία του jQuery σχετικά με τον τρόπο με τον οποίο θα συμπεριληφθεί στο έργο σας και τους επιλογείς. Στο μέρος 2, θα συνεχίσουμε με ... Διαβάστε περισσότερα

. Σας έδειξα επίσης πώς να έχετε πρόσβαση στο κονσόλα προγραμματιστή στο Chrome Βγάζετε προβλήματα ιστοτόπου με τα Εργαλεία προγραμματιστών Chrome ή το FirebugΑν έχετε ακολουθήσει τα tutorials του jQuery μέχρι τώρα, μπορεί να έχετε ήδη αντιμετωπίσει κάποια προβλήματα κώδικα και δεν γνωρίζετε πώς να τα διορθώσετε. Όταν αντιμετωπίζετε ένα μη λειτουργικό κομμάτι κώδικα, είναι πολύ ... Διαβάστε περισσότερα και πώς μπορείτε να το χρησιμοποιήσετε για να εντοπίσετε τον κώδικα jQuery.

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

Τι είναι ένα γεγονός;

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

Για παράδειγμα, πατώντας στην οθόνη του iPhone σας θα δημιουργηθεί ένα ενιαίο "συμβάν βρύσης" με μια συντεταγμένη x, y ακριβώς από εκεί που επιλέξατε. Εάν επιλέξατε ένα συγκεκριμένο αντικείμενο, όπως ένα κουμπί, είναι πιθανό ότι το κουμπί ακούει για το συμβάν και θα προβεί σε κάποια ενέργεια ανάλογα. Εάν ήταν απλώς ένα κενό μέρος της διεπαφής, τίποτα δεν συνδέθηκε με το γεγονός και έτσι τίποτα δεν θα συμβεί.

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

Εύκολο: Κάνοντας κλικ

Ίσως το πιο εύκολο γεγονός για να ακούσετε είναι το γεγονός κλικ, που πυροβολήθηκε κάθε φορά που ένας χρήστης κάνει κλικ σε ένα στοιχείο. Αυτό δεν χρειάζεται να είναι ένα συγκεκριμένο "κουμπί" - μπορείτε να επισυνάψετε έναν ακροατή του γεγονότος σε οτιδήποτε στην οθόνη, αλλά ως προγραμματιστής ιστού, προφανώς πρέπει να κάνετε αυτό το διαισθητικό. Δημιουργία ενός ψευδο-κουμπιού από το γράμμα ένα κρύβεται μέσα σε μια παράγραφο του κειμένου είναι δυνατή, αλλά κάπως ηλίθια.

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

$(εκλέκτορας).επί(Εκδήλωση,δράση);

Για να ακούσετε ένα μήνυμα "Κάντε κλικ"Συμβάν σε οποιαδήποτε στοιχεία με την τάξη .clickme, και, στη συνέχεια, καταγράψτε ένα μήνυμα στην κονσόλα που περιέχει το κείμενο του στοιχείου που επιλέξατε, θα κάνατε:

$ ("κλικ") στο ("κλικ", λειτουργία () { console.log ($ (αυτό) .text ()); });

Θα πρέπει να βλέπετε ότι η ενέργεια που έχουμε ενσωματώσει εδώ είναι μια ανώνυμη λειτουργία που χρησιμοποιεί το Αυτό επιλογέα (που αναφέρεται σε ό, τι αντικείμενο ασχολείται σήμερα με το jQuery) - στην περίπτωση αυτή, το πράγμα στο οποίο έγινε κλικ. Στη συνέχεια, εξαγάγουμε το κείμενο αυτού του αντικειμένου που πατήσαμε και το καταγράψουμε στην κονσόλα. Εύκολο, σωστά;

Διακοπή της προεπιλεγμένης ενέργειας:

Σε κάποιο σημείο, θα θελήσετε να επισυνάψετε κάτι σαν ένα κουμπί σύνδεσης ή φόρμας υποβολής, το οποίο συνήθως κάνει κάτι άλλο. Σε αυτή την περίπτωση, είναι πολύ πιθανό να μην θέλετε να εκτελεστεί η αρχική ενέργεια - αντί να θέλετε να κάνετε κάποια φανταχτερά AJAX ή ειδική jQuery magic.

Για να αποφευχθεί αυτή η προεπιλεγμένη ενέργεια, έχουμε μια εύχρηστη μέθοδο που ονομάζεται preventDefault. Προφανώς. Ας δούμε πώς θα μπορούσε να λειτουργήσει όταν ασχολείστε με ένα κουμπί υποβολής για μια φόρμα

$ ("# myForm") στην ("υποβολή", λειτουργία (συμβάν) { console.log (συμβάν); event.preventDefault (); επιστροφή ψευδής? });

Μερικές αλλαγές εδώ - πρώτα, συνδέουμε με το υποβάλλουν γεγονός αντί για κλικ. Αυτό είναι πιο κατάλληλο όταν ασχολείσαι με μια φόρμα όπως ο χρήστης μπορεί tab-space, Κτύπημα εισαγω, ή πατήστε a υποβάλλουν κουμπί - το σύνολο των οποίων θα ενεργοποιήσει την προεπιλεγμένη ενέργεια της φόρμας. Μεταφέρουμε επίσης τη μεταβλητή συμβάντος στην ανώνυμη λειτουργία, έτσι μπορούμε να ανατρέξουμε στο δεδομένα συμβάντων. Στη συνέχεια χρησιμοποιήσαμε το event.preventDefault () σε συνδυασμό με επιστροφή ψευδής να σταματήσετε να ολοκληρώνετε όλες τις συνήθεις ενέργειες.

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

Τα γεγονότα μπορούν επίσης να ενεργοποιηθούν από εσάς

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

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

$ (έγγραφο) .ready (λειτουργία () { $ ('# username'.focus (); });

Αν είχατε επίσης συνδέσει έναν ακροατή εστίασης του γεγονότος σε αυτό το πεδίο ονόματος χρήστη, θα ενεργοποιούταν επίσης όταν αναγκάστηκε να εστιάσετε. Επομένως, τα γεγονότα μπορούν να ενεργοποιηθούν και να ακουστούν.

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

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

Όπως πάντα, τα σχόλια, τα ερωτήματα, τα σχόλια και τα προβλήματα καλωσορίζονται παρακάτω.

Πιστοποίηση εικόνας: Οθόνη αφής μέσω του Shutterstock