Σε προηγούμενα άρθρα έχουμε δεί τις βασικές λειτουργίες της πανίσχυρης βιβλιοθήκης Javascript με το όνομα jQuery. Είδαμε ζωντανά παραδείγματα και επεξηγήσαμε τον κώδικα που χρησιμοποιήσαμε. Σε αυτό το άρθρο, θα δούμε τις πολύ βασικές έννοιες της jQuery, τις βασικές λειτουργίες, την σύνταξη και τους ορισμούς της βιβλιοθήκης.
Τι είναι η jQuery;
H jQuery είναι μια βιβλιοθήκη εντολών Javascript. Χρησιμοποιόντας την μπορούμε να κάνουμε πάρα πολλά πράγματα όπως:
- Επιλογή HTML στοιχείων
- Διαμόρφωση HTML στοιχείων
- Διαμόρφωση CSS στοιχείων
- Διεργασίες HTML γεγονότων
- Εφέ JavaScript και animations
- Διαμόρφωση του HTML DOM(Document Object Module)
- Χρήση AJAX
- Πληθώρα άλλων εφαρμογών
Πως χρησιμοποιείται;
Για να ενσωματώσουμε την βιβλιοθήκη σε ένα html αρχείο, προσθέτουμε στο <head> μέρος της σελίδας μας τον εξής κώδικα:
<script type="text/javascript" src="jquery.js"></script>
Όπως θα παρατηρήσετε, συνδέουμε το αρχείο jquery.js. Το αρχείο αυτό είναι η βιβλιοθήκη με όλες τις εντολές, και μπορούμε να το βρούμε σε δυο διαφορετικές εκδόσεις, από το jQuery.com.
- jQuery minfied (23K)
- jQuery regular (154K)
Για να σώσετε τα αρχεία, πατήστε δεξί κλίκ και Save As.
Σημείωση:
Μπορούμε επίσης να συνδέσουμε το αρχείο με την online έκδοση από την Google με τον εξής τρόπο:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
Η σύνταξη
Η σύνταξη είναι πολύ απλή
$(επιλογή).δράση()
- Το δολλάριο είναι το σύμβολο που υποδηλώνει την jQuery
- Ο (επιλογέας) είναι το ερώτημα(query) για το HTML στοιχείο που θέλουμε
- H δράση(action) είναι ότι θα συμβεί στο στοιχείο που επιλέξαμε
Παραδείγματα
$(this).hide() – Κρύβει το επιλεγμένο αντικείμενο
$(“p”).hide() – Κρύβει όλες τις παραγράφους
$(“p.test”).hide() – Κρύβει όλες τις παραγράφους με class=”test”
$(“#test”).hide() – Κρύβει όλα τα στοιχεία με id=”test”
Η εντολή Document Ready
Για να διασφαλίσουμε ότι η σελίδα μας έχει φορτώσει πλήρως πρίν τρέξουν οι jQuery εντολές μας, χρησιμοποιούμε το εξής function:
$(document).ready(function(){
---Οι εντολές της jQuery εδώ----
});
Έτσι αποφεύγουμε προβλήματα όπως το να προσπαθούμε να κάνουμε επιλογή ενός στοιχείου που δεν έχει φορτώσει ακόμα, η να πάρουμε το μέγεθος μιας εικόνας που δεν έχει εμφανιστεί πλήρως.
Επιλογέας
Παραπάνω είδαμε πως στην σύνταξη της jQuery υπάρχει ο επιλογέας, που μας επιτρέπει να ψάξουμε και να βρούμε HTML στοιχεία στην σελίδα μας. Ας δούμε λοιπόν τι ακριβώς σημαίνει αυτό.
Επιλογέας Στοιχείων
Η jQuery μπορεί και χρησιμοποιεί τα ονόματα των CSS στύλ για να επιλέξει HTML στοιχεία. Έτσι:
Το $(“p”) επιλέγει όλα τα στοιχεία <p>
Το $(“p.intro”) επιλέγει όλα τα στοιχεία <p> με class=”intro”.
To $(“p#demo”) επιλέγει τα στοιχεία <p> που έχουν id=”demo”.
Επιλογέας Ιδιοτήτων
Η jQuery μπορεί επίσης να επιλέξει στοιχεία με συγκεκριμένες ιδιότητες. Έτσι:
Το $(“[href]“) επιλέγει όλα τα στοιχεία που έχουν την ιδιότητα href στην σελίδα μας.
Το $(“[href='#']“) επιλέγει όλα τα στοιχεία που έχουν την ιδιότητα href και την τιμή value=”#”.
Το $(“[href!='#']“) επιλέγει όλα τα στοιχεία που έχουν την ιδιότητα href και επίσης την ιδιότητα <>”#”.
Το $(“[href$='.jpg']“) επιλέγει όλα τα στοιχεία που έχουν την ιδιότητα href και συμπεριέχουν το “.jpg”.
Τα γεγονότα της jQuery (Events)
Η jQuery χρησιμοποιεί τα γεγονότα(συμβάντα-events) για να διαχειριστεί τα διάφορα στοιχεία που επιλέγουμε.
Τα βασικά γεγονότα στην jQuery
$(document).ready(function) - Ο έλεγχος ολοκλήρωσης φόρτωσης μιας σελίδας
$(selector).click(function) - Ο έλεγχος για το κλικ σε ένα στοιχείο
$(selector).dblclick(function) - Ο έλεγχος για το διπλό κλικ σε ένα στοιχείο
$(selector).focus(function) - Ο έλεγχος εστίασης σε ένα στοιχείο
$(selector).mouseover(function) - Ο έλεγχος για το hover του ποντικιού σε ένα στοιχείο
Τα εφέ της jQuery
Μπορείτε να δείτε παραδείγματα από το W3Schools παρακάτω, πατώντας στα ονόματα του κάθε εφέ.
jQuery hide() – Ένα απλό εφέ απόκρυψης.
jQuery hide() – Απόκρυψη μέρους κειμένου.
jQuery slideToggle() – Ένα απλό slide panel.
jQuery fadeTo() – Εφέ ξεθωριάσματος.
jQuery animate() – Δημιουργία animation.
Αναλυτικά
$(selector).hide() – Απόκρυψη επιλεγμένων στοιχείων
$(selector).show() – Εμφάνιση επιλεγμένων στοιχείων
$(selector).toggle() – Εμφάνιση/Απόκρυψη επιλεγμένων στοιχείων
$(selector).slideDown() – Slide-down
$(selector).slideUp() – Slide-up
$(selector).slideToggle() – Slide up/Slide down
$(selector).fadeIn() – Εμφάνιση (Fade in)
$(selector).fadeOut() – Απόκρυψη (Fade out)
$(selector).fadeTo() – Απόκρυψη (Fade out) σε συγκεκριμένο opacity
$(selector).animation() – Εφαρμογή animation σε επιλεγμένα στοιχεία
Μπορείτε να τις βρείτε ακόμα πιο αναλυτικά εδώ
Εδώ θα κλείσουμε το άρθρο για τις βασικές έννοιες της jQuery. Σε επόμενο άρθρο θα δούμε περισσότερα παραδείγματα πάνω στην jQuery, καθώς και κάποιες ακόμα έννοιες όπως τα callbacks, το append και το prepend και τις CSS λειτουργίες.
Για αυτόν τον οδηγό θα θέλαμε να ευχαριστήσουμε τα W3Schools
Trackbacks - Pingbacks