Πώς να προσθέσετε συμβάντα σε JQuery Αντικείμενα για HTML5 και CSS3 Προγραμματισμός

Η βιβλιοθήκη jQuery προσθέτει μια άλλη εξαιρετικά ισχυρή δυνατότητα JavaScript. Επιτρέπει στους προγραμματιστές HTML5 και CSS3 να προσαρτήσουν εύκολα ένα γεγονός σε οποιοδήποτε αντικείμενο jQuery. Ρίξτε μια ματιά στο hover. html.

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

Πώς να προσθέσετε ένα γεγονός

Κοιτάξτε τον κώδικα για να δείτε πώς λειτουργεί:

hover. html $ (init); συνάρτηση init () {$ ("li"). τοποθετήστε το δείκτη του ποντικιού (border, noBorder),} // end init function border () {$ (αυτό). css ("σύνορο", "1px μαύρο");} λειτουργία noBorder () {$ (αυτό). css ("border", "0px none black"),}

Επίδειξη Hover

alpha
βήτα
γάμμα
δέλτα

Το HTML δεν θα μπορούσε να είναι απλούστερο. Είναι απλώς μια λίστα με ασυνήθιστα αποτελέσματα. Το JavaScript δεν είναι πολύ πιο περίπλοκο. Αποτελείται από τρεις λειτουργίες μιας γραμμής:

• init () ονομάζεται όταν το έγγραφο είναι έτοιμο. Κάνει jQuery αντικείμενα όλων των στοιχείων της λίστας και αποδίδει το συμβάν σε αυτά. Η συνάρτηση hover () δέχεται δύο παραμέτρους:

  • Η πρώτη είναι μια λειτουργία που πρέπει να καλείται όταν ο δρομέας κινείται πάνω από το αντικείμενο.

  • Η δεύτερη είναι μια λειτουργία που πρέπει να καλείται όταν ο δρομέας εγκαταλείπει το αντικείμενο.

• περίγραμμα () σχεδιάζει ένα περιθώριο γύρω από το τρέχον στοιχείο. Το αναγνωριστικό $ (αυτό) χρησιμοποιείται για τον προσδιορισμό του τρέχοντος αντικειμένου.

• είναι μια λειτουργία που μοιάζει πολύ με τη συνάρτηση , αλλά αφαιρεί ένα περίγραμμα από το τρέχον αντικείμενο. Σε αυτό το παράδειγμα, χρησιμοποιήθηκαν τρεις διαφορετικές λειτουργίες. Πολλοί προγραμματιστές jQuery προτιμούν να χρησιμοποιούν ανώνυμες λειτουργίες (μερικές φορές αποκαλούνται λειτουργίες

λάμδα ) για να περικλείουν ολόκληρη τη λειτουργικότητα σε μια μακρά γραμμή: $ ("li"). (c) ("border", "0px none black"))), λειτουργία () {$ (αυτό).

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

Εάν είστε επιστήμονας πληροφορικής, μπορεί να υποστηρίξετε ότι αυτό δεν είναι ένα τέλειο παράδειγμα λυμδατικής λειτουργίας και θα ήταν σωστό. Το σημαντικό είναι να παρατηρήσετε ότι ορισμένες ιδέες λειτουργικού προγραμματισμού (όπως οι λειτουργίες lambda) εισέρχονται στο mainstream προγραμματισμό AJAX και αυτό είναι μια συναρπαστική εξέλιξη.

Η εναλλαγή μαθημάτων

Το jQuery υποστηρίζει ένα άλλο υπέροχο χαρακτηριστικό.Μπορείτε να ορίσετε ένα στυλ CSS και στη συνέχεια να προσθέσετε ή να αφαιρέσετε αυτό το στυλ από ένα στοιχείο δυναμικά.

Ο κώδικας δείχνει πόσο εύκολο είναι να προσθέσετε αυτό το είδος της δυνατότητας:

. html. όριο {border: 1px solid black}} $ (init); συνάρτηση init () {$ ("li"). κάντε κλικ (toggleBorder), // // end init function toggleBorder () {$ (αυτό).

1. Για να κάνετε αυτό το πρόγραμμα:

   Ξεκινήστε με μια βασική σελίδα HTML.

2. Όλα τα ενδιαφέροντα πράγματα συμβαίνουν σε CSS και JavaScript, οπότε τα πραγματικά περιεχόμενα της σελίδας δεν είναι τόσο κρίσιμα.

   Δημιουργήστε μια τάξη που θέλετε να προσθέσετε και να αφαιρέσετε.

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

   Συνδέστε μια μέθοδο init ().

   Καθώς αρχίζετε να βλέπετε, οι περισσότερες εφαρμογές του jQuery απαιτούν κάποιο είδος προετοιμασίας. Μπορείτε να καλέσετε την πρώτη λειτουργία. init ()

   • Καλέστε τη λειτουργία toggleBorder () κάθε φορά που ο χρήστης κάνει κλικ σε ένα στοιχείο λίστας.

   • Η μέθοδος init () απλά ορίζει έναν χειριστή συμβάντων. Κάθε φορά που ένα στοιχείο λίστας λαμβάνει το συμβάν κλικ (δηλαδή, κάνει κλικ) πρέπει να ενεργοποιηθεί η λειτουργία toggleBorder (). Η λειτουργία toggleBorder (), αλλάζει, αλλάζει το όριο.

   • Το jQuery έχει διάφορες μεθόδους για τον χειρισμό της κλάσης ενός στοιχείου:

addClass () εκχωρεί μια κλάση στο στοιχείο. removeClass () καταργεί έναν ορισμό κλάσης από ένα στοιχείο. toggleClass () αλλάζει την κλάση (προσθέτει αν δεν είναι συνημμένη ή δεν την καταργεί αλλιώς).