Αυτό είναι μέρος μιας τρέχουσας αρχαίας εισαγωγή στην jQuery web προγραμματισμού σειράς. Το πρώτο μέρος κάλυψε τα βασικά στοιχεία του jQuery Το jQuery Tutorial - Ξεκινώντας: Βασικά & Selectors jQuery Tutorial - Ξεκινώντας: Βασικά και Επιλογείς Την περασμένη εβδομάδα μίλησα για το πόσο σημαντικό είναι το jQuery για κάθε σύγχρονο web developer και γιατί είναι φοβερό. Αυτή την εβδομάδα, νομίζω ότι ήρθε η ώρα να βγάλουμε τα χέρια μας με κάποιο κωδικό και να μάθουμε πώς ... Διαβάστε περισσότερα για το πώς θα το συμπεριλάβετε στο έργο σας και τους επιλογείς. Στο δεύτερο μέρος, θα συνεχίσουμε με τη βασική χρήση καθώς εξετάζουμε μερικές μεθόδους που μπορείτε να εκτελέσετε σε αυτά τα στοιχεία του DOM και μερικές περισσότερες βασικές γλωσσικές γνώσεις.
$ (επιλογέας) .method ();
Αν θυμάστε από το μάθημα 1, αυτή είναι η βασική δομή ενός χειρισμού DOM στο jQuery. Το DOM manipulation δεν είναι το μόνο πράγμα που μπορείτε να κάνετε με το jQuery φυσικά, αλλά είναι το πιο εύκολο μέρος για να ξεκινήσετε από και το πιο κοινό, γι 'αυτό το επιλέξαμε.
Για γρήγορη ανασύνταξη, το τμήμα επιλογέα αυτής της δήλωσης σας επιτρέπει να χρησιμοποιείτε ονόματα, κλάσεις ή αναγνωριστικά στοιχείων τύπου CSS για να εντοπίσετε τμήματα του DOM. Για παράδειγμα, για να τραβήξουμε όλα τα με ένα όνομα κλάσης του .hidden, θα χρησιμοποιήσαμε:
$('div.hidden') Το δεύτερο μέρος αυτής της εξίσωσης είναι η μέθοδος εκτέλεσης σε αυτούς τους DIV μόλις τις βρούμε (αν υπάρχουν καθόλου ή μπορεί να είναι μόνο ένα στοιχείο που ταιριάζει). Θυμηθείτε, το jQuery θα επιστρέψει ποτέ μόνο ένα στοιχείο για τις επιλογές ID, αφού τα αναγνωριστικά πρέπει να αναφέρονται σε μοναδικά στοιχεία. Εάν πρόκειται να έχετε περισσότερα από ένα, πρέπει να οριστεί ως κλάση στο CSS.
Στις μεθόδους στη συνέχεια? τι μπορείτε να κάνετε με τα στοιχεία του DOM ούτως ή άλλως;
Αρχικά, σας παρουσιάσω την τελευταία φορά στη μέθοδο .css για να μπορέσετε να το χρησιμοποιήσετε για έλεγχο. Η μορφή είναι απλή:
.css('property', 'value'); Οτιδήποτε ορίζεται από το CSS μπορεί ως εκ τούτου να ρυθμιστεί από jQuery - χρώματα, διαφάνεια, θέση, μέγεθος - για να αναφέρουμε μόνο λίγα. Η αλλαγή είναι άμεση.
Αν προτιμάτε να ζωντανέψετε τις αλλαγές του CSS, τότε έχω υπέροχα νέα για εσάς. υπάρχει επίσης μια μέθοδος που ονομάζεται .animate () . Είναι όμως πιο περίπλοκο:
.animate({'property':'value'}, speed); Για παράδειγμα:
.animate({'opacity':'0.25', 'height':'100px'}, 'fast'); Σε αυτό το σημείο, ίσως να αναρωτιέστε τι είναι οι σγουρές τιράντες? αυτοί ονομάζονται "αντικείμενο κυριολεκτικά" και συνήθως χρησιμοποιούνται για να δημιουργήσουν μια λίστα με ζεύγη ιδιοτήτων: αξίας, κάτι σαν ένας ευρετηριασμένος πίνακας, αν προέρχεστε από άλλες γλώσσες. Θα τα χρησιμοποιήσετε πολύ στο jQuery, γι 'αυτό θα το πείτε ξανά - συνηθίστε να ελέγχετε σωστά για κλειστά στηρίγματα και τιράντες!
Ελέγξτε αυτή τη σελίδα για πολλά παραδείγματα εργασίας της κινούμενης μεθόδου.
Εκτός από το χειρισμό των ιδιοτήτων CSS κάποιου, μπορείτε να προσαρμόσετε τα περιεχόμενά του με το . (), .html () και .val () μέθοδοι επίσης (val είναι για τα περιεχόμενα των στοιχείων φόρμας) . Αυτές οι μέθοδοι δρουν ως και οι δύο set και get ters. αν δεν καθορίσετε μια τιμή, θα πάρει την τρέχουσα τιμή. Εάν καθορίσετε μια τιμή, θα αντικαταστήσει την τρέχουσα τιμή.
Ακολουθούν μερικά γρήγορα παραδείγματα:
Αποκτήστε την τρέχουσα τιμή του πεδίου ονόματος στη φόρμα σχολίων και αναθέστε την σε μια μεταβλητή comment_name :
var commenter_name = $(#comment-form #name).val(); Ορίστε την τιμή της τιμής που έχει ληφθεί από το commenter_name :
$('span.name').text(commenter_name); Στη συνέχεια, έχουμε μια τεράστια ποικιλία μεθόδων για την κλωνοποίηση, τη μετακίνηση, την εισαγωγή ή τη διαγραφή τμημάτων του DOM. Η φαντασία σας είναι το όριο, πραγματικά.
Ας υποθέσουμε ότι θέλετε να εισαγάγετε δυναμικά ένα μπλοκ διαφημιστικής εικόνας μετά από κάθε 3η παράγραφο στη στήλη περιεχομένου, αλλά το κάνετε με Javascript, έτσι ώστε το αρχικό φορτίο της σελίδας να διατηρείται καθαρό. Ακούγεται αρκετά περίπλοκο, σωστά; Μετά βίας…
$('div#content p:nth-child(3n)').after(' 
'); 
');Αν σπάσουμε αυτό, ζητήσαμε από το jQuery:
- Βρείτε το div με ένα ID του "περιεχομένου"
- Βρείτε τα p που περιέχονται μέσα στο div
- Φιλτράρετε σε κάθε 3ο p χρησιμοποιώντας pseudo-selector nth-child (περισσότερο εδώ)
- Εισαγάγετε ένα αυθαίρετο img μετά από κάθε στοιχείο αντιστοίχισης
Δεν μπορώ να αναφέρω όλες τις μεθόδους εδώ και δεν θα ήθελα να το διαβάσετε. Το θέμα είναι ότι υπάρχει μια μέθοδος για να κάνετε ό, τι μπορείτε να σκεφτείτε όταν πρόκειται για χειραγώγηση, οπότε ελέγξτε το API για ένα που μπορείτε να χρησιμοποιήσετε.
Επίσης, να έχετε κατά νου ότι ενδέχεται να υπάρχουν περισσότεροι από ένας τρόποι να κάνετε κάτι. Αν, για παράδειγμα, δεν μπορείτε να περιορίσετε το σωστό αντικείμενο στο insertAfter (), ίσως σκεφτείτε να βρούμε το επόμενο παιδί κάτω και χρησιμοποιώντας το insertBefore () αντί.
Μέθοδος αλυσίδας
Τέλος σήμερα, ας μιλήσουμε γρήγορα για την αλυσιδωτή μέθοδο, βασικά μόνο επειδή είναι φοβερό. Πρώτον, ας εξετάσουμε τις ακόλουθες γραμμές κώδικα:
$('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 μας, ή ακόμα και τη σελίδα Best WordPress Plugins.