Εισαγωγή στην jQuery Μέρος 2

Post Pic
στις 05.05.10. Kατηγορίες jQuery με Κανένα Σχόλιο

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

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

$(document).ready(function() {
...(οι εντολές μας εδώ)...
});

Έτσι, πρίν τρέζξουν οι εντολές μας, είμαστε σίγουροι ότι όλα τα υπόλοιπα στοιχεία της σελίδας μας έχουν φορτωθεί (εικόνες,στύλ, κτλ.)
Όπως έχουμε δεί και σε προηγούμενο άρθρο, το σύμβολο του δολαρίου ($) ουσιαστικά είναι η jQuery. Αυτό σημαίνει ότι είτε γράψουμε

jQuery(document).ready(function() {
...(οι εντολές μας εδώ)...
});

είτε

$(document).ready(function() {
...(οι εντολές μας εδώ)...
});

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

Ας δούμε λοιπόν τώρα πως κάνουμε σωστά τις επιλογές μας, ώστε να μπορέσουμε να εκτελέσουμε τις εντολές μας πάνω τους

Αν έχουμε τον εξής κώδικα


και θέλουμε να επιλέξουμε τ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, δείτε αυτό το παλαιότερο βοήθημα

Tags: , , , , , , ,

Pantso { Προσωπική Ιστοσελίδα / Άρθρα Στο GreekTuts }
Ο Παναγιώτης έχει σπουδάσει προγραμματιστής και προγραμματιστής Video Games ενώ τώρα κάνει το Bachelor του σε Computer Science από το Πανεπιστήμιο του Roehampton στο Λονδίνο. Έχει εργαστεί στο Darkfall Online , το πρώτο ελληνικό MMORPG, ως World Builder, είναι BlackBoard Support Certified , ενώ σήμερα εργάζεται ώς HTML Author στην Atcom SA.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>