Εισαγωγή στην jQuery Μέρος 2
Σε προηγούμενο βοήθημα είδαμε τις βασικές αρχές της διάσημης Javascript βιβλιοθήκης με το όνομα jQuery, είδαμε που θα την βρούμε και πως την χρησιμοποιούμε αλλά και γράψαμε την πρώτη μας συνάρτηση. Σε αυτό το βοήθημα θα δώσουμε μερικά παραδείγματα της βασικής χρήσης, των εντολών και το πως να κάνουμε σωστές επιλογές στοιχείων
Έχουμε ήδη δεί την εντολή που μας εξασφαλίζει ότι η σελίδα μας έχει φορτώσει πλήρως πρίν τρέξει οποιαδήποτε από τις εντολές μας, αλλά ας το ξαναθυμίσουμε για πρακτικούς λόγους στο βοήθημα μας.
$(document).ready(function() {
...(οι εντολές μας εδώ)...
});Έτσι, πρίν τρέζξουν οι εντολές μας, είμαστε σίγουροι ότι όλα τα υπόλοιπα στοιχεία της σελίδας μας έχουν φορτωθεί (εικόνες,στύλ, κτλ.)
Όπως έχουμε δεί και σε προηγούμενο άρθρο, το σύμβολο του δολαρίου ($) ουσιαστικά είναι η jQuery. Αυτό σημαίνει ότι είτε γράψουμε
jQuery(document).ready(function() {
...(οι εντολές μας εδώ)...
});είτε
$(document).ready(function() {
...(οι εντολές μας εδώ)...
});θα εκτελεστεί ακριβώς το ίδο πράγμα. Βέβαια για προφανείς λόγους, θα χρησιμοποιούμε το δολάριο παρά την λέξη.
Ας δούμε λοιπόν τώρα πως κάνουμε σωστά τις επιλογές μας, ώστε να μπορέσουμε να εκτελέσουμε τις εντολές μας πάνω τους
Αν έχουμε τον εξής κώδικα
Test
και θέλουμε να επιλέξουμε τo κείμενο μέσα στα span tags, το μόνο που έχουμε να κάνουμε είναι να γράψουμε
$('span')Αυτό είναι αρκετά απλό. Τι γίνεται όμως όταν θέλουμε να επιλέξουμε ένα div ή ένα id;
Η jQuery μας λύνει τα χέρια, αφού δανείζεται μερικά στοιχεία από τα CSS και έτσι για τα divs χρησιμοποιούμε την τελεία (.) ενώ για τα id χρησιμοποιούμε την δίαιση (#), όπως ακριβώς στα CSS.
Έτσι αν θέλουμε να επιλέξουμε την κλασση του div γράφουμε για τον παραπάνω κώδικα
$('.wrapper')ενώ άν θέλουμε να επιλέξουμε το Id γράφουμε
$('#header')Τέλος ας δούμε τι κάνουμε αν θέλουμε να επιλέξουμε κάτι που βρίσκεται βαθιά μέσα στον κώδικα μας (κάτι πολύ συγκεκριμένο).
Αν έχουμε λοιπόν για παράδειγμα τον εξής κώδικα
Μήνας Ιανουάριος
και θέλουμε να επιλέξουμε ένα συγκεκριμένο στοιχείο του πίνακά μας το μόνο που έχουμε να κάνουμε είναι να γράψουμε
$('.right th')για την σειρά, ενώ γράφουμε
$('.right td')για το κελί του πίνακά μας.
Κλείνοντας, ας δούμε και ένα ακόμα απλό script και ας εξηγήσουμε πως λειτουργεί. Ας επιλέξουμε ένα κουμπί, και ας το αποκρύψουμε(εξαφανίσουμε) όταν κάνουμε κλίκ επάνω του.
Έτσι έχουμε τον κώδικα μας
που είναι ένα απλό html κουμπί, με id hide
Για να επιλέξουμε το id γράφουμε
$('#hide')Για να προσθέσουμε την συνθήκη του όταν ο χρήστης θα κάνει κλίκ γράφουμε
.click(function() {
});Τέλος για να το αποκρύψουμε αφού το έχουμε επιλέξει γράφουμε
$('#hide').click(function() {
$(this).hide();
});Το this υποδηλώνει πως θα εκτελέσουμε μια εντολή πάνω σε κάτι που έχουμε ήδη επιλέξει πιο πάνω. Το hide είναι μια εντολή που απλά αποκρύπτει την επιλογή μας. Αυτό ήταν. Το κουμπί εξαφανίστηκε.
Δοκιμάστε το και εσείς, και θα δείτε ότι είναι πολύ απλό
Αν θέλετε να μάθετε τα πολύ βασικά, όπως το πως να φωρτώσετε την jQuery, δείτε αυτό το παλαιότερο βοήθημα


