Όπως έχουμε μιλήσει, το jQuery μπορεί να θεωρηθεί ως βιβλιοθήκη «select and do». Έχουμε μιλήσει για την επιλογή αρκετά, οπότε τώρα ας μιλήσουμε για κάποια πράγματα. Θυμηθείτε ότι το μοτίβο μοιάζει βασικά με αυτό:
// Select something! $(".something") // Do something! .hide();Αντί να δουλεύουμε με πιο θεωρητικά παραδείγματα, προχωράμε κατευθείαν σε κάτι πραγματικό κόσμο. Βρήκαμε αυτό το στυλό από τον Drew Barontini και το διαμορφώσαμε.
Δείτε τη Φόρμα Πιστωτικής Κάρτας Πένας του Chris Coyier (@chriscoyier) στο CodePen
Στο παράδειγμά μας, κρύψαμε από προεπιλογή τη φόρμα της πιστωτικής κάρτας. Στη συνέχεια δημιουργήσαμε έναν σύνδεσμο στον οποίο θα μπορούσατε να κάνετε κλικ για να σύρετε προς τα πάνω και προς τα κάτω τη φόρμα της πιστωτικής κάρτας. Έχουμε επιλέξει το σύνδεσμο, στη συνέχεια, κάνει μια slideToggle στη φόρμα. Επιλέξτε και κάντε!
Δεν έχουμε μιλήσει ακόμα για εκδηλώσεις, αλλά αυτό είναι ένα τεράστιο μέρος του jQuery. Ένα συμβάν είναι κάτι σαν κλικ του ποντικιού, πατήματα πλήκτρων, κύλιση, κ.λπ. Το τμήμα "κάνω" του "select and do" συμβαίνει συχνά μετά από ένα συμβάν. Μην ανησυχείτε, θα μιλήσουμε πολλά για εκδηλώσεις πριν ολοκληρωθεί αυτή η σειρά. Προς το παρόν, απλώς γνωρίζετε ότι στο () είναι ο καλύτερος / τυπικός τρόπος για να δεσμεύσετε τα συμβάντα στο jQuery. Δέσμευση, που σημαίνει "παρακολουθήστε αυτό το συμβάν σε αυτό το στοιχείο ή σύνολο στοιχείων".
Το βασικό σχέδιο:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));Στο παράδειγμά μας, ο σύνδεσμος ήταν κυριολεκτικά ένας σύνδεσμος.
μεταβάλλω
Ο τρόπος λειτουργίας των συνδέσμων κατακερματισμού από προεπιλογή σε οποιοδήποτε πρόγραμμα περιήγησης είναι ότι το παράθυρο θα μετακινηθεί προς τα κάτω στο στοιχείο με το αναγνωριστικό που ταιριάζει με αυτόν τον σύνδεσμο κατακερματισμού. Μερικές φορές αυτό είναι καλό. Μου αρέσει πώς δημιουργεί μια σημασιολογική σύνδεση μεταξύ αυτού του συνδέσμου και αυτού του στοιχείου. Επομένως, χωρίς καμία JavaScript, ο σύνδεσμος εξακολουθεί να έχει ουσιαστικά νόημα (ειδικά αν το ονομάζετε κάτι έξυπνο).
Αλλά μερικές φορές, αυτή η συμπεριφορά αλματώδους συνδέσμου κατακερματισμού είναι αβλαβής Μπορούμε να το αποτρέψουμε σε JavaScript χρησιμοποιώντας το preventDefault. Σαν αυτό:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Θα μιλήσουμε περισσότερα για αυτό που έρχεται.
Φυσικά, η τεκμηρίωση του jQuery είναι ένας φανταστικός πόρος για όλες τις πτυχές «do» του jQuery (μεθόδους).
Νομίζω ότι η πολύ βασική κατανόηση αυτού του "select and do" και τα γεγονότα ανοίγουν πραγματικά έναν κόσμο κατανόησης σε JavaScript. Ξέρω ότι το έκανε για μένα. Στο τέλος αυτού του screencast παίρνουμε μια κορυφή στο τρέχον σχέδιο του CSS-Tricks και βλέπουμε πού χρησιμοποιείται σαφώς το JavaScript για να αντιδράσει σε κάποια γεγονότα κλικ και να αλλάξει το περιβάλλον χρήστη. Πολύ παρόμοια πράγματα με αυτά που κάναμε στο προηγούμενο demo. Για παράδειγμα, ορίζοντας μια ενεργή τάξη σε πράγματα που κάνετε κλικ, όπως αυτό:
Δείτε το στυλό d6f7161a5931397b4f24195a315d52f3 του Chris Coyier (@chriscoyier) στο CodePen