Μπορεί να έχετε ακούσει για την Javascript βιβλιοθήκη που ονομάζεται jQuery. Τι ακριβώς όμως είναι η jQuery;
Λοιπόν, η jQuery σας επιτρέπει να επωφεληθείτε από ορισμένες από τις πιο δύσκολες πλευρές της Javascript με σχετική ευκολία. Σήμερα, θα ρίξουμε μια ματιά στο πώς να ξεκινήσετε με την jQuery, και θα γράψουμε το πρώτο μας script!
Η jQuery είναι μια πολύ ελαφριά βιβλιοθήκη της Javascript, που εξαφανίζει το πονοκέφαλο που σας δημιουργεί ο καθαρός Javascript κώδικας στις σελίδες σας. Στην αρχική σελίδα της jQuery περιγράφετε ως εξής:
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
Φυσικά, δεν θα χρησιμοποιούσατε μια βιβλιοθήκη εάν δεν υπήρχε κανένα όφελος. Ας πούμε λίγα από τα πλεονεκτήματα και χαρακτηριστικά της χρήσης της βιβλιοθήκης jQuery:
- Μειώνει δραματικά τον αριθμό των γραμμών κώδικα που πρέπει να συνταχθεί σε σύγκριση με την καθαρή Javascript. Θα δούμε κάποια παράδειγμα κώδικα αργότερα σε αυτό το άρθρο.
- Είναι πολύ πιο εύκολο να την καταλάβουμε σε σχέση με τον καθαρό κώδικα Javascript.
- Το documentation είναι εξαιρετικά καλά οργανωμένο.
- Θα κάνει τη χρήση της τεχνολογίας Ajax εξαιρετικά εύκολη.
- Έχει αναπτυχθεί ένα ευρύ φάσμα από plugins και extensions για την jQuery με αποτέλεσμα να είναι εύκολο για σας να πάρετε την ακριβή λειτουργία που σας ενδιαφέρει.
- Η JQuery δεν είναι προγραμματισμός αλλά τέχνη και διασκέδαση!
Το πρώτο πράγμα που χρειάζεται να κάνετε για να ξεκινήσετε με τη jQuery είναι να επισκεφθείτε την αρχική σελίδα και να κατεβάσετε την τελευταία έκδοση της βιβλιοθήκης jQuery. Αφού έχετε κατεβάσει τη βιβλιοθήκη jQuery , απλά φορτώστε την στο διακομιστή σας και συνδέστε την στο <HEAD> τμήμα του εγγράφου σας όπως φαίνεται στον παρακάτω κώδικα.
<script type="text/javascript" src="/jquery.js"> </script>
Επιπλέον, μπορείτε να αφήσετε την google να 'στεγάσει' τον jQuery κώδικα σας για σας, κάτι το οποίο μπορεί να οδηγήσει σε ταχύτερη φόρτωση της σελίδας/εφαρμογής για τον τελικό χρήστη. Για να μάθετε περισσότερα σχετικά με αυτό, επισκεφθείτε το Google Ajax libraries.
Τώρα που έχουμε κατεβάσει και συνδέσει τη βιβλιοθήκη jQuery στο διακομιστή μας, μπορούμε να προχωρήσουμε στο επόμενο κομμάτι κώδικα που θα εκτελεστή όταν το έγγραφο είναι έτοιμο.
Για να τρέξουμε το πρώτο μας jQuery script, θα πρέπει να ενσωματώσουμε όλα τα script μας μέσα σε μία συνάρτηση. Αυτή η λειτουργία θα εκτελέσει κάθε κώδικα που περιέχεται στο έγγραφο, όταν αυτό είναι έτοιμο. Σημειώστε ότι αυτό είναι παρόμοιο, αλλά όχι ακριβώς το ίδιο πράγμα, όπως το δημοφιλές "onload " event. Ας ρίξουμε μια ματιά σε ένα παράδειγμα και μετά θα το αναλύσουμε με περισσότερες λεπτομέρειες.
$(document).ready(function(){
//Εδώ γράφουμε το κώδικα μας
});
Εδώ, λέμε στη jQuery να τρέξει (ή εκτελέσει) κάθε γραμμή κώδικα μεταξύ της συνάρτησης, μόλις το DOM είναι έτοιμο. Υπάρχουν πλεονεκτήματα εδώ, αν και μπορεί να μη φαίνονται με την πρώτη ματιά. Πρώτον, χρησιμοποιώντας αυτή την τεχνική διαχωρίζουμε εντελώς τη Javascript από την HTML. Δεύτερον, δεν περιμένουμε να φορτωθεί η σελίδα, αλλά να φορτώσει πλήρως το DOM. Αυτό εξασφαλίζει ότι δεν θα εκτελεστεί καθόλου κώδικας πριν το DOM είναι έτοιμο να αντιμετωπίσει και να εκτελέσει τον κώδικα.
Για τους τεμπέληδες προγραμματιστές, μπορείτε να μειώσετε το παραπάνω τμήμα του κώδικα γράφοντας τον παρακάτω κώδικα. Και τα δύο κομμάτια κώδικα συμπεριφέρονται ακριβώς με τον ίδιο τρόπο.
$(function(){
//Εδώ γράφουμε το κώδικα μας
});
Μάθαμε πώς να συνδέουμε τη βιβλιοθήκη jQuery και δημιουργήσαμε μια συνάρτηση document.ready. Το τελευταίο βήμα είναι να γράψουμε ορισμένο jQuery κώδικα που θα επηρεάσει τη σελίδα μας με ορισμένες τρόπο.
Για αυτό το παράδειγμα, ας πούμε ότι έχουμε μια σελίδα με κάποιους παραγράφους και ένα blockquote στο κάτω μέρος. Θα ήθελα μόνο να δείτε τα blockquote αν ο χρήστης κάνει κλικ σε ένα κουμπί που το ονομάζουμε 'setup'. Ρίξτε μια ματιά στο τελικό κώδικα και στη συνέχεια θα συζητήσουμε τις λεπτομέρειες.
$(document).ready(function(){
var myQuote = $('#my_quote');
myQuote.hide();
$('.button').click(function(){
myQuote.show(500);
});
});
Τώρα, ας δούμε το κώδικα βήμα προς βήμα.
- Όπως προείπαμε, περικλείουμε όλο μας το κώδικα εντός της συνάρτηση $ document.ready () .
- Ορίζουμε το blockquote id (my_quote) ίσο με μια μεταβλητή που ονομάζεται myQuote. Τώρα έχουμε πρόσβαση στο blockquote στοιχείο με το id του «my_quote».
- Στη συνέχεια, κρύβουμε το blockquote χρησιμοποιώντας την built-in μέθοδο hidejQuery μας δίνει.
- Όλα αυτά ήταν συνοδευτικά, η επόμενη γραμμή είναι το κυρίως πιάτο (έχω αρχίσει να πεινάω, γι' αυτό τα λέω αυτά). Λέμε στη JQuery ότι, όταν το κουμπί πατηθεί, τότε εμφάνισε το blockquote. Σημειώστε ότι περνάμε ως όρισμα έναν ακέραιο στη μέθοδο show ( το 1000 είναι περίπου 1 δευτερόλεπτο).
- Αυτό είναι! Όταν ο χρήστης κάνει κλικ στο κουμπί, το blockquote θα εμφανιστεί μετά το πέρασμα μισού δευτερολέπτου. Πολύ εύκολο ε;
Περαιτέρω πόροι:
0 σχόλια
Δημοσίευση σχολίου