Εισαγωγή στο jQuery (Μέρος 2): Μέθοδοι & συναρτήσεις

Διαφήμιση

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

$(εκλέκτορας).μέθοδος();

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

Για να ανακεφαλαιώσετε γρήγορα, το

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

$ ('div.hidden')

Το δεύτερο μέρος αυτής της εξίσωσης είναι το μέθοδος για να εκτελέσουμε αυτά τα DIV μόλις τα βρούμε (αν υπάρχουν καθόλου · ή μπορεί να είναι μόνο ένα στοιχείο «ταίριασμα»). Θυμηθείτε, το jQuery θα επιστρέψει μόνο ένα στοιχείο για επιλογές αναγνωριστικών, καθώς τα αναγνωριστικά θα πρέπει να αναφέρονται σε μοναδικά στοιχεία. Εάν πρόκειται να έχετε περισσότερα από ένα από αυτά, πρέπει να οριστεί ως τάξη στο CSS.

Στη συνέχεια στις μεθόδους? τι μπορείτε να κάνετε με τα στοιχεία του DOM ούτως ή άλλως;

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

.css ("ιδιότητα", "τιμή");

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

Εάν προτιμάτε να κάνετε κινούμενη εικόνα τις αλλαγές CSS, τότε έχω υπέροχα νέα για εσάς. υπάρχει επίσης μια μέθοδος που ονομάζεται .έμψυχος(). Ωστόσο, είναι λίγο πιο περίπλοκο:

.animate ({'property': 'value'}, ταχύτητα);

Για παράδειγμα:

.animate ({'αδιαφάνεια': '0,25', 'ύψος': '100px'}, 'γρήγορο');

Σε αυτό το σημείο, ίσως αναρωτιέστε για τι είναι τα σγουρά τιράντες; ονομάζονται "αντικείμενο κυριολεκτικά" και χρησιμοποιούνται συνήθως για τη δημιουργία μιας λίστας αξία περιουσίας ζευγάρια, είδος σαν ευρετήριο πίνακα αν έρχεστε από άλλες γλώσσες. Θα τα χρησιμοποιήσετε πολύ στο jQuery, οπότε θα το πω ξανά - συνηθίστε να ελέγχετε σωστά για κλειστές αγκύλες και τιράντες!

Ολοκλήρωση παραγγελίας αυτή η σελίδα για πολλά λειτουργικά παραδείγματα της μεθόδου animate.

Εκτός από το χειρισμό των ιδιοτήτων CSS κάποιου, μπορείτε να προσαρμόσετε τα περιεχόμενά του με το .Οι μέθοδοι text (), .html () και .val () επίσης (το val είναι για το περιεχόμενο των στοιχείων φόρμας). Αυτές οι μέθοδοι δρουν και οι δύο σειράκαι παίρνωτρ. εάν δεν καθορίσετε μια τιμή, θα λάβουν την τρέχουσα τιμή. Εάν καθορίσετε μια τιμή, θα αντικαταστήσουν την τρέχουσα τιμή.

Ακολουθούν μερικά γρήγορα παραδείγματα:

Λάβετε την τρέχουσα τιμή του πεδίου ονόματος στη φόρμα σχολίων και αντιστοιχίστε το σε μια μεταβλητή σχόλιο_ όνομα:

var commenter_name = $ (# comment-form #name) .val ();

Ορίστε την τιμή του στην τιμή που τραβήχτηκε από όνομα_ σχολιαστή:

$ ('span.name'). κείμενο (commenter_name);

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

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

$('div # περιεχόμενοΠ: ένατο παιδί (3n)').μετά('');

Κατανοώντας αυτό, ζητήσαμε από το jQuery να:

1. Βρείτε το div με αναγνωριστικό "περιεχομένου"
2. Βρείτε τα p που περιέχονται σε αυτό το div
3. Φιλτράρετε σε κάθε 3ο σελ χρησιμοποιώντας τον ψευδο επιλογέα nth-child (περισσότερα για αυτό εδώ)
4. Εισαγάγετε μια αυθαίρετη εικόνα μετά κάθε στοιχείο που ταιριάζει

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

Επίσης, λάβετε υπόψη ότι μπορεί να υπάρχουν περισσότεροι από ένας τρόποι για να κάνετε κάτι. Αν για παράδειγμα δεν μπορείτε να περιορίσετε το σωστό αντικείμενο ένθετοΜετά από (), ίσως σκεφτείτε να βρείτε το Επόμενο παιδί κάτω και χρήση ένθετοΠριν () αντι αυτου.

Μέθοδος αλυσίδας

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

$ ('nav # menu'). fadeIn ('fast'); $ ('nav # menu'). addClass ('beingShown'); $ ('nav # menu'). css ('margin-right', '10px');

Ακούγεται αρκετά λογικό, έτσι; Αλλά μπορείτε να κάνετε το ίδιο σε μία μόνο γραμμή:

$ ('nav # menu'). fadeIn ('fast'). addClass ('beingShown'). css ('margin-right', '10px');

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

Γιατί; Λοιπόν, κάθε φορά που καλείτε το βασικό jQuery $ εντολή και επιλογέα, το ζητάτε να πραγματοποιήσει αναζήτηση μέσω του δέντρου DOM αναζητώντας ένα αντίστοιχο στοιχείο. Όταν κάνετε αλυσίδες μεθόδων, δεν χρειάζεται να συνεχίσετε να αναφέρεστε στο DOM, επειδή γνωρίζει πού βρίσκονται τώρα και μπορεί να εκτελέσει τη μέθοδο αμέσως.

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

Αν μόλις βρήκατε αυτήν την ανάρτηση, πιθανότατα είστε κάποιος προγραμματιστής ιστού και ίσως θέλετε να δείτε όλα μας WordPress και blogging άρθρα, ή ακόμα και τα δικά μας Καλύτερες προσθήκες WordPress Οι καλύτερες προσθήκες WordPress Διαβάστε περισσότερα σελίδα.