DOUG LLOYD: Σε αυτό το βίντεο, θελήσαμε να φωνάξει ιδιαίτερης προσοχής σε ένα πολύ συγκεκριμένο στοιχείο το JavaScript ότι μπορεί να φανούν χρήσιμες όταν ξεκινάτε να εργαστούν για το χειρισμό ιστοσελίδες και να αλλάξει το περιεχόμενο της ιστοσελίδας σας σχετικά με τη μύγα. Και αυτή είναι η έννοια της το Document Object Model. Έτσι, όπως είδαμε στο βίντεο μας JavaScript, τα αντικείμενα είναι πολύ ευέλικτο. Και μπορούν να περιέχουν διάφορα πεδία. Και αν εμείς δεν πάμε σε πολλά λεπτομέρεια, αυτά τα πεδία ή ιδιότητες, ότι θα πιθανώς περισσότερο κατάλληλα τους αποκαλούν στο πλαίσιο ενός αντικειμένου, ακόμη και αυτές οι ιδιότητες μπορεί να είναι άλλα αντικείμενα. Και μέσα από αυτά τα αντικείμενα μπορεί να είναι άλλα αντικείμενα. 

Έχετε αυτό το πολύ μεγάλο αντικείμενο με πολλά άλλα αντικείμενα στο εσωτερικό του, το οποίο το είδος του δημιουργεί την ιδέα ενός μεγάλου δέντρου. Τώρα, το αντικείμενο είναι ένα έγγραφο πολύ ιδιαίτερο αντικείμενο στο JavaScript ότι οργανώνει ολόκληρο τον ιστό σας σελίδα κάτω από αυτό το είδος της ομπρέλας ενός αντικειμένου. Και έτσι μέσα του εγγράφου αντικείμενο είναι αντικείμενα που παρουσιάζουν το κεφάλι και το σώμα της ιστοσελίδας σας. 

Μέσα από αυτά είναι και άλλα αντικείμενα, κ.λπ., κ.λπ., έως ότου ολόκληρη η ιστοσελίδα σας έχει έχουν οργανωθεί σε αυτό το μεγάλο αντικείμενο. Ποιο είναι το ανάποδα εδώ, σωστά; Λοιπόν, ξέρουμε πώς να εργάζονται με αντικείμενα σε JavaScript. 

Έτσι, αν έχουμε ένα αντικείμενο που αναφέρεται σε ολόκληρη την ιστοσελίδα μας, ότι σημαίνει καλώντας τη σωστή μεθόδους για να χειριστείτε αυτό το αντικείμενο ή την τροποποίηση ορισμένων των ιδιοτήτων του, θα μπορεί να αλλάξει τα στοιχεία του σελίδα μας προγραμματισμού τη χρήση JavaScript αντί να κωδικοποιήσει τα πράγματα με το, ας πούμε, HTML. Έτσι, εδώ είναι ένα παράδειγμα ενός πολύ απλή ιστοσελίδα, σωστά; Είναι πήρε HTML tags, ένα κεφάλι. 

Στο εσωτερικό του υπάρχει ένας τίτλος, hello world. Στη συνέχεια, έχω ένα σώμα. Μέσα από αυτό, έχω τρία διαφορετικά πράγματα. Έχω μια header ετικέτα H2, μια παράγραφο, και ένα σύνδεσμο. Αυτή είναι μια πολύ απλή ιστοσελίδα. 

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

Μέσα από το έγγραφο είναι ένα άλλο αντικείμενο που αναφέρεται στην HTML της σελίδας μου. Και η HTML της σελίδας μου είναι όλα αυτά. Και στη συνέχεια εσωτερικό του HTML αντικείμενο, έχω ένα αντικείμενο στο κεφάλι, το οποίο αναφέρεται στην πάντα εκεί. 

Και μέσα από εκεί, Έχω ένα αντικείμενο τίτλου. Και μέσα από εκεί, έχω ένα άλλο αντιτείνουν ότι είναι απλά ένα γεια κόσμο. Θα μπορούσα να έχω το σώμα μου αντιπροσωπεύεται σαν αυτό. 

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

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

Και έχω ανοίξει Εργαλεία για προγραμματιστές. Και σε βίντεο μου για JavaScript, Ι αναφέρουν ότι η κονσόλα δεν είναι μόνο κάπου όπου τυπώνουμε πληροφορίες, είναι επίσης ένα μέρος όπου μπορούμε να εισάγουμε πληροφορίες. Σε αυτό το πλαίσιο, τι Πάω να πω είναι Θα ήθελα να επιστρέψω τα αντικείμενα έγγραφο, ώστε να μπορώ να αρχίσετε να έχετε μια ματιά σε αυτό. Λοιπόν, πώς θα μπορούσε να το κάνω αυτό; Λοιπόν, αν θέλω να οργανώσει πραγματικά όμορφα, Πάω να πω console.dir, D-Ι-Κ. Τώρα, μπορώ να χρησιμοποιήσω console.log σε μόλις εκτύπωση κάτι πολύ απλό. Αλλά αν θέλω να το οργανώσουμε ιεραρχικά σαν ένα αντικείμενο, Θέλω είδος των δομημένων σαν μια δομή καταλόγου. 

Γι 'αυτό θέλω να console.dir έγγραφο. Πάω να πατήστε Enter. Και ακριβώς από κάτω τώρα, και εγώ θα μεγεθύνετε εδώ, Έχω αυτό το έγγραφο απάντηση με ένα μικρό βέλος δίπλα σε αυτό. Τώρα, όταν ανοίγω αυτό το βέλος, εκεί πρόκειται να είναι πολλά πράγματα. 

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

Έτσι, Πάω να ανοίξει αυτό επάνω. Και υπάρχει ένα πάρα πολύ πράγματα που αναδύεται. Αλλά όλα νοιάζει είναι ακριβώς εδώ, οι κόμβοι παιδί. Ας ανοίξουμε το επάνω. 

Μέσα από εκεί βλέπω κάτι γνωστό, HTML. Έτσι, στο εσωτερικό του εγγράφου μας ένα επίπεδο πιο κάτω, HTML. Ανοίγω το επάνω. Τι περιμένουμε; 

Αν θυμάστε από το διάγραμμα μας, τι πρέπει να βρείτε μέσα της HTML; Ποιες δύο κόμβοι είναι κάτω στο δέντρο; Ας ανακαλύψουμε. Έχουμε ανοίξει HTML. Κατεβαίνουμε σε κόμβους παιδί του. 

Pop που ανοίγουν. Υπάρχει κεφάλι και το σώμα. Και μπορούμε να ανοίξουμε το κεφάλι. Μετάβαση σε κόμβους παιδί του. Λοιπόν, υπάρχει ο τίτλος. 

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

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

Και όταν ενημερώσουμε ιδιότητες του Document Object ή καλέστε τις μεθόδους αυτές, τα πράγματα μπορεί να συμβεί στην ιστοσελίδα μας. Και δεν χρειάζεται να κάνει οποιαδήποτε δροσιστικό να έχουν αυτές οι αλλαγές τεθούν σε ισχύ. 

Και αυτό είναι ένα πολύ δροσερό δυνατότητα να έχουν όταν δουλεύουμε με κωδικό. Έτσι τι είναι μερικές από αυτές τις ιδιότητες που αποτελούν μέρος ενός αντικειμένου εγγράφου; Λοιπόν, ίσως είδε ένα μερικά από αυτά πολύ γρήγορα όπως είχαμε zipping μέσω του γίγαντα έγγραφο αντικείμενο που μόλις είδατε στο web browser. 

Όμως, ένα ζευγάρι από αυτές τις ιδιότητες μπορεί να είναι τα πράγματα όπως εσωτερική HTML. Και ίσως να θυμηθούμε μένα, ακόμη και χρησιμοποιώντας αυτό στο βίντεο JavaScript στο τέλος, όταν μιλούσε για γεγονότα. Ποια ήταν αυτή η εσωτερική HTML; Λοιπόν, αυτό είναι ακριβώς ό, τι είναι μεταξύ των ετικετών. 

Και έτσι η εσωτερική HTML, για παράδειγμα, του τίτλου ετικέτα, αν είχαμε συνεχίζαμε σε ότι το παράδειγμα πριν από λίγο, θα ήταν hello world. Αυτός ήταν ο τίτλος της σελίδας μας. Άλλες ιδιότητες περιλαμβάνει το όνομα κόμβου, ο οποίος είναι το όνομα μιας HTML στοιχείο όπως ο τίτλος. ID, το οποίο είναι το αναγνωριστικό αποδίδουν ενός στοιχείου HTML. 

Υπενθυμίζουμε ότι μπορούμε να υποδείξει ειδικά συγκεκριμένα στοιχεία της HTML μας με ένα χαρακτηριστικό αναγνωριστικό, το οποίο συνήθως έρχεται σε πρακτικό, στο πλαίσιο των CSS, ειδικά. Μητρικό κόμβο, η οποία είναι μια αναφορά σε τι είναι ακριβώς από πάνω μου στο DOM. Και κόμβους παιδί, το οποίο είναι ένα αναφορά σε αυτό που είναι κάτω από μένα. Και είδαμε πολλά γι 'αυτό απλά ψάχνουν μέσα. Κόμβους παιδί, αυτό είναι το πώς φτάσαμε και χαμηλότερα στο δέντρο. 

Χαρακτηριστικά, αυτό είναι μόνο μια σειρά της χαρακτηριστικά του στοιχείου HTML. Έτσι, ένα παράδειγμα θα μπορούσε χαρακτηριστικά είναι εάν έχετε μια ετικέτα εικόνας, έχει συνήθως ένα χαρακτηριστικό πηγή, ίσως ένα ύψος και το πλάτος χαρακτηριστικό. Και έτσι αυτό θα ήταν απλά ένας πίνακας από όλα τα χαρακτηριστικά που συνδέονται με εκείνο το στοιχείο HTML. 

Style είναι ένα άλλο που δεν αντιπροσωπεύει το CSS styling ενός συγκεκριμένου στοιχείου. Και αργότερα σε αυτό το βίντεο, θα ειδικώς στυλ μόχλευση για να κάνει ένα ζευγάρι από αλλαγές στην ιστοσελίδα μας. Έτσι, αυτές είναι μερικές ιδιότητες. 

Και υπάρχουν και κάποιοι μεθόδους που μπορούμε να χρησιμοποιήσετε για να επίσης πιο γρήγορα ίσως απομόνωση στοιχεία του Αντικειμένου Εγγράφου. Ίσως, το πιο ευέλικτο των οποίων είναι getElementById. Γι 'αυτό και θα μπορούσε να πει κάτι σαν, επειδή να θυμάστε ότι είναι μια μέθοδος του εγγράφου Αντικείμενο, document.getElementById. 

Και μέσα από αυτές τις παρενθέσεις, καθορίστε ένα στοιχείο HTML με ένα συγκεκριμένο αναγνωριστικό χαρακτηριστικό που έχω στο παρελθόν που, και εγώ θα αμέσως πηγαίνετε δεξιά στο στοιχείο αυτό του συνολικού ιστοσελίδας. Γι 'αυτό και δεν χρειάζεται να τρυπάνι ίσως κάτω, σε κάθε στρώση. Μπορώ να χρησιμοποιήσω μόνο αυτή τη μέθοδο για να το βρείτε, περίπου όπως ένα πύραυλο θερμότητας που αναζητούν, δικαίωμα? Απλά πηγαίνει και βρίσκει ακριβώς αυτό που ψάχνει. 

GetElementsByTagName είναι πολύ παρόμοια στο πνεύμα. Ίσως αυτό θα βρείτε όλα τα έντονους ετικέτες ή το σύνολο των ετικετών p και να μου δώσει μια σειρά από ό, τι ότι θα μπορούσα τότε να συνεργαστεί με. appendChild προσθέτει κάτι ένα επίπεδο πιο κάτω στο δέντρο. 

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

getElementById-- το d είναι πεζά. Δεν μπορώ να σας πω πόσες φορές έχω μεταχειρισμένα getElementById και της κεφαλαιοποιημένης το δ εκεί. Επειδή είναι πολύ συχνές. Αν γράφουμε το αναγνωριστικό λέξη, είναι συνήθως κεφάλαιο Ι κεφάλαιο Δ Και τον κωδικό μου απλά δεν λειτουργεί. Και δεν μπορώ να καταλάβω γιατί. Αυτό είναι ένα πραγματικά, πραγματικά, πραγματικά κοινό σφάλμα που όλοι κάνουν, ακόμη και οι εμπειρογνώμονες που έχουν το κάνουν αυτό για πάντα. Έτσι απλά να γνωρίζουν, getElementById, ότι d είναι πεζά. Και ελπίζουμε, ότι σας εξοικονομεί αρκετά λεπτά τουλάχιστον στενοχώρια. 

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

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

Μας αρέσει να είναι σε θέση να κάνουμε τα πράγματα γρήγορα. Έτσι, θα θέλαμε μια πιο συνοπτικό τρόπο για να πω κάτι. Έτσι, αυτό το είδος της οδηγεί στην έννοια της κάτι που ονομάζεται jQuery. Τώρα δεν είναι jQuery JavaScript. Δεν είναι μέρος της JavaScript. 

Είναι μια βιβλιοθήκη που γράφτηκε από κάποιους προγραμματιστές JavaScript Πριν από περίπου 10 χρόνια. Και ο στόχος της είναι να απλοποιήσει τι είναι αυτό που ονομάζεται side scripting πελάτη, η οποία είναι βασικά αυτό που ήμασταν μιλάμε για το DOM με χειρισμούς. Και έτσι αν ήθελα να τροποποιήσει το χρώμα στο φόντο της ιστοσελίδας μου, ίσως ένα ειδικό Div. 

Εδώ, είμαι προφανώς να πάρει ElementById colorDiv. Και θέλω να ορίσετε το χρώμα φόντου της. Αν είμαι απλά χρησιμοποιώντας αγνά JavaScript χρησιμοποιώντας το Document Object Model, ότι είναι πολλά πράγματα, έτσι δεν είναι; document.getElementById colorDiv.style.backgroundColor = πράσινο. 

Μπά. Αυτό ήταν μια πολλά να πει. Είναι μια πολύ να πληκτρολογήσετε, πάρα πολύ. Και έτσι σε jQuery, μπορούμε να πούμε ίσως αυτό το λίγο πιο συνοπτικά. Το εμπόριο off είναι ότι είναι ίσως λίγο λίγο πιο αινιγματικά ξαφνικά, δικαίωμα? 

Τουλάχιστον το χρονικό διάστημα είναι λίγο πιο επεξηγηματικές ως προς το τι κάνουμε. Αυτό το σύμβολο του δολαρίου, παρενθέσεις, απλά εισαγωγικά, χασίς, colorDiv, σωστά; Τι σημαίνει αυτό? Λοιπόν, αυτό είναι βασικά ακριβώς document.getElementById colorDiv. 

Αλλά είναι αυτό το είδος στενογραφίας τρόπος για να γίνει αυτό με τη χρήση jQuery. Ας ρίξουμε μια ματιά τώρα σε δυο διαφορετικούς τρόπους ότι θα μπορούσα πραγματικά χρησιμοποιήσετε αυτό το Αντικειμένου Εγγράφου Μοντέλο για να χειραγωγήσουν τα κομμάτια του site μου. Ειδικότερα, θα πάμε να εργάζεται για το χειρισμό το χρώμα ενός συγκεκριμένου Div, colorDiv, σε μια ιστοσελίδα. Έτσι, ας ρίξουμε μια ματιά σε αυτό. Εντάξει. Έτσι, είμαι σε μια σελίδα. Αυτό λέγεται test.html όταν κάνετε λήψη αυτό αν θέλετε να πειραματιζόμαστε με αυτό. Και έχω ένα σωρό κουμπιά σε αυτή τη σελίδα. Και λέω επιμέρους λειτουργίες για το χρώμα του φόντου, μοβ, πράσινο, πορτοκαλί, κόκκινο, μπλε, μία ενιαία λειτουργία για το χρώμα του φόντου, χειρισμού συμβάντων για το χρώμα του φόντου, και με τη χρήση jQuery. Τι μιλάω όταν το κάνω αυτό; Έτσι έχουμε δει τα κουμπιά. Τώρα, ας ρίξουμε μια ματιά μερικά από τον πηγαίο κώδικα εδώ. Θα ξεκινήσουμε με test.html. Έτσι, επιμέρους λειτουργίες για φόντο το χρώμα είναι αυτό που έχω πληκτρολογήσει εδώ. Επιτρέψτε μου να μετακινηθείτε λίγο. 

Και θα παρατηρήσετε ότι εγώ έχουν καθορίσει αυτά τα κουμπιά να πω όταν πατηθεί αυτό το κουμπί, κλήση της συνάρτησης γίνουν μοβ. Όταν αυτό το κουμπί κλικ, μάλλον, καλέσει η λειτουργία γίνεται πράσινο, γίνει πορτοκαλί, γίνονται κόκκινα, μπλε. Μπορείτε να μαντέψετε ότι αυτό Δεν είναι ίσως ο καλύτερος σχεδιασμός έννοια, σωστά; 

Θα ήταν ωραίο αν μπορούσα έχουν μια πιο γενική προσέγγιση. Λοιπόν, πρώτα θα ρίξουμε μια ματιά σε ό, τι είναι αυτά τα πέντε λειτουργίες document.getElementById colorDiv.style.background = μωβ, πράσινο, πορτοκαλί, κόκκινο, και μπλε, αντίστοιχα. Έτσι, δεν είναι ιδιαίτερα το καλύτερο σχέδιο. 

Το επόμενο σύνολο των κουμπιών Έχω αυτό που έχω γράψει μια ενιαία λειτουργία που ονομάζεται αλλάξετε το χρώμα που προφανώς δέχεται ένα string ως όρισμα. Έτσι, αυτό είναι λίγο καλύτερα. Μοβ, πράσινο, πορτοκαλί, κόκκινο, το μπλε είναι τώρα ένα επιχείρημα. Έτσι έχω γράψει ένα πιο γενικό περίπτωση λειτουργία JavaScript, η οποία μπορεί να μοιάζει κάπως έτσι. Είμαι περνώντας. Αυτή η αλλαγή χρώματος η λειτουργία είναι περιμένοντας ένα επιχείρημα που ονομάζεται χρώμα. Και λέω που η χρώμα φόντου με το χρώμα. Έτσι, εδώ αντιπροσωπεύει αυτό που έχω εδώ. Έτσι, αυτό είναι λίγο καλύτερα. 

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

Και έτσι σε event.JavaScript, έχω γραπτή εκδήλωση αλλαγή χρώματος, η οποία υπολογίζει ποιο κουμπί έχει πατηθεί. Αυτή είναι η γραμμή αντικείμενο σκανδάλη. Και τότε εδώ, παίρνει πραγματικά φλύαρος. Αλλά αυτό που κάνω είναι ότι είμαι τον καθορισμό του υποβάθρου χρώμα να triggerObject inner.HTML. Αυτό είναι το κείμενο μεταξύ των ετικετών κουμπιού. 

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

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

Και πώς jQuery ξέρω τι κάνω; Λοιπόν, αυτό είναι ένα από τα πλεονεκτήματα μειώσει τα μειονεκτήματα του jQuery. Μπορεί να μου επιτρέψετε να κάνω πράγματα πολύ συνοπτικά, αλλά ίσως όχι όπως διαισθητικά. Ίσως αυτά τα άλλα τρία να κάνει μια λίγο περισσότερο νόημα αυτό που κάνω. Εδώ, όμως, τι συμβαίνει; 

Προφανώς, δημιουργώντας μια ανώνυμη συνάρτηση ότι τα φορτία κάθε φορά που το έγγραφό μου είναι έτοιμο, οπότε document.ready, κάποια λειτουργία πρόκειται να συμβεί. Βασικά, όταν είναι έτοιμο ένα έγγραφο; Είναι όταν σελίδα μου έχει φορτωθεί. 

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

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

Αυτή είναι η έννοια της η οποία κουμπί έγινε κλικ. Αλλά κατά τα άλλα, αυτό είναι το είδος του συμπεριφέρεται παρόμοια με ένα γεγονός. Είναι ακριβώς το ίδιο τρόπο που Θα εκφράσουμε αυτό με jQuery. Και πάλι, αυτό είναι πιθανώς ένα πολύ περισσότερο εκφοβιστικό. Δεν είναι τόσο σαφής όσο κάτι σαν event.js, το οποίο είναι ίσως λίγο περισσότερο φλύαρη, αλλά λίγο λιγότερο εκφοβιστικό. 

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

Αυτό είναι το κόκκινο χρησιμοποιώντας το jQuery, σωστά; Όλοι συμπεριφέρονται ακριβώς το ίδιο. Μπορούν απλά να το κάνετε χρησιμοποιώντας διαφορετικές προσεγγίσεις για την επίλυση του προβλήματος. Υπάρχουν πολλά περισσότερα για να jQuery τότε είμαστε σίγουρα πρόκειται να μιλήσω για αυτό το βίντεο. Αλλά αν θέλετε να μάθετε περισσότερα, μπορείτε να πάει στο jQuery είδος της τεκμηρίωσης και να μάθουν αρκετά περισσότερο για Αυτή η πολύ ευέλικτο βιβλιοθήκη, η οποία είναι μεγάλη για να κάνει την πλευρά του πελάτη scripting, όπως αυτό που κάναμε να χειραγωγήσουν την εμφάνιση και την αίσθηση της ιστοσελίδας μας με το Document Object Model. Είμαι ο Νταγκ Lloyd. Αυτό είναι CS50.