[Powered by Google Translate] [Σεμινάριο: Jquery] [Vipul Shekhawat, Πανεπιστήμιο Χάρβαρντ] [Αυτό είναι CS50.] [CS50.TV] Εάν είστε μετά μαζί στο σπίτι, μπορείτε να έχετε πρόσβαση στην πραγματικότητα διαφάνειες μου σε απευθείας σύνδεση με τη μετάβαση σε αυτό το σύνδεσμο. Είναι TjjRWj, για bit.ly. Μπορείτε επίσης απλά να πάτε στο URL άμεσα, η οποία είναι cloud.cs50.net / ~ vshekhawat, που είναι το όνομά μου, και jquery. Θα ήθελα πολύ να σας ενθαρρύνω να ακολουθήσετε μαζί, αν είστε βλέποντας στο σπίτι, και αν είστε εδώ, επίσης, επειδή αυτό είναι μια πολύ διαδραστική παρουσίαση. 

Έτσι, σήμερα Πάω να μιλάμε για jQuery, και το πρώτο ερώτημα είναι, Τι είναι η jQuery; Φέτος, ξέρω ότι εσείς δεν καλύπτονται JavaScript σε όσο πιο αναλυτικά έχουμε τα τελευταία χρόνια. JavaScript είναι, πρώτα απ 'όλα, μόνο ένα client-side γλώσσα που χρησιμοποιείτε για να εκτελέσετε δέσμες ενεργειών και τον κωδικό στον υπολογιστή του κάθε χρήστη. Έτσι έχετε ένα διακομιστή που παρέχει ιστοσελίδες για τους ανθρώπους, αλλά ίσως να θέλετε να κάνετε πράγματα στον υπολογιστή τους, να ζητήσει από το μηχάνημά τους να στείλουν αιτήσεις στον server σας κάθε 30 δευτερόλεπτα ή κάτι τέτοιο. Μπορείτε να το κάνετε αυτό χρησιμοποιώντας JavaScript. JQuery παρέχει μόνο περισσότερη λειτουργικότητα στην κορυφή του JavaScript που κάνει επιπλέον πράγματα για σας. Αν κοιτάξετε τα περιεχόμενα στην κορυφή, που περιγράφει μερικά από τα πράγματα που είστε σε θέση να κάνει. Έτσι, συνολικά, το οποίο δημιουργήθηκε τον Ιανουάριο του 2006. Ήταν η πρώτη που σχεδιάστηκε από τον Αύγουστο του 2005. Είναι εδώ για ένα-δύο χρόνια, και αυτό είναι πραγματικά μέρος του νέου κινήματος Web 2.0 που έκανε το Internet τόσο λαμπερό. Είναι το πιο ευρέως χρησιμοποιούμενο βιβλιοθήκη JavaScript. Πάνω από 19,6 εκατομμύρια ιστοσελίδες που το χρησιμοποιούν, και η χρήση του εξακολουθεί να αυξάνεται σύμφωνα με builtwith.com, οι οποίες, προφανώς, κατά το τελευταίο έτος, μόλις έχει συνεχώς αυξανόμενη αρκετά γραμμικά. Μεταξύ των κορυφαίων 10 εκατομμύρια sites, υπάρχει ακόμα - περίπου το 40% από αυτούς χρησιμοποιούν αυτή τη στιγμή. Facebook χρησιμοποιεί, πολλές άλλες ιστοσελίδες χρησιμοποιούν αυτή τη στιγμή. Μπορείτε να δείτε σε αυτά τα στατιστικά στοιχεία σχετικά με τη δική σας, αν θέλετε. Και θα μπορούσα να πω είναι legit επειδή έχει ένα ίδρυμα και 13 μέλη του διοικητικού συμβουλίου, μαζί με μια ομάδα 20 ανθρώπων που εργάζονται σε αυτό σε τακτική βάση. Γι 'αυτό είναι πολύ διαδεδομένη, έχει. URL org, είναι φανταχτερό, έχει spin-offs για άλλα πράγματα, γι 'αυτό είναι μια μεγάλη υπόθεση. 

Γιατί θα πρέπει να το χρησιμοποιήσετε; JQuery είναι πολύ ελαφρύ. Αυτό σημαίνει ότι δεν είναι ένα τεράστιο αρχείο. Μπορείτε να κατεβάσετε η minified αρχείο, το οποίο είναι χωρίς όλα το λευκό χώρο και τα σχόλια, και είναι μόνο 32 kB. Έτσι είναι εύκολο απλά να πετάξει επάνω ιστοσελίδα σας και μόνο για να αρχίσετε να το χρησιμοποιείτε. Είναι επίσης πολύ αποτελεσματικά γραμμένο, ώστε να μην καταλαμβάνουν πολύ - δεν επιβραδύνουν την ιστοσελίδα σας πολύ όταν το χρησιμοποιείτε. Αυτό σας επιτρέπει να εφαρμόσουν τα πράγματα που προηγουμένως ήταν ανέφικτη. Υπάρχουν ορισμένες πτυχές της λειτουργικότητας, όπως η δημιουργία animations, που κανονικά θα ήταν πολύ, πολύ δύσκολο να το κάνουμε. Αλλά σε jQuery στην πραγματικότητα είναι πολύ απλό. Και υπάρχουν μερικά πράγματα που είναι ενοχλητικό να το κάνουμε, δυνατόν JavaScript, όπως την αποστολή ενός αιτήματος POST, αλλά για να στείλετε ένα αίτημα σε ένα διακομιστή, πρέπει να γράψετε πέντε ή έξι ή επτά γραμμές κώδικα. Τώρα μπορείτε να το κάνετε μόνο σε μια ενιαία γραμμή κώδικα, σε μία κλήση. Που απλοποιεί πραγματικά πολλά από τα πράγματα που κάνεις. Και όλα τα μοντέρνα παιδιά το χρησιμοποιούν. Με αυτό, εννοώ εμένα. Στο τελικό σχέδιο μου το περασμένο έτος, το οποίο είναι news.whrb.org, η οποία είναι για το ραδιοφωνικό σταθμό, δημιούργησα αυτό το blog το οποίο φιλοξενεί όλες τις παραστάσεις που έχουμε κάνει και τα αρχεία MP3 για αυτούς. Μπορείτε να περιηγηθείτε μέσα από το παρελθόν δείχνει, και όλα γίνονται χρησιμοποιώντας jQuery. Μπορείτε να πείτε εξαιτίας όλων αυτών των animations, κατ 'ουσίαν. Έτσι, εάν έχετε - αν δημιουργείτε μια νέα θέση, θα δείτε αυτά τα μικρά slideDowns? Αυτό είναι όλα γίνονται χρησιμοποιώντας jQuery. Και αυτό fade - έτσι ώστε είδους πράγματα είναι όλα γίνονται χρησιμοποιώντας jQuery, και δεν χρειάζεται να φορτώσετε εκ νέου συνεχώς την σελίδα για να περιηγηθείτε στο site. Ένα άλλο δροσερό πράγμα που κάνει χρήση jQuery είναι αυτή η παρουσίαση. Είμαι χρησιμοποιώντας αυτή την ανοιχτή πράγμα πηγή που ονομάζεται scrolldeck, οποία κάποιος έγραψε πάνω από jQuery. Αν πραγματικά δούμε την πηγή, μπορείτε να δείτε ότι από όπου και αν χρησιμοποιείτε αυτό το σύμβολο του δολαρίου? σύμβολα του δολαρίου χρησιμοποιούνται σε jQuery για να δηλώσει ότι μια συνάρτηση είναι μια συνάρτηση jQuery. Έτσι, από όπου και αν ορίζει ένα περιτύλιγμα στην κορυφή της jQuery που σας επιτρέπει να κάνετε μια παρουσίαση, όπως αυτή, και μπορείτε να δείτε ότι εδώ θα είστε όπως το αρχικό αρχείο jQuery, το οποίο είναι αυτό που θα πρέπει να περιλαμβάνει, εάν θέλετε να χρησιμοποιήσετε jQuery στις δικές σας ιστοσελίδες. 

Αγγίζοντας σε αυτό, πώς να το εγκαταστήσετε; Μπορείτε απλά να πάτε στο jQuery.com και να κατεβάσετε το αρχείο, προσθέστε το σε ένα κατάλογο Ιστού και να συμπεριληφθεί. Έτσι, ακριβώς στην κορυφή, στην ετικέτα της κεφαλής της HTML αρχείο σας της κύριας HTML αρχείο σας, έχουν ακριβώς αυτή τη γραμμή κώδικα με τη σωστή έκδοση για το ποια έκδοση του jQuery που χρησιμοποιείτε. Μπορείτε να το κατεβάσετε πρόκειται να jQuery.com, κάντε κλικ στο "Download jQuery," και το έχεις. Αυτό είναι όλο. Και στην πραγματικότητα, μπορούμε να ρίξουμε μια ματιά στο τι μοιάζει. Αν κάνετε κλικ στο κατεβάστε το από εδώ, jQuery είναι αυτό. Είναι απλά ένα μεγάλο αρχείο JavaScript που κάνει όλη τη μαγεία πράγματα για σας. Αυτή είναι η minified έκδοση, η οποία δεν είναι αναγνώσιμο σε όλα. Μπορείτε επίσης να εξετάσουμε την έκδοση της ανάπτυξης, το οποίο είναι αναγνώσιμο αλλά εξακολουθεί να είναι πολύ, πολύ χρονοβόρα. Είναι πολλά πράγματα εκεί μέσα. Μπορείτε επίσης να συνδέσετε στην έκδοση φιλοξενείται Google για αυτό. Έτσι, αυτό θα σας επιτρέψει να στηριχθεί μόνο στο Google να προσφέρει. Παρέχουν κάθε εκδοχή του, διαθέσιμα ανά πάσα στιγμή. Έτσι, μπορείτε πιθανώς να βασίζονται στο Google για να το φιλοξενήσει για σας. Ή μπορείτε να συνδέσετε το δικό τελευταία έκδοση του jQuery. Έχουν μια διεύθυνση URL που είναι πάντα ενημερωμένο με την τελευταία έκδοση. Είναι jQuery-τελευταία, και υπάρχει ένα πρόβλημα με αυτό, το οποίο είναι ότι, εάν η ενημερωμένη jQuery και ορισμένες από τις προηγούμενες λειτουργικότητας είχαν γίνει υποβαθμισμένο ή ξεπερασμένες, δεν μπορεί - μπορεί να αρχίσει να μην πάρει υποστηρίζεται πια. Έτσι, αν γράψετε μια ιστοσελίδα χρησιμοποιώντας την έκδοση 1.8.2, από την έκδοση 2.7 χρόνο βγαίνει ορισμένες από τις λειτουργίες που έγραψε δεν λειτουργούν πια. Έτσι είναι καλύτερο απλά να κατεβάσετε το αρχείο 32 kB, βάλετε στην ιστοσελίδα σας, και αυτό θα λειτουργήσει για πάντα. 

Πάω να πάει μπροστά και να αρχίσουμε να μιλάμε για την πραγματική λειτουργικότητα του jQuery. Το πρώτο πράγμα είναι επιλογείς. Αυτό είναι ό, τι jQuery αρχικά σχεδιάστηκε για να προσφέρει. Και μπορείτε να κάνετε κλικ στο φάκελο για να δούμε η αναλυτική τεκμηρίωση για τους επιλογείς Πάω να καλύπτει. Η ιδέα πίσω από επιλογείς είναι ότι μπορείτε να επιλέξετε στοιχεία HTML σε μια σελίδα. Στοιχεία σε μια σελίδα έχουν ταυτότητες και τάξεις και άλλες πτυχές εντοπισμό τους. Υπάρχει επίσης - αλλά επιλέγουν να φτιάξουν σε διαφορετικές τάξεις. Μερικά από τη στιγμή όπου και αν ένθετα στο εσωτερικό του άλλου. JQuery σας επιτρέπει να δημιουργήσετε απλά ερωτήματα που ανακτούν στοιχεία από τη σελίδα. Στη συνέχεια, μπορείτε να χειριστείτε αυτά τα στοιχεία χρησιμοποιώντας jQuery λειτουργίες, το οποίο αποτελεί τμήμα χειραγώγηση θα φτάσουμε αργότερα. Μπορείτε να αλλάξετε το HTML, να αλλάξετε το CSS, μπορείτε επίσης να εμψυχώσει και να προσθέτουν λειτουργίες που ενεργοποιούν για ορισμένα γεγονότα. Έτσι, για παράδειγμα, αν κάτι δεν κάνει κλικ, θέλετε κάτι να συμβεί, μπορείτε να το κάνετε χρησιμοποιώντας jQuery, καθώς και. Και υπάρχει ένας τεράστιος αριθμός των τρόποι για να επιλέξετε τα στοιχεία. Οι περισσότεροι από αυτούς που έχω χρησιμοποιήσει ποτέ, αλλά υπάρχουν και οι βασικές, το οποίο είναι πολύ σημαντικό. Ο επιλογέας στοιχείο, για παράδειγμα, αν είστε επιλέγοντας μόνο τίποτα αυτό είναι ένα div - έχω πραγματικά τον κώδικα ανοικτό για αυτή την παρουσίαση διαφανειών. Έτσι, για παράδειγμα, εδώ είναι η πρώτη διαφάνεια. Εδώ έχουμε ένα div. Εάν επιλέξετε στην πραγματικότητα όλα τα divs στη σελίδα, αυτό ακριβώς θα μας δώσει μια σειρά από όλα τα divs που υπάρχουν σε αυτό το αρχείο. Το αναγνωριστικό επιλογέας σας επιτρέπει να επιλέξετε κάτι με μια συγκεκριμένη ταυτότητα. Έτσι, αν αυτό, για παράδειγμα, αυτό το πράγμα έχει το ID "τι" και αν το κάναμε αυτό με ό, τι # αντί για κάποιο αναγνωριστικό, θα επιστρέψει μόνο έναν πίνακα που έχει ένα μόνο στοιχείο και αυτό είναι το στοιχείο της σελίδας. Μπορούμε επίσης να συνδυάσουμε επιλογείς με αυτόν τον τρόπο από την κατοχή επιλέξετε μόνο τα πράγματα με τα αναγνωριστικά που είναι divs. Έτσι, ναι. Μόνο επιλέξτε divs που έχουν αυτό το ID. Για την κατηγορία μπορείτε να χρησιμοποιήσετε μόνο μια τελεία, είναι το ίδιο πράγμα με το CSS. Απόγονος λειτουργεί επίσης? Οπότε αν έχετε κάποια τάξη και έχει ένθετα στοιχεία μέσα σε αυτό - έτσι, για παράδειγμα, υπάρχει κάποια τάξη και να έχει μια ετικέτα άγκυρα να συνδεθεί με μια άλλη σελίδα, μπορείτε να χρησιμοποιήσετε αυτήν τη σύνταξη για να ανακτήσετε το σύνδεσμο. Μπορείτε επίσης να επιλέξετε πολλαπλά πράγματα ταυτόχρονα? Απλά να τους χωρίσει από κόμματα, χρησιμοποιήσετε οποιοδήποτε επιλογέα θέλετε, και θα επιλέξετε όλα αυτά ταυτόχρονα, σε ένα ενιαίο πίνακα. Και έπειτα υπάρχει και το όχι επιλογέα, ώστε να μπορείτε να επιλέξετε όλα τα divs που δεν έχουν κάποια συγκεκριμένη κατηγορία. Και αυτό είναι μόνο ένα χρήσιμο τρόπο για να πάρετε μια εισαγωγή για το πώς αυτή η επιλογή λειτουργεί. Θα σας δείξω μερικά συγκεκριμένα παραδείγματα σε ένα δευτερόλεπτο. 

Σύνθετη επιλογείς είναι - αυτά είναι μερικά μόνο παραδείγματα. Υπάρχουν δεκάδες από αυτά, αλλά αν θέλετε να επιλέξετε όλες τις ετικέτες εικόνα μέσα σε κάποιο στοιχείο, τότε μπορείτε απλά να κάνετε: image. Αν θέλετε να επιλέξετε ακόμη και τα στοιχεία, για παράδειγμα, εάν υπάρχουν 20 από αυτά, θέλετε να επιλέξετε 0, 2, 4, 6 και ούτω καθεξής, κάνεις: ακόμα, ή μπορείτε επίσης να κάνετε: περίεργο. Αυτά είναι ψευδο επιλογείς, πράγμα που σημαίνει ότι υπολογίζουν πραγματικά κάθε άλλο στοιχείο και όχι μόνο πηγαίνει και την επιλογή όλα αυτά. Μπορείτε επίσης - κάθε στοιχείο μπορεί επίσης να έχει συγκεκριμένα χαρακτηριστικά. Έτσι, για παράδειγμα, την τάξη = κέντρο είναι επίσης ένα χαρακτηριστικό. Για αυτήν την ετικέτα άγκυρα, href, hypertext αναφοράς, είναι ένα χαρακτηριστικό επίσης. Έτσι, μπορείτε να επιλέξετε κάτι που συνδέεται με μια συγκεκριμένη σελίδα ή απλά - είναι πολύ γενικό. Μπορείτε να επιλέξετε τίποτα με οποιοδήποτε χαρακτηριστικό που θα θέλατε. Και τότε, επίσης, χαρακτηριστικό γνώρισμα περιλαμβάνει. Αν, για παράδειγμα, ήθελε να επιλέξετε όλα τα στοιχεία εισόδου που έχουν τη λέξη "περάσει" με το όνομα τους, αν μια σελίδα έχει ένα μπλοκ κειμένου εισόδου Αυτό ονομάζεται "password", που θα ήταν ένας τρόπος που θα μπορούσατε να επιλέξετε αυτό. Και υπάρχουν πολλά περισσότερα. Μπορείτε να πάτε μπροστά και να δούμε την τεκμηρίωση και να δούμε συγκεκριμένα παραδείγματα για το πώς λειτουργεί. 

Το επόμενο πράγμα είναι DOM χειραγώγηση. Αφού επιλέξετε τα στοιχεία, εμείς θα θέλουμε να κάνουμε πραγματικότητα τα πράγματα με αυτούς. Μέχρι στιγμής δεν έχουμε κοίταξε καθόλου, αλλά αν δείτε την τεκμηρίωση, υπάρχει πραγματικά πολλά που θα μπορούσαμε να κάνουμε. Σε αυτό το σημείο, θα πάμε για να επιλέξετε τα στοιχεία για αυτήν την παρουσίαση και να τα διαχειριστούμε με jQuery. Επειδή αυτό υλοποιείται χρησιμοποιώντας jQuery, έχουμε πρόσβαση στη βιβλιοθήκη jQuery, και μπορούμε να χρησιμοποιήσουμε αυτές τις λειτουργίες στον κωδικό αυτό. Ένα χρήσιμο πράγμα που ίσως δεν γνωρίζουν είναι η κονσόλα. Και το Google Chrome είναι αυτό που είμαι με τη χρήση. Μπορείτε να πατήσετε alt εντολή J ή alt ελέγχου J για να ανοίξετε την κονσόλα. Στο Firefox Νομίζω εντολών, τη μετατόπιση K ή τον έλεγχο μετατόπιση Κ. Στο Safari θα πρέπει να πάτε να αλλάξετε κάποιες ρυθμίσεις. Υπάρχει μια σύνδεση, αν θέλετε να το κάνετε, αλλά σας συνιστώ να πάρει Chrome ή το Firefox. Ας ανοίξει την κονσόλα, είναι εδώ κάτω. Σας επιτρέπει να κάνετε ακριβώς ουσιαστικά τίποτα που θέλετε. Έτσι, μπορείτε απλά να πληκτρολογήσετε δημιουργήσει μια μεταβλητή που ονομάζεται x, x = 5, ας δούμε τι x + 2 είναι. Μπορείτε ακόμα να κάνετε κάτι σαν CS + Ας δούμε, x + 45, που θα είναι CS50. Μπορείτε να κάνετε ακριβώς κάποια τυπικά πράγματα JavaScript. Αλλά μπορείτε επίσης να κάνετε jQuery εδώ. 

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

Μπορείτε επίσης να αλλάξετε τις κατηγορίες. Επιστροφή σε αυτό το αρχείο στυλ, έχω δημιουργήσει αυτό για την κατηγορία νίκη που έχει το κείμενο κόκκινο χρώμα, λίγο χρώμα φόντου, και μια σκιά κειμένου. Φαίνεται φρικτή, αλλά μπορεί στην πραγματικότητα - παράγραφο αυτή αντιστοιχεί στο αναγνωριστικό κλάσης. Έτσι, μπορώ να προσθέσω την τάξη για τη νίκη. Μπορώ να εκτελέσει αυτό στην κονσόλα, και ότι θα προσθέσει αυτή την κατηγορία, και τώρα φαίνεται αποτρόπαιο, όπως αναμενόταν. Η CSS παίρνει αυτόματα εφαρμόζεται στις κατηγορίες που - αν υπάρχει CSS για μια κατηγορία, που γίνεται αυτόματα εφαρμόζεται αν αλλάξετε την κατηγορία ενός στοιχείου. Τότε μπορούμε να το αφαιρέσετε απλά χρησιμοποιώντας Remove Class. Έτσι, αν έχετε κάποιες προκαθορισμένες κατηγορίες, όπως κόκκινο ή τόνισε, και στη συνέχεια θέλετε να εφαρμόσετε αυτά σε στοιχεία, δεν χρειάζεται να κάνει όλη τη CSS styling κάθε φορά. Μπορείτε να προσθέσετε μόνο την τάξη σε ένα στοιχείο, και στη συνέχεια θα γίνει αυτόματα - αυτόματα θα φαίνονται κατάλληλες για την εν λόγω κατηγορία. Μπορούμε επίσης να αφαιρέσετε τα πράγματα? Έτσι Πάω να επιλέξετε όλα τα divs στη σελίδα και να τα αφαιρέσετε. Τι είναι αυτό πρόκειται να μοιάσει; Είναι πρόκειται να μοιάζουν με τίποτα, έτσι δεν υπάρχει πραγματικά τίποτα αριστερά. Η παρουσίασή μου έχει φύγει. Μπορώ να ανανεώσετε και να το φέρει πίσω, ευτυχώς, επειδή είναι ακριβώς τρέχει μια φορά, αλλά αυτό είναι ένα παράδειγμα της αφαίρεσης, αν θέλετε να καταστρέψει εντελώς ένα στοιχείο από τη σελίδα. 

Μπορείτε επίσης να αντικαταστήσετε, και θα πάω για να επιλέξετε όλες τις ετικέτες παράγραφο στη σελίδα και να πάει μέσα και αντικαταστήστε ό, τι κείμενο που έχουν μέσα τους μόνο με τη λέξη "δοκιμή". Αν το κάνετε αυτό, θα αντικαταστήσει κάθε παραγράφου της σελίδας με αυτή την εξέταση. Ναι. Είναι όλοι αντικατασταθεί με δοκιμή. Έτσι, αυτό είναι ένα παράδειγμα της πρόσβασης του κειμένου και αντικατάσταση αυτή. Μπορείτε επίσης να ανακτήσετε τις πληροφορίες, και αυτό είναι πραγματικά δροσερό για τα πλαίσια εισαγωγής. Εάν έχετε ένα πλαίσιο εισαγωγής που οι άνθρωποι πληκτρολογώντας πράγματα σε, οι άνθρωποι είναι πληκτρολογώντας πράγματα σε αυτό, Εδώ επιλέγουμε την είσοδο, κάθε ετικέτα εισόδου με έναν τύπο κειμένου. Στην περίπτωση αυτή, υπάρχει μόνο ένα κουτί σε όλη την παρουσίαση, έτσι θα επιλέξετε μόνο το πρώτο, και στη συνέχεια καλούμε τη συνάρτηση Val σε αυτό. Αυτό επιστρέφει την τιμή, καθώς και για ένα πλαίσιο εισόδου, η τιμή είναι ακριβώς ό, τι συμβαίνει να είναι μέσα σε αυτό. Έτσι, αν το κάνουμε αυτό, επιστρέφει ακριβώς τα πράγματα string. Και αν λέμε και πάλι μετά τη σύνταξη περισσότερα πράγματα, μετατρέπεται σε περισσότερα πράγματα. Αυτός είναι ένας πολύ καλός τρόπος για να αποκτήσετε πρόσβαση σε στοιχεία ενός πλαισίου εισαγωγής, και στη συνέχεια ελέγξτε, είναι αυτό μια έγκυρη διεύθυνση e-mail, αυτό είναι μια έγκυρη ημερομηνία, για παράδειγμα. Μπορείτε να ανακτήσετε μόνο τα πράγματα αμέσως καθώς οι άνθρωποι την πληκτρολόγηση, και στη συνέχεια ελέγξτε αν είναι έγκυρη, να το στείλετε πίσω σε ένα διακομιστή, κάντε ό, τι θέλετε με αυτό. Και αυτό είναι το πώς θα αποκτήσετε πρόσβαση σε ό, τι είναι μέσα σε αυτά τα πλαίσια. 

Μπορείτε επίσης να τροποποιήσετε CSS άμεσα, έτσι ώστε αντί της προσθήκης μια κατηγορία που έχει κάποιες προκαθορισμένες ιδιότητες, μπορείτε απλά να προσθέσετε ό, τι CSS που θέλετε με τίποτα. Επιλέξτε σώμα Οπότε ας, η οποία είναι ολόκληρη την παρουσίαση, και το χρώμα είναι η ιδιότητα που καθορίζει ποια είναι τα χρώματα του κειμένου είναι. Αν το αλλάξετε σε κόκκινο, όλο το κείμενο στη σελίδα θα γυρίσει στο κόκκινο. Μπορούμε να κάνουμε κάτι, όπως το μπλε χρώμα του φόντου, εκεί πάμε? είναι όμορφη. Μπορείτε να κάνετε ό, τι θέλετε με αυτό. Χρησιμοποιώντας την ιδιότητα CSS, μπορείτε πραγματικά να τροποποιήσετε τον τρόπο τίποτα εξετάζει ανά πάσα στιγμή. Το επόμενο πράγμα είναι αποτελέσματα. Επιδράσεις είναι βασικά το ίδιο πράγμα με την τροποποίηση του CSS, αλλά παρέχουν πραγματικά κάποια επιπλέον κίνηση σε αυτό. Οπότε αντί να δείχνει ή κρύβει κάτι ή την αλλαγή του χρώματος, μπορείτε πραγματικά να είναι animated. Εδώ είναι η τεκμηρίωση, αν θέλετε να ρίξετε μια ματιά στο εκτενή τεκμηρίωση για αυτό. Αλλά Πάω να καλύψει τα κυριότερα. Υπάρχουν την παράσταση και τις ιδιότητες απόκρυψης. Εμφάνιση / απόκρυψη ID αντιστοιχεί στην πραγματικότητα σε όλο αυτό το πλαίσιο, Έτσι, αν το κρύβω, απλά θα εξαφανιστεί. Και μπορώ να το δείξει και πάλι, αν θέλω να έρθει πίσω. Και είναι πίσω. Είναι στην πραγματικότητα δεν εξαφανίζονται, Δεν είχα αφαιρέσει πραγματικά από τη σελίδα, εγώ που μόνο την ιδιότητα CSS ορατότητας σε κρυφή έτσι δεν μπορείτε να το δείτε πια. Υπάρχει, επίσης, διαφάνεια προς τα επάνω και σπρώξτε προς τα κάτω? Που σας επιτρέπει να έχουν αυτό το αποτέλεσμα. Είναι διαφάνειες μέχρι να εξαφανιστεί, και μετά εξαφανίζεται μπορείτε να μετακινηθείτε προς τα κάτω για να έρθει πίσω. Και τώρα είναι πίσω. Υπάρχει, επίσης, αυτό το εφέ σβησίματος, το οποίο - fade ID αντιστοιχεί σε αυτό το πλαίσιο. Αν μου το fade out, τότε θα σιγά-σιγά εξαφανίζονται. Μπορώ να εξασθενίσει επίσης σε, και θα επανέλθω. Μπορείτε επίσης να κάνετε fade να, η οποία είναι ειδικά για το ξεθώριασμα λειτουργία. Μπορείτε να το έχετε εξασθενίσει σε οποιαδήποτε συγκεκριμένη αδιαφάνεια που θέλετε. Έτσι, αν το σβήνουν σιγά-σιγά να .5, αυτό θα γίνει το μισό ορατό. Μπορώ να το κάνει να πάει στο .1, και πίσω στο 1 ώστε να καταστεί πλήρως ορατά και πάλι. Αυτό είναι ακριβώς μια άλλη κίνηση που μπορείτε να κάνετε. 

Υπάρχουν επίσης οι εναλλαγής αποτελέσματα. Έτσι, Πάω να επιλέξετε την εναλλαγή ταυτότητας, το οποίο αντιστοιχεί σε αυτό το πλαίσιο, και σε αυτό το div μπορείτε να καλέσετε εναλλαγή? αν είναι ορατό θα γίνει αόρατο, αν είναι αόρατο θα γίνει ορατό και πάλι. Γι 'αυτό και ονομάζεται απλά αυτή λειτουργία εναλλαγής δύο φορές? Η πρώτη ήταν το ίδιο πράγμα με απόκρυψη, η δεύτερη κλήση ήταν το ίδιο πράγμα όπως μια επίδειξη. Και μπορείτε επίσης να κάνετε αυτό με ένα fade εναλλαγή, που κάνει το ίδιο πράγμα, εκτός του ότι στην πραγματικότητα σβήνει. Και ίδιο πράγμα με το slide εναλλαγή. Υπάρχουν αλυσοδεμένα επιπτώσεις, καθώς, το οποίο σημαίνει αν επιλέξετε ένα στοιχείο και απλά να καλέσει ένα σωρό μεθόδους animation σε αυτό, αν θέλετε να fade out, στη συνέχεια σπρώξτε προς τα κάτω, και στη συνέχεια να κρύψει και στη συνέχεια σβήνουν μέσα, αυτό θα τους κάνει σε μια σειρά. Έτσι εξαφανίστηκε, επέστρεψε - για κάποιο λόγο, οι απόκρυψη δεν συνέβη. Ας το δοκιμάσουμε. Ναι, γι 'αυτό έσβησε και στη συνέχεια γλίστρησε μακριά. Και υπάρχουν πολλά περισσότερα. Μπορείτε να χρησιμοποιήσετε τη συνάρτηση κίνησης να δημιουργήσετε το δικό σας κινούμενα σχέδια, το οποίο είναι αρκετά περίπλοκη, αλλά σας παρέχει απεριόριστη επεκτασιμότητα. Μπορείτε να κάνετε οποιοδήποτε είδος της κίνησης που θέλετε. Μπορείτε επίσης να χρησιμοποιήσετε την ουρά να περιμένω στην ουρά πολλών κινήσεων σε μια στιγμή. Έτσι, εάν θέλετε κάτι να πετάξει σε όλη τη σελίδα, slide από την πάνω δεξιά προς τα αριστερά κάτω, μπορείτε να το κάνετε αυτό, και μόλις ένα σωρό ενέργειες πηγαίνοντας ένα μετά το άλλο. 

Το επόμενο πράγμα που θα πάμε να μιλήσουμε για τα γεγονότα. Εκδηλώσεις που επιτρέπουν - μέχρι σήμερα, έχουμε μόλις πληκτρολογώντας τα πράγματα στην κονσόλα και αυτός είναι ένας τρόπος για να συμβεί αυτό, αλλά σε μια πραγματική σελίδα, είστε δεν πρόκειται να είναι σε θέση να κάνει τα πράγματα τύπο χρήστη στην κονσόλα. Θέλετε τα πράγματα να συμβούν αυτόματα. Γι 'αυτό, θα πρέπει να χρησιμοποιήσετε τα γεγονότα που ενεργοποιούν σε κάποιο συγκεκριμένο γεγονός συμβαίνει. Μπορείτε να ελέγξετε την τεκμηρίωση για τα πλήρη στοιχεία. Ας δούμε λοιπόν. Θέλουμε να αποκρύψετε ή να εμφανίσετε το πλαίσιο, αλλά τώρα αυτό το κουμπί δεν κάνει τίποτα, γιατί δεν το εφαρμόζουν ακόμη. Πάω να πάει στην πραγματική σελίδα HTML. Εδώ είναι η διαφάνεια. Υπάρχει ένα div για τη διαφάνεια. Έχει την κατηγορία των διαφανειών. Υπάρχει το κείμενο. Τώρα, υπάρχει αυτό το πλαίσιο και το κουμπί κουτί. Πώς θα μπορούμε πραγματικά να κάνουν αυτό εξαφανίζονται; Πρώτα απ 'όλα, ας γράψει μια λειτουργία που κάνει το ID box εξαφανιστεί. Αυτή είναι η σύνταξη για funtion, ας το ονομάσουμε hideTheBox. Δεν παίρνει κανένα επιχείρημα, γιατί δεν υπάρχουν επιχειρήματα που πρέπει να ληφθούν. Μπορούμε να επιλέξετε το αναγνωριστικό κουτί. Έτσι, χρησιμοποιώντας το jQuery επιλογή, μπορούμε να επιλέξουμε ID box, και στη συνέχεια απλά να εξαφανιστεί. Ας κάνει fade out. Αν τρέξαμε αυτή τη λειτουργία στην πραγματική κονσόλα, θα μπορούσαμε να ορίσουμε αυτή τη λειτουργία? μπορούμε να ονομάσουμε hideTheBox, και λειτουργεί. Αλλά θέλουμε να συμβεί όταν το κουμπί είναι πραγματικά πιέζεται. Για να γίνει αυτό, θα πρέπει να χρησιμοποιήσετε μια εκδήλωση. Για να συνδέσετε ένα συμβάν σε κάποιο συγκεκριμένο κουμπί ή κάποια συμβαίνει δράσης, πρέπει να επιλέξετε το στοιχείο ότι το γεγονός θα προκαλέσει - ή ότι θα προκαλέσει την εκδήλωση, συγγνώμη. 

Έτσι, πρώτα απ 'όλα, ας επιλέξουμε το αναγνωριστικό κουμπί box γιατί αυτό είναι το κουμπί, και τώρα, για το εν λόγω κουμπί, θέλουμε να δημιουργήσουμε μια κινούμενη εικόνα, όταν γίνεται κλικ. Έτσι υπάρχει αυτή η λειτουργία κλικ. Σας επιτρέπει να δεσμεύσει άλλη λειτουργία σε αυτό. Αυτή η συνάρτηση παίρνει μια άλλη λειτουργία ως επιχείρημα μπορούμε να περάσουμε στη λειτουργία hideTheBox, και όποτε πατηθεί αυτό το κουμπί, η λειτουργία θα εκτελέσει αυτόματα. Έτσι, αυτό θα λειτουργήσει εάν θα σώσει αυτό, θα ανανεώσετε, - από ένα δευτερόλεπτο, λυπάμαι. Επιτρέψτε μου να το διορθώσω αυτό πολύ γρήγορα. Εντάξει. Εκεί πάμε. Έτσι τώρα το πλαίσιο εξαφανίζεται όταν πατάμε το κουμπί. Μπορούμε επίσης να αλλάξετε αυτό ακριβώς fadeToggle, αλλάξετε μόνο για να αποκρύψετε ή να εμφανίσετε το πλαίσιο, και αυτό θα λειτουργήσει πάρα πολύ, αν ανανεώσετε. Μπορούμε να το κρύψει, μπορούμε να δείξουμε επίσης, και ότι θα συνεχίσει να εργάζεται. Ένα άλλο πράγμα που μπορούμε να κάνουμε είναι, εμείς στην πραγματικότητα, δεν χρειάζεται να ορίσετε αυτή τη λειτουργία hideTheBox πριν καλούμε τη συνάρτηση κλικ. Έτσι, αντί να καθορίζουν τη λειτουργία και καλώντας hideTheBox, είμαστε μόνο πρόκειται να την αποκαλούν, αν αυτό το πράγμα έχει πατηθεί. Έτσι μπορούμε να ορίσουμε ανώνυμα εδώ, το οποίο είναι ένα χαρακτηριστικό που έχει JavaScript. Μπορείτε να ορίσετε μια λειτουργία? Κανονικά, θα λέγαμε hideTheBox λειτουργία με επιχειρήματα, αλλά αντ 'αυτού, μπορούμε απλά να πούμε λειτουργήσει κανένα επιχείρημα, ξεκινήσει το άγκιστρο για να καθορίσει τη λειτουργία, κλείσει αυτό το στήριγμα σγουρά, και στη συνέχεια να ορίσετε τη λειτουργία του εδώ, εντός του πρώτου παρένθεση και το τελευταίο παρένθεση που αντιστοιχούν στα επιχειρήματα της λειτουργίας κλικ. Έτσι είμαστε περνώντας σε αυτή τη λειτουργία, μπορούμε να αντιγράψουμε αυτήν τη γραμμή κώδικα εδώ, και ότι θα κάνει ακριβώς το ίδιο πράγμα. Και τώρα, δεν έχουμε αυτό το τυχαίο λειτουργία fadeTheBox που κάθεται γύρω για κανέναν προφανή λόγο. Η λειτουργία ορίστηκε ανώνυμα, δεν έχει όνομα. Το μόνο που θα εκτελείται όταν κάνουμε κλικ στο κουμπί κουτί. Έτσι, δροσιστικό για μια ακόμη φορά, για μια ακόμη φορά, και μπορείτε να δείτε ότι εξακολουθεί να λειτουργεί. Και αυτό είναι το πώς να δημιουργήσετε γεγονότα. 

Υπάρχουν πολλές διαφορετικές εκδηλώσεις που μπορούμε να χρησιμοποιήσουμε. Πάω να στραφούν πίσω στην χρησιμοποιώντας την κονσόλα για να σας δείξει ακριβώς πώς αυτές οι εργασίες. Τα αναγνωριστικά για κάθε ένα από αυτά αντιστοιχούν στο κάθε κουτί. Έτσι, η θέση αυτή είναι κλικ ID, αυτό είναι το κλειδί ταυτότητας, και αυτό είναι το αναγνωριστικό του ποντικιού. Ένα ακόμα πράγμα είναι ότι υπάρχει αυτή η λειτουργία δράση? Αντί πληκτρολογώντας έξω κάθε φορά, Εγώ πραγματικά πήγε μπροστά και ορίζεται αυτή τη λειτουργία δράσης εδώ κάτω. Κάνει το ίδιο πράγμα με τη λειτουργία hideTheBox. Παίρνει αυτό το πλαίσιο και είτε να σβήνει ή να εξασθενίζει αυτό in Και γι 'αυτό είμαστε σε θέση να το χρησιμοποιούν εδώ. Έτσι, αν κάνουμε κλικ σε αυτό το ID κλικ, θέλουμε να κάνουμε το πλαίσιο εξαφανιστεί ή να επανεμφανίζονται. Είναι το ίδιο πράγμα με το κουμπί που είχαμε στην τελευταία διαφάνεια. Τώρα, μετά λέμε ότι, μπορούμε να κάνετε κλικ σε αυτό και το κουτί θα εξαφανιστούν, στη συνέχεια, κάντε κλικ πάνω του ξανά και το κουτί θα εμφανιστεί ξανά. Αυτό είναι αρκετά απλή. Κάντε διπλό κλικ κάνει το ίδιο πράγμα, εκτός του ότι απαιτεί ένα διπλό κλικ. Έτσι, αν κάνετε κλικ πάνω του μία φορά και κάντε κλικ σε αυτό και πάλι τίποτα δεν θα συμβεί, αλλά αν κάνετε διπλό κλικ γρήγορα, αυτό θα εξαφανιστεί. Αν κάνετε διπλό κλικ πάλι, θα επανέλθω. Έτσι ώστε να είναι αρκετά απλή. Είσοδος πληκτρολογίου είναι κάπως περίεργο? Δεν νομίζω ότι λειτουργεί πραγματικά σε αυτό το παράδειγμα επειδή το κλειδί κάτω, βασικά και πατήστε το πλήκτρο και άλλων βασικών δράσεων ενεργοποιήσετε No Matter What στοιχείο που την συνδέουν με. Για παράδειγμα, ακόμα και αν δεσμεύεται κλειδί κάτω από το σώμα ή κάτι άλλο εντελώς, τότε θα ενεργοποιήσει ακόμα δεν έχει σημασία - δεν είναι συγκεκριμένες. Δεν χρειάζεται να κάνετε κλικ σε αυτό και πατήστε ένα πλήκτρο για να κάνει τίποτα εξαφανιστούν. Θα πρέπει να ενεργοποιηθεί ανεξάρτητα από το τι στοιχείου είμαι σήμερα in Έτσι, αυτά δεν λειτουργούν πραγματικά σε αυτό το παράδειγμα γιατί δεν με αναγνωρίζει ως την είσοδο είσοδο στο div εισόδου πληκτρολογίου. 

Αλλά αν εξετάσουμε τις ενέργειες του ποντικιού, το πρώτο είναι αιωρούνται, και μπορεί να κάνει μερικά από αυτό που χρησιμοποιούν CSS. Εάν χρησιμοποιείτε CSS, μπορείτε να δημιουργήσετε, έτσι ώστε αν αιωρούνται πάνω από κάτι, τότε το στυλ αλλαγές του. Αλλά χρησιμοποιώντας jQuery μπορείτε να αλλάξετε το στυλ των άλλων, καθώς και. Έτσι, για παράδειγμα, θα πάμε να καλέσει τα κατάλληλα μέτρα αν αιωρείται πάνω από αυτό το div. Αυτό σημαίνει ότι αν έχουμε αιωρείται πάνω από αυτό, τότε το πλαίσιο θα εξαφανιστούν. Αν απομακρυνθούμε από αυτό, το πλαίσιο θα επανεμφανιστεί. Αν λέμε αυτό και να αιωρείται πάνω από αυτό, το κουτί δεν υποχωρήσει, και μόλις απομακρυνόμαστε, έρχεται πίσω. Αν καλέσετε τη συνάρτηση αυτή αιωρείται στην αναγνώριση του ποντικιού, που αντιστοιχεί σε αυτό το πλαίσιο, στη συνέχεια, αν αιωρείται πάνω από το κουτί, τότε το πλαίσιο θα είναι πράγματι εξαφανιστεί - είναι να είναι funky τώρα, αλλά - αν ξεφύγουμε από αυτό, θα επανεμφανιστεί. Αυτή τη στιγμή είναι πίσω για κάποιο λόγο. Το ποντίκι εισέλθουν και λειτουργίες κίνηση του ποντικιού είναι κάπως παρόμοια, αλλά ελαφρώς διαφορετική. Mouse εισάγετε Ενεργοποιείται μόνο όταν το ποντίκι μπαίνει στο κουτί, όπως αναμενόταν. Έτσι, αν προχωρήσουμε σε αυτό, θα εξαφανιστούν. Αλλά δεν θα εμφανιστεί ξανά όταν κινείστε μακριά? Θα πρέπει να μετακινηθείτε προς τα πίσω πάνω σ 'αυτό για να έρθει πίσω. Υπάρχει επίσης η λειτουργία κίνηση του ποντικιού, η οποία θα ενεργοποιήσει κάθε φορά που το ποντίκι είναι ακόμη παρούσα στο κουτί. Γι 'αυτό θα πρέπει ακριβώς να συνεχίσουμε να προχωράμε, το ξεθώριασμα μέσα και έξω. Και είναι πραγματικά υλοτομία - φαίνεται σαν να είναι απλά ξεθώριασμα μέσα και έξω, αλλά είναι καταγραφή στην πραγματικότητα πολύ περισσότερες δράσεις από αυτό, Έτσι, όταν απομακρύνεστε αυτό θα συνεχίσουμε, γιατί καταγράφεται σαν χιλιάδες από αυτούς. Ίσως όχι χίλια. Ίσως πέντε. Καταγράφει περισσότερο από αυτό. Το σημείο είναι, όλες οι ενέργειες του ποντικιού, υπάρχουν πολλά από αυτά. Μπορείτε να διαβάσετε σχετικά με τις άλλες, αλλά είναι όλα λίγο διαφορετικά, και μπορείτε να διαλέξετε οποιονδήποτε χρειάζεστε για οποιοδήποτε συγκεκριμένο σκοπό που προσπαθείτε να κάνετε. 

Το επόμενο πράγμα Πάω να μιλήσω είναι AJAX. AJAX, ξέρω ότι δεν καλύπτει JavaScript σε όσο βάθος το τρέχον έτος, έτσι είμαι πρόκειται να μιλήσω για AJAX σε γενικές γραμμές για ένα λεπτό. AJAX σημαίνει Asynchronous JavaScript και XML. Είναι, βασικά, για παράδειγμα, όταν είστε στο Facebook και σπρώχνει μια ειδοποίηση, αυτό συμβαίνει επειδή AJAX τρέχει στον web browser σας. Κάθε δύο δευτερόλεπτα web browser σας είναι πραγματικά Θα servers του Facebook, ζητώντας τους, έχετε κάτι νέο για μένα, και στη συνέχεια έρχεται πίσω σε σας. Αυτό σας επιτρέπει να στείλετε αιτήσεις σε ένα διακομιστή χωρίς να χρειάζεται να φορτώσει τη σελίδα. Έτσι, κατά κανόνα, εάν είστε χρησιμοποιώντας μόνο PHP και μια βάση δεδομένων, θα πρέπει να ανανεώσετε τη σελίδα για να μπορέσετε να πάρετε νέες πληροφορίες από το διακομιστή. Αλλά χρησιμοποιώντας AJAX, μπορείτε να τραβήξετε για το εν λόγω νέα στοιχεία συνεχώς, ή να τραβήξει γι 'αυτό, όταν κάνετε κλικ σε ένα κουμπί ή κάτι τέτοιο. Έτσι, αυτό μας επιτρέπει να στείλετε αιτήσεις χωρίς επαναφόρτωση της σελίδας, και μπορούμε να χρησιμοποιήσουμε είτε GET ή POST αιτήματα. 

GET αιτήματα είναι, για παράδειγμα, αν στο στο Google.com και να κάνουμε q = test. Αυτό τους δίνει ένα ερώτημα δοκιμή. Και αυτό είναι ένα GET αίτημα, γιατί είναι πέρασμα σε αυτές τις παραμέτρους στο URL ίδια. Η αίτηση POST είναι σαν να είστε αποστολή τους μέσω ταχυδρομείου. Είναι σαν να το βάλετε σε ένα έγγραφο και να το μεταφέρει μακριά για αυτούς, αλλά δεν δείτε πραγματικά τα περιεχόμενα. Δεν είναι ορατό στη διεύθυνση URL. Δεν μπορείτε να πληκτρολογήσετε άμεσα σε? Θα πρέπει να το στείλει σχεδόν κρυφά. Είναι σε μια θέση. Αλλά χρησιμοποιώντας jQuery, μπορείτε να κάνετε GET και POST αιτήματα πολύ πιο εύκολα από ό, τι κανονικά θα μπορούσε χρησιμοποιώντας απλά JavaScript. Μπορείτε να υποβάλετε ερωτήματα χρησιμοποιώντας APIs αιτήσεις GET, και μπορείτε επίσης να ελέγξετε για τις πληροφορίες σύνδεσης. Στην επόμενη σελίδα, που δημιουργήθηκε αυτό, το οποίο ρωτά, "Τι είναι για το γεύμα;" χρησιμοποιώντας το Harvard τροφίμων API, οπότε ας τραβήξει το επάνω. Αυτό είναι μόνο ένα παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε jQuery για να κάνει μια αίτηση GET σε ένα API και να πάρετε πληροφορίες πίσω από αυτό. Έτσι, θέλουμε να δούμε το μενού για σήμερα, και θέλουμε να δούμε τι είναι για το μεσημεριανό γεύμα. Εδώ είναι η διεύθυνση URL για να δημιουργήσετε μια αίτηση GET στο jQuery. χρησιμοποιείτε το $. πάρει λειτουργία. Το πρώτο επιχείρημα είναι η διεύθυνση URL, έτσι ακριβώς τι είστε επερώτηση. Στη συνέχεια, το επόμενο επιχείρημα είναι μια λειτουργία που εκτελείται όταν η αίτηση GET είναι πλήρης. Έτσι, μπορείτε να στείλετε από κάποια αίτηση στο διακομιστή, περιμένετε να έρθει πίσω. Όταν έρχεται πίσω, θα πάμε να λάβει κάποια μέτρα με τα δεδομένα που είναι πίσω από το διακομιστή. Ας πάμε μπροστά και κωδικοποίηση αυτή, καθώς και. Δεν είχα κωδικό αυτό, είτε, στο σκοπό. Εδώ είναι το Todo. Πρώτα απ 'όλα, ας χρησιμοποιήσουμε το γεγονός της δέσμευσης έτσι ώστε όταν πατηθεί αυτό το κουμπί, θα στείλει μακριά μια αίτηση GET. Και όταν η GET επιστρέφει αίτημα με ορισμένα στοιχεία, θα πάμε να το γράψετε σε αυτές τις πληροφορίες div ID γεύμα. Πρώτα απ 'όλα, ας επιλέξουμε το αναγνωριστικό κουμπί τροφίμων. Όταν κάποιος κάνει κλικ εκεί, θέλουμε να κάνουμε κάτι. Ας κάνουν ένα ανώνυμο fuction, όπως και πριν. Μπορεί να τυλίξτε τα άγκιστρα, και όταν πατηθεί αυτό το κουμπί, θέλουμε να στείλουμε μια αίτηση GET για να ελέγξει τι είναι για το μεσημεριανό γεύμα. Για να γίνει αυτό, μπορούμε απλά να πληκτρολογήσετε $. Πάρει. Αυτό είναι ένα jQuery λειτουργία, χρησιμοποιώντας το σύμβολο του δολαρίου. Παίρνει ένα ζευγάρι των επιχειρημάτων. Η πρώτη είναι η διεύθυνση URL, το δεύτερο είναι η λειτουργία επανάκλησης, η λειτουργία που λέγεται όταν η κλήση επιστρέφει στην πραγματικότητα. Ας οικοδομήσουμε απλά το URL πρώτα. Μπορούμε να το πάρετε από το API ότι ο Δαβίδ έγραψε επάνω. Πηγαίνοντας εδώ, μπορούμε να δούμε ότι είναι food.cs50.net/api/1.3/menus, και στη συνέχεια απλά να περάσει τα ονόματα των παραμέτρων που θα θέλατε. Έτσι, η παράμετρος 1 είναι η τιμή 1. Μοιάζει πρότυπο, την ημερομηνία έναρξης, προεπιλογές έως σήμερα αν δεν σημειώνεται τίποτα, και την ημερομηνία λήξης και προεπιλογές έως σήμερα, αν δεν σημειώνεται τίποτα. Αυτό είναι ό, τι θέλουμε. Θέλουμε να πάρετε μόνο τις πληροφορίες για σήμερα. 

Θέλουμε η μορφή να είναι σε JSON. Αυτό είναι μόνο αυθαίρετο? Μπορείτε να χρησιμοποιήσετε οποιαδήποτε μορφή που θέλετε. Μπορείτε να χρησιμοποιήσετε CSV, αλλά JSON είναι JavaScript Object Notation. Είναι πολύ εύκολο για JavaScript για να καταλάβετε τι σημαίνει αυτό, και μπορούμε να εκτυπώσετε πιο εύκολα με αυτόν τον τρόπο. Οπότε ας το ζητήσει JSON, και το μεσημεριανό γεύμα αίτημα ας. Έτσι γεύμα = γεύμα. Ακριβώς για να γράψω αυτό το URL, πάμε πίσω εδώ. Υπάρχει μενού. Η πρώτη παράμετρος είναι η έξοδος = JSON γιατί αυτό είναι που θέλουμε, και ο διαχωρισμός των παραμέτρων με ένα «και». Η δεύτερη παράμετρος είναι - δεν θυμάμαι. Γεύμα. Και θέλουμε μεσημεριανό γεύμα =. Μπορείτε να δοκιμάσετε αυτό το URL, πληκτρολογώντας στον browser σας και να πηγαίνει σε αυτό. Θα σας δώσει κάποιο αποτέλεσμα. Είναι απλά ένα σωρό πράγματα που είναι για το μεσημεριανό γεύμα. Είναι σε αυτό το άσχημο μορφή. Θέλουμε να το εκτυπώσετε στην σελίδα μας σε μια καλύτερη μορφή. Έτσι, η διεύθυνση URL είναι σωστή, τώρα απλά πρέπει να γράψει μια λειτουργία να καλέσει πίσω, όταν η αίτηση είναι επιτυχής. Αυτή η λειτουργία θα λάβει πράγματι ένα επιχείρημα. Θα είναι τα δεδομένα. Τα δεδομένα είναι ό, τι έρχεται πίσω από την αίτηση GET μετά την αίτηση GET γίνεται. Μπορούμε να κάνουμε τα άγκιστρα? Εδώ γράφουμε την ανώνυμη συνάρτηση που εκτελεί, με τα δεδομένα αυτά όταν παίρνουμε τις πληροφορίες πίσω. Έτσι, τα δεδομένα, όταν πληκτρολογούνται σε αυτό το URL, Αυτό είναι ό, τι τα δεδομένα που πρόκειται να μοιάσει. Είναι πρόκειται να είναι αυτό το τεράστιο string. Αλλά το καλό πράγμα είναι, JavaScript μπορεί να αναλύσει με τη χρήση του JSON.parse λειτουργία. Ας δημιουργήσουμε μια νέα μεταβλητή που ονομάζεται αναλύσει τα δεδομένα. Και να αναλύσει τα δεδομένα είναι μια σειρά από αντικείμενα. Κάθε αντικείμενο περιέχει πληροφορίες όπως - καλά, ας ρίξουμε μια ματιά. Έχει μια ημερομηνία, ένα γεύμα, κατηγορία, συνταγή, όλα αυτά τα άλλα πράγματα. Οπότε ας εκτυπώσετε το όνομα για κάθε μία. Ας επαναλάβει σε όλο το φάσμα των πράγματα που θα πάρετε πίσω από αυτό, και απλά να εκτυπώσετε το κάθε ένα - εκτυπώσετε το όνομα του καθενός. Αυτό είναι ένα για το βρόχο. 

JavaScript έχει αυτό το χρήσιμο σύνταξη, όπου μπορείτε να δημιουργήσετε μια μεταβλητή και θηλιά πάνω από έναν πίνακα, και var i είναι μόνο η iterator, έτσι ώστε αντί να έχουν να κάνουν var i = 0, Θα ήταν λιγότερο από το μήκος, i + +, μπορείτε απλά να κάνετε var i στο αναλυθεί τα δεδομένα. Σε αυτό το παράδειγμα, αναλυμένη δεδομένων (i) θα αντιστοιχεί στο τρέχον στοιχείο της συστοιχίας, το πραγματικό αντικείμενο. Και θέλουμε να πάρει το όνομα από αυτό. Οπότε ας κάνουμε το όνομα. Και το τελευταίο πράγμα είναι, θα πάμε να έχουν κάποια jQuery και πάλι. Στην πραγματικότητα το προσθέσετε στο div, αυτό div πληροφορίες γεύμα που είναι άδειο. Έτσι, ας επιλέξουμε αυτό. Θα χρησιμοποιήσουμε jQuery και επιλέξτε Πληροφορίες γεύμα ID div, ή το γεύμα ID πληροφορίες, συγγνώμη. Θέλουμε να επισυνάψει σε αυτό. Αν κάναμε δοκιμή, για παράδειγμα, θα ήταν απλώς να αντικαταστήσετε κάθε φορά. Έτσι μπορούμε να προσαρτήσει μόνο αυτό. Το τρέχον στοιχείο του πίνακα, θα πάρει το όνομα από αυτό, και θα το προσθέσετε στο τέλος της επικοινωνίας div ID γεύμα. Και τότε ακριβώς για να φανεί καθαρότερα, θα επισυνάπτει επίσης μια αλλαγή γραμμής, έτσι δεν είναι όλα σε μια γραμμή. Έτσι, αν όλα πάνε καλά, αυτό θα πρέπει να είναι καλό να - πρώτα απ 'όλα, όταν πατηθεί αυτό το κουμπί, θα στείλει μακριά μια αίτηση GET σε αυτό το URL. Όταν τα δεδομένα που έρχεται πίσω από αυτό, θα το αναλύσει, να το μετατρέψει σε JSON, βρόχο πάνω από το σύνολο της διάταξης που αντιπροσωπεύει τα δεδομένα, και στη συνέχεια να προσθέσετε το όνομα και μια αλλαγή γραμμής σε κάθε γραμμή σε αυτό το ID info γεύμα το οποίο στο παρελθόν ήταν άδειο. Έτσι, πηγαίνει πίσω σε αυτή τη σελίδα, θα ανανεώσουμε, κλικ, να μάθετε - δεν λειτουργεί. Αυτό είναι ατυχές. Και αυτό είναι όπου debugging μπαίνει Index.html, γραμμή 1. Ενδιαφέρον. Εντάξει, λοιπόν, αντί να ξοδεύουν το χρόνο τους κάνοντας αυτό, είμαι απλώς πρόκειται να τραβήξτε το κάνει αρχείο που έχω, η οποία είναι η ολοκληρωμένη έκδοση. Δεν είμαι σίγουρος ποια είναι η διαφορά, αλλά μπορούμε να ανοίξουμε ακριβώς αυτό επάνω αντ 'αυτού. Και πάμε στο AJAX, και αυτό πρέπει να λειτουργούν σωστά. Αυτό είναι ό, τι ήταν για το μεσημεριανό γεύμα σήμερα, σε καμία ιδιαίτερη διαταγή, με εισαγωγικά γύρω από αυτό, έτσι δεν είναι η ομορφότερη. Αλλά, προφανώς, αν το έκαναν αυτό για ένα τελικό σχέδιο, θα να φανεί καλύτερα. Αλλά αυτό είναι μόνο ένα απλό παράδειγμα για το πώς να κάνετε την αίτηση GET. Και αν δούμε τον πραγματικό κώδικα, υποθέτω, είμαι σίγουρος Είναι ακόμα λίγο πολύ το ίδιο. Ω, ξέχασα να το μετατρέψει σε μια σειρά, αυτό είναι όλο. Όχι, δεν είναι ακόμα λειτουργεί. Ανεξάρτητα, εδώ είναι η πραγματική ολοκλήρωση κώδικα για ό, τι αυτό θα πρέπει να μοιάζει, και να κάνει το ίδιο πράγμα με αυτό που μόλις εφαρμοστεί. Όταν κάνετε κλικ στο κουμπί, χρησιμοποιεί GET JSON για να αναλύσει τα δεδομένα αυτόματα. Παίρνει τα δεδομένα πίσω από αυτό και βρόχοι σε όλο το φάσμα και εκτυπώνει την - όποια και αν είναι για το μεσημεριανό γεύμα σήμερα, το όνομα του, και προσθέτει μια αλλαγή γραμμής μετά από κάθε γραμμή. Αυτό είναι το πώς μπορείτε να χρησιμοποιήσετε το GET λειτουργία. 

Μπορείτε επίσης να χρησιμοποιήσετε το Ταχυδρομείο, το οποίο δεν είχα χρόνο να γράψω ένα παράδειγμα γι 'αυτό, αλλά μπορούμε να δούμε την τεκμηρίωση. Αν κοιτάξετε jquery.post, μπορείτε να δείτε ότι είναι σχεδόν το ίδιο πράγμα. Έχετε μια διεύθυνση URL, αλλά αντί να διέρχεται παραμέτρων με τη χρήση - απλά να τους βάζοντας στη σειρά για τη διεύθυνση URL ίδια, θα πρέπει να περάσει στη μεταβλητή αυτή δεδομένων αυτό είναι βασικά ένας πίνακας, ένα λεξικό που χαρτογραφεί τις παραμέτρους για τις τιμές. Περνάτε ότι, και ότι τους στέλνει στην χρήση POST. Και τη στιγμή που έχετε αυτό, τότε μπορείτε να έχετε μια λειτουργία επιτυχία που εκτελεί όταν τα δεδομένα έρχεται πίσω. Διαφορετικά, είναι ακριβώς το ίδιο. Έτσι, χρησιμοποιώντας POST, ίσως να θέλετε να χρησιμοποιήσετε POST, για παράδειγμα, αν έχετε μια φόρμα εισαγωγής θα αφήσουμε τους ανθρώπους κωδικούς εισόδου σε αυτό, και να στείλει αυτούς τους κωδικούς off στο back-end script σας, για να ελέγξετε στη βάση δεδομένων αν ο χρήστης είναι έγκυρη ή όχι. Μπορείτε να το κάνετε αυτό που χρησιμοποιούν όλοι jQuery, αντί να χρειάζεται να ανανεώσετε τη σελίδα σε όλα. Αυτό είναι το πώς θα εφαρμοστεί στο blog που σας έδειξα νωρίτερα. Αν πάμε στην πύλη τέλος και να αποσυνδεθείτε, αποσυνδεθείτε, Αποσύνδεση δεν λειτουργεί. Λοιπόν, επιτρέψτε μου να ανοίξει ακριβώς επάνω σε ένα νέο παράθυρο. Εδώ υπάρχει ένας κωδικός πρόσβασης, και ήμουν έτοιμος να πληκτρολογήσετε κάτι τυχαίο. Δεν λειτουργεί, αλλά μπορείτε να δείτε ότι δεν πραγματικά να ανανεώσετε τη σελίδα σε όλα. Ο κώδικας, αν θέλετε να το δει κανείς, είναι όλες διαθέσιμες εδώ. Έτσι ο κώδικας που έγραψα πέρυσι κάποια στιγμή. Όπως μπορείτε να δείτε εδώ, θα στείλουμε μια αίτηση POST. Έχω ένα αρχείο που ονομάζεται login.php στο πίσω άκρο, η οποία ελέγχει αν ο κωδικός πρόσβασης είναι έγκυρο. Οι παράμετροι περνάμε με κωδικό πρόσβασης, αντιστοιχίζονται με η είσοδος που υπάρχει σε αυτό το πλαίσιο εισαγωγής σήμερα. Και όταν τα δεδομένα επανέρχεται, θα ελέγξετε. Εάν τα δεδομένα είναι ψευδής, τότε λέμε λανθασμένο κωδικό πρόσβασης, θα μετακινηθείτε προς τα κάτω, και απλά να εξαφανιστεί μετά από αυτό. Διαφορετικά, τοποθετήστε το διαχειριστή της σελίδας. Και αυτό ήταν όλα γίνονται με χρήση JSON. Σε αυτό πολλές γραμμές κώδικα, μπορείτε να περάσετε μόνο τα δεδομένα στο πίσω άκρο, ελέγξτε αν είναι σωστή, ελέγξτε αν έχετε συνδεθεί σωστά, και πραγματικά να απαντήσει σε αυτό, τον επαναπροσανατολισμό του πρόσωπο στη σωστή σελίδα ή να μην αφήσει τους να συνδεθείτε και λέγοντάς τους ότι είχαν έναν εσφαλμένο κωδικό πρόσβασης. Έτσι, αυτό είναι ένα παράδειγμα για το πώς θα μπορούσατε να χρησιμοποιήσετε jQuery POST να στείλετε μια αίτηση POST στην πλάτη τέλος σας, ελέγχοντας αν κάποιος είναι συνδεδεμένος σωστά. 

Εντάξει, έτσι ώστε να είναι όλα τα παραδείγματα που είχα, και όλα τα πράγματα που ήθελα να καλύψει. Αυτά είναι τα σημαντικότερα πράγματα που jQuery σας επιτρέπει να κάνετε: επιλέξτε τα στοιχεία, να τα τροποποιήσουν χρησιμοποιώντας DOM χειραγώγηση, μπορείτε να προσθέσετε εφέ, να ενεργοποιήσει τα πράγματα για ορισμένα γεγονότα, και επίσης να κάνουμε AJAX αιτήματα πολύ ομαλά και εύκολα. Σας ευχαριστώ για την παρουσία ή βλέποντας, και εάν έχετε οποιεσδήποτε ερωτήσεις, απλώς επιτρέψτε μου να ξέρω. Ναι; [Φοιτητής] Πίσω όταν έδειξε, είχατε JSON μετά την αίτηση POST σε εισαγωγικά, και αναρωτιόμουν τι θα έκανε. >> Ναι, το βλέπω. Το ερώτημα ήταν ότι, στο παράδειγμα που μόλις έδειξε, υπήρχε η JSON λέξη σε εισαγωγικά γύρω από το - Θα βγάλω ακριβώς επάνω πάλι - γύρω από την λειτουργία POST. Είμαι τραβώντας απλά μέχρι να δείξει. Τόσο εδώ είναι αυτό αίτηση POST, και υπάρχει αυτό το JSON σε εισαγωγικά. Αυτό ορίζει ακριβώς αυτό που περιμένουμε το αποτέλεσμα να είναι. Έτσι, αν περνάμε στο JSON, όπως η αναμενόμενη τύπο δεδομένων, δεν είναι μια απαίτηση, αλλά αν θέλουμε να περάσει στο, τότε τα δεδομένα αυτόματα θα αναλυθεί ως JSON. Γι 'αυτό και δεν χρειάζεται να καλέσετε τη λειτουργία μεταγλώττιση JSON σε αυτό, αυτό ακριβώς θα συμβεί αυτόματα. Και αν ρίξετε μια ματιά στην τεκμηρίωση για το POST, υπάρχει αυτή η μεταβλητή τύπου δεδομένων, το είδος των δεδομένων που αναμένονται από το διακομιστή. Είναι προεπιλογές σε μια έξυπνη εικασία που μπορεί να είναι λάθος, ώστε να μπορείτε να το αφήσετε κενό, αλλά είναι ακριβώς το είδος των δεδομένων στην κωδικοποίηση που χρησιμοποιείτε, είτε πρόκειται για JSON ή XML ή κάτι άλλο. 

Οποιεσδήποτε άλλες ερωτήσεις; Εντάξει. Αν έχετε οποιεσδήποτε άλλες ερωτήσεις, μη διστάσετε να μου στείλετε email σε vshekhawat@college.harvard.edu, και οι διαφάνειες και ο κώδικας θα πρέπει να είναι διαθέσιμα στο διαδίκτυο πολύ σύντομα. Καλή τύχη με τα τελικά έργα σας, ελπίζω να χρησιμοποιήσετε jQuery. [CS50.TV]