Εισαγωγή στην jQuery

Εισαγωγή στην jQuery

Σε αυτό το άρθρο θα κάνουμε μια εισαγωγή και θα δούμε κάποια βασικά πράγματα για την χρήση της βιβλιοθήκης jQuery. H jQuery είναι μια βιβλιοθήκη με συναρτήσεις γραμμένες σε JavaScript. Το πλεονέκτημα της jQuery είναι ο συμπαγής κώδικας και η ευκολία στην εκμάθηση αλλά και στην συγγραφή.

Απαραίτητες γνώσεις που πρέπει να κατέχει κάποιος πριν αρχίσει να ασχολείται με την jQuery είναι:

  • HTML
  • CSS
  • JavaScript

Τι είναι η jQuery

H jQuery είναι μια βιβλιοθήκη (framework) JavaScript που χρησιμοποιείται από προγραμματιστές για τη ταχεία ανάπτυξη ιστοσελίδων και διαδυκτιακών εφαρμογών που χρειάζονται μεγάλη ευχρηστία και διαδραστικότητα (interactivity). Η jQuery πρωτοεμφανίστηκε τον Ιανουάριο του 2006 στο BarCamp από τον John Resig. Πρόκειται για μια βιβλιοθήκη Javascript ανοιχτού κώδικα, υπό τις άδειες MIT License και την GNU General Public License.

Την βιβλιοθήκη jQuery μπορούμε να την κατεβάσουμε από την ιστοσελίδα της κάνοντας κλικ εδώ.

Πλεονεκτήματα της jQuery

  • Ακολουθεί την αρχή KISS (Keep It Simple Stupid): Η βιβλιοθήκη JQuery προσπαθεί να υπεραπλουστεύσει τον προγραμματισμό σε Javascript προσφέροντας πραγματικά απλούς μηχανισμούς και εντολές μέσω του framework της.
  • Παρέχει πλήρη και αναλυτικότατη τεκμηρίωση που συμπληρώνεται από την εκτεταμένη παρουσία ηλεκτρονικών βοηθημάτων. Εκτός από την πολύ καλοδουλεμένη τεκμηρίωσή του JQuery, οι ενδιαφερόμενοι μπορούν να ανατρέξουν και στην σελίδα του Visual JQuery όπου μπορούν να βρουν μία εναλλακτική αλλά πολύ βολική, από άποψη δομής, τεκμηρίωση.
  • Υποστηρίζεται από μία πάρα πολύ ενεργή κοινότητα: Όπως για τα περισσότερα open source έργα λογισμικού, έτσι και για το JQuery η ύπαρξη μιας κατά το μέγιστο δυνατό ενεργής κοινότητας αποτελεί τον ακρογωνιαίο λίθο για την ανάπτυξη και ευημερία του.
  • Μικρό μέγεθος: Το γεγονός ότι το βασικό πακέτο της JQuery είναι μόλις 20Kb αφενός επιβεβαιώνει την πρώτη παρατήρηση, ότι δηλαδή η φιλοσοφία της έγκειται στην απλότητα και αφετέρου κάνει πολύ εύκολη την κατανόηση της αρχιτεκτονικής της.
  • Ποικιλία χαρακτηριστικών: Η JQuery δίνει τη δυνατότητα στον χρήστη να χρησιμοποιήσει σχεδόν το σύνολο των δυνατοτήτων που προσφέρει η γλώσσα JavaScript. Από απλά χαρακτηριστικά που σχετίζονται με βασικές λειτουργίες εμφάνισης / απόκρυψης, ως Ajax κλήσεις και σύνθετα εφέ.
  • Επεκτασιμότητα: Η λογική με την οποία είναι φτιαγμένη η JQuery είναι απλή πράγμα που αντικατοπτρίζεται και στον ίδιο της τον κώδικα. Αυτό κάνει πολύ εύκολη την επέκτασή / τροποποίησή της.

Εισαγωγή στην σελίδα μας

Την jQuery μπορούμε να την ενσωματώσουμε στην ιστοσελίδα μας, εισάγοντας τον παρακάτω κώδικα στο head τμήμα μιας ιστοσελίδας HTML:

<script type="text/javascript" src="jquery.js"></script>

Σύνταξη jQuery

H jQuery είναι σχεδιασμένη να επιλέγει στοιχεία HTML και να εφαρμόζει κάποιες ενέργειες στα επιλεγμένα στοιχεία. Η βασική σύνταξη είναι:

$(selector).action()
  • To σύμβολο δολάριο ορίζει την jQuery
  • Με το selector ορίζουμε τα στοιχεία που θα επιλεγούν
  • Η ενέργεια που θα εφαρμοστεί

Για παράδειγμα:


// Κρύβει το τρέχων στοιχείο
$(this).hide()

// Κρύβει όλες τις παραγράφους στην ιστοσελίδα
$("p").hide()

// Κρύβει όλες τις παραγράφους με κλάση test
$("p.test").hide()

// Κρύβει όλες στοιχεία με id test
$("#test").hide()

H συνάρτηση Document Ready

Ίσως να έχετε παρατηρήσει πως όλες οι συναρτήσεις στην jQuery γράφονται μέσα σε μια συνάρτηση document.ready():


$(document).ready(function(){

       // jQuery κώδικας

);

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

jQuery Selectors

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

Element Selectors

H jQuery χρησιμοποιεί τους selectors της CSS για να επιλέξει στοιχεία μέσα στο αρχείο HTML. Δείτε τα παρακάτω παραδείγματα:


// Επιλέγει όλα τα στοιχεία <p>
$("p")

// Επιλέγει όλα τα στοιχεία <p> με κλάση intro
$("p.intro")

// Επιλέγει όλα τα στοιχεία <p> με id demo
$("p#demo")

jQuery Attribute Selectors

H jQuery χρησιμοποιεί εκφράσεις XPath για να επιλέξει στοιχεία με συγκεκριμένα χαρακτηριστικά (attributes)



// Επιλέγει όλα τα στοιχεία με href attribute
$("[href]")

// Επιλέγει όλα τα στοιχεία με href attribute που ισούται με "#"
$("[href='#']")

// Επιλέγει όλα τα στοιχεία με href attribute που ΔΕΝ ισούται με "#"
$("[href!='#']")

// Επιλέγει όλα τα στοιχεία με href attribute που τελειώνει σε ".jpg"
$("[href$='.jpg']")

jQuery CSS Selectors

Η jQuery με την βοήθεια των CSS selectors μπορεί να αλλάξει τις ιδιότητες CSS των επιλεγμένων στοιχείων. Για παράδειγμα το παρακάτω απόσπασμά κώδικα θα αλλάξει το χρώμα του φόντου σε όλες τις παραγράφους σε κίτρινο:



$("p").css("background-color","yellow");

jQuery Event Μέθοδοι

H διαχείριση των events είναι μια από τις κύριες λειτουργίες της jQuery. Τα event handlers είναι μέθοδοι που καλούνται όταν «συμβεί κάτι» στην html, για παράδειγμα όταν κάνουμε κλικ με το ποντίκι σε κάποιο σημείο της ιστοσελίδας τότε καλείτε και ενεργοποιείται ένα αντίστοιχο event handler. Δείτε το παρακάτω παράδειγμα:


$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

Στο παραπάνω παράδειγμα μια συνάρτηση καλείτε όταν πατηθεί (γίνει κλικ) το κουμπί και η μέθοδος αποκρύπτει όλες τις παραγράφους της σελίδας.

Παρακάτω παραθέτουμε μερικά από τα πιο χρήσιμα event handlers της jQuery.

Event Method Περιγραφή
$(document).ready(function) Η μέθοδος ready() ελέγχει εάν το document έχει τελειώσει την διαδικασία φόρτωσης.
$(selector).click(function) Ενεργοποιεί μια συνάρτηση όταν γίνει κλικ στο επιλεγμένο στοιχείο.
$(selector).dblclick(function) Ενεργοποιεί μια συνάρτηση όταν γίνει διπλό κλικ στο επιλεγμένο στοιχείο.
$(selector).focus(function) Ενεργοποιεί μια συνάρτηση όταν γίνει εστιάσουμε στο επιλεγμένο στοιχείο.
$(selector).mouseover(function) Ενεργοποιεί μια συνάρτηση όταν περάσει το ποντίκι πάνω από το επιλεγμένο στοιχείο.

jQuery Effects

H jQuery υποστηρίζει συναρτήσεις που εκτελούν εφέ κίνησης, εμφάνισης κτλ στα στοιχεία html της ιστοσελίδας μας. Παρακάτω παραθέτουμε μερικές από τις βασικές συναρτήσεις για εφέ:

Effect Method Περιγραφή
hide() Μέθοδος για την απόκρυψη ενός στοιχείου.
show() Μέθοδος για την εμφάνιση ενός στοιχείου.
slideToggle() Μέθοδος που εναλλάσσει την εμφάνιση και την απόκρυψη ενός στοιχείου.
fadeTo() Μέθοδος για το ξεθώριασμα ενός στοιχείου.
animate() Μέθοδος για την δημιουργία animation με ένα στοιχείο.

Για παράδειγμα, το παρακάτω απόσπασμα κώδικα, αποκρύπτει και εμφανίζει μια παράγραφό όταν κάνουμε κλικ στο στοιχείο με id #hide και με id #show αντίστοιχα:


$("#hide").click(function(){
   $("p").hide();
 });
 $("#show").click(function(){
   $("p").show();
 });

Οι συναρτήσεις hide() και show(), δέχονται ως παράμετρο την ταχύτητα με την οποία εκτελείται η μέθοδος και μια κλήση προς άλλη συνάρτηση μετά την ολοκλήρωση της.

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

Η παράμετρος speed μπορεί να έχει την τιμή slow, normal, fast ή έναν αριθμό σε milliseconds:


$("button").click(function(){
   $("p").hide(1000);
 });

Στο παραπάνω απόσπασμα όταν κάνουμε κλικ στο κουμπί θα κρυφτούν όλες οι παράγραφοι της ιστοσελίδας και η κίνηση τους θα διαρκέσει 1.000 milliseconds (1 sec).

Προσθήκη σχολίου