Κάνοντας το Διαδίκτυο διαδραστικό: Μια εισαγωγή στο jQuery

Διαφήμιση

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

Τι είναι το jQuery;

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

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

Η κύρια λειτουργία του jQuery είναι για χειρισμό DOM (το DOM είναι το μοντέλο αντικειμένου εγγράφου) και σημαίνει την υποκείμενη δομή οποιασδήποτε ιστοσελίδας που επισκέπτεστε. Κάθε πράγμα που βλέπετε στη σελίδα - και πολλά που δεν βλέπετε - εκπροσωπούνται στο DOM.

Το jQuery δεν είναι η μόνη βιβλιοθήκη Javascript εκεί έξω, αλλά είναι η πιο δημοφιλής - περίπου το 55% των κορυφαίων 10.000 ιστότοπων το χρησιμοποιούν. Πρωτότυπο, MooTools και Υπέροχα είναι δημοφιλείς εναλλακτικές λύσεις, αλλά δεν υποστηρίζονται εξίσου καλά.

Πλευρά πελάτη έναντι πλευράς διακομιστή

Οι περισσότερες ιστοσελίδες δημιουργούνται από την πλευρά του διακομιστή - Το MakeUseOf χρησιμοποιεί PHP και MySQL (με τη μορφή WordPress) για τη λήψη των δεδομένων του άρθρου από μια βάση δεδομένων και, στη συνέχεια, εφαρμογή ενός προτύπου σε αυτά τα δεδομένα. Η σελίδα που προκύπτει αποστέλλεται στο πρόγραμμα περιήγησής σας, ερμηνεύεται και εμφανίζεται σε εσάς. Κάνοντας κλικ σε έναν σύνδεσμο υποβάλλεται ένα άλλο αίτημα στη βάση δεδομένων και δημιουργείται ακόμη μια σελίδα. Τι γίνεται όμως αν θέλετε να δημιουργήσετε κάποιο είδος διαδραστικότητας στη σελίδα; Μια φόρμα που ελέγχει τι πληκτρολογεί ο χρήστης (όπως το Twitter, το οποίο μετρά πόσα γράμματα έχουν απομείνει), α κουμπί που εμφανίζει ένα πλαίσιο διαλόγου ή ίσως θέλετε να φορτώσετε περισσότερα δεδομένα χωρίς να φορτώσετε ξανά ολόκληρο σελίδα?

Εδώ είναι που scripting από την πλευρά του πελάτη μπαίνει στο παιχνίδι. Εκεί ο πελάτης - το πρόγραμμα περιήγησής σας - κάνει τη βαριά ανύψωση. Οι περισσότεροι ιστότοποι, συμπεριλαμβανομένων αυτών, χρησιμοποιούν λίγο και τα δύο.

Γιατί να χρησιμοποιήσετε το jQuery;

Visual Flair

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

Εδώ είναι γρήγορη λίστα από μερικά πραγματικά εκπληκτικά αποτελέσματα που μπορείτε να επιτύχετε.

Εύκολες εκδηλώσεις

Σχεδόν όλο το λογισμικό λειτουργεί σε ένα μοντέλο συμβάντος - κάντε κλικ σε κάτι και ενεργοποιείται ένα συμβάν κλικ. Σύρετε το δάχτυλό σας σε ένα tablet και ενεργοποιείται ένα συμβάν μεταφοράς. Εφαρμογές "ακούστε" για αυτά τα συμβάντα και κάντε κάτι - το jQuery σάς επιτρέπει να το κάνετε αυτό σε ένα πρόγραμμα περιήγησης.

Εκτελέστε το AJAX απλά

Asynchronous Javascript και XML είναι ένας τρόπος επικοινωνίας σε έναν απομακρυσμένο διακομιστή χωρίς να χρειάζεται να φορτώσετε άλλη σελίδα. Ένα καλό παράδειγμα αυτού είναι η ροή κατάστασης στο Facebook. Προσπαθήστε να μετακινηθείτε σε όλες τις ενημερώσεις σας μέχρι να φτάσετε στο κάτω μέρος. Δεν μπορείς. Μόλις φτάσετε στο τέλος, το jQuery εντοπίζει ότι είστε κοντά και στέλνει ένα αίτημα AJAX για εμφάνιση περισσότερων καταστάσεων.

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

Προηγμένες διεπαφές χρήστη

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

Πρέπει να με νοιάζει;

Εάν ενδιαφέρεστε καθόλου ανάπτυξη ιστοσελίδων Ποια γλώσσα προγραμματισμού πρέπει να μάθετε - Προγραμματισμός ΙστούΣήμερα θα ρίξουμε μια ματιά στις διάφορες γλώσσες προγραμματισμού Ιστού που τροφοδοτούν το Διαδίκτυο. Αυτό είναι το τέταρτο μέρος σε μια σειρά προγραμματισμού για αρχάριους. Στο μέρος 1, μάθαμε τα βασικά ... Διαβάστε περισσότερα , τότε ναι - το jQuery είναι κάτι που σίγουρα πρέπει να μάθετε. Εάν έχετε ρωτήσει ποτέ τον εαυτό σας "Πώς μπορώ να κάνω το X να Y όταν ο χρήστης κάνει Z;", τότε θα λατρέψετε το jQuery. Η προσθήκη του στον ιστότοπό σας είναι τόσο απλή όσο προσθέτοντας έναν σύνδεσμο σε αυτήν στην κεφαλίδα; ή λέγοντας στο WordPress να το φορτώσει.

Θα θέλατε να μάθετε το jQuery; Ενημερώστε μας στα σχόλια και θα δω τι μπορώ να κάνω.

Συντελεστές εικόνας: Δυναμική περιστρεφόμενη πινακίδα δημιουργήθηκε με χρήση του jQuery, PistolSlut.com, Γράφημα φτιαγμένο με jQuery