Καλησπέρα σας ..Σήμερα θα μιλήσουμε για τη jQuery και θα κάνουμε και κάποια παραδειγματάκια ,τα με τα οποία θα δούμε κάποιες βασικές λειτουργίες της jQuery και το τι μπορείτε να κάνετε σε μία ιστοσελίδα με απλές και προπάντων λίγες γραμμές κώδικα!Ξεκινάμε λοιπόν το πρώτο μας jQuery tutorial.Σε αυτό το jQuery tutorial τα παραδείγματα που θα κάνουμε θα έχουν σχέση με την εφαρμογή css στυλ με τη βοήθεια jQuery.Επίσης θα εξετάσουμε και ένα παράδειγμα στο οποίο θα μιλάμε για την click() function ,μία συνάρτηση που χρησιμοποιείται στη jQuery πολύ συχνά!!
Αλήθεια τι είναι η jQuery και σε τι χρησιμεύει;
Η jQuery δεν είναι τίποτα περισσότερο από μία “βιβλιοθήκη” javascript η οποία μας δίνει τη δυνατότητα να δημιουργούμε διάφορα εφέ στην σελίδα μας χωρίς όμως να χρειάζεται η ποσότητα κώδικα που θα χρειαζόταν εάν χρησιμοποιούσαμε την παραδοσιακή javascript.Το μόνο που έχουμε να κάνουμε είναι να κατεβάσουμε τη jQuery ,να την εφαρμόσουμε στο site μας και είμαστε έτοιμοι να δημιουργήσουμε.Τα εφέ που μπορούμε να δημιουργήσουμε είναι πολλά και διάφορα.Για παράδειγμα μπορούμε να εμφανίζουμε ή να εξαφανίζουμε παραγράφους, να αλλάζουμε χρώματα γραμματοσειράς ,να ελέγχουμε δηλαδή με όλα τα html στοιχεία της σελίδας μας και να μπορούμε να ελέγχουμε ένα- ένα από αυτά ξεχωριστά.Η jQuery χρησιμοποιείται ευρέως σήμερα διότι δίνει τη δυνατότητα να προσφέρουμε στους χρήστες της ιστοσελίδας μας αλληλεπίδραση με αυτή και τα εφέ που μπορούμε να δημιουργήσουμε είναι πάρα πολλά!!
Κατεβάζοντας τη jQuery βιβλιοθήκη
Το πρώτο βήμα είναι να κατεβάσουμε το αρχείο της jQuery το οποίο θα το εφαρμόσουμε στην σελίδα μας.Είναι ένα αρχείο το οποίο θα τοποθετήσουμε στο [html] <head></head>[/html] της σελίδας μας.Από κει και έπειτα όταν γράψουμε jQuery κώδικα στη σελίδα μας,o browser θα βλέπει και το αρχείο που υπάρχει στο head της σελίδας και θα “μεταφράζει” τον κώδικα αυτό σωστά.Το αρχείο της jQuery θα το βρείτε στην σελίδα της jQuery.Πατώντας στα δεξιά το κουμπί “download” και έχοντας “τικαρισμένο” το “production” και όχι το “development” αρχείο θα μας ανοίξει μία σελίδα με url
.
Η σελίδα αυτή είναι γεμάτη κώδικα.Το μόνο που κάνουμε είναι “δεξί κλικ” στη σελίδα αυτή και “αποθήκευση ως” ώστε να αποθηκεύσουμε το αρχείο της jQuery στον υπολογιστή μας.Το όνομα του αρχείου αυτού δεν το αλλάζουμε,το αφήνουμε προκαθορισμένο.Πλέον είμαστε έτοιμοι!!
Εφαρμογή της jQuery στη σελίδα μας και πρώτη επαφή.
Δημιουργήστε ένα κενό αρχείο html.Για ευκολία ονομάστε τη σελίδα σας “jquery1.html” και αποθηκεύστε τη σε ένα φάκελο.Μέσα σε αυτό το φάκελο αποθηκεύστε και το αρχείο της jQuery που μόλις αποθηκεύσατε.Στη συνέχεια ενσωματώστε το αρχείο αυτό στην html σελίδα βάζοντας το ανάμεσα στα head tags.Δείτε πως μοιάζει ο κώδικας της σελίδας που μόλις δημιουργήσατε…
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"></p>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type=’text/javascript’ src=’jquery-1.4.2.min.js’></script>
<title>Απλή σελίδα με jQuery.</title></p>
</head>
<body>
</body>
</html>
[/html]
Αφού τοποθετήσαμε τη βιβλιοθήκη jQuery στη σελίδα μας τώρα είμαστε έτοιμοι να γράψουμε jQuery κώδικα!
Πώς συντάσσονται οι εντολές στην jQuery;
Κάθε εντολή jQuery αποτελείται από
- τον jQuery selector “$”
- τη δράση-action
- παράμετροι
1.) Με τον jQuery selector διαλέγουμε ποιο στοιχείο θέλουμε να χειριστούμε στη σελίδα.Για παράδειγμα το $(‘#me’) θα ελέγξει το html στοιχείο ,πχ μία div, που έχει id ίσο με “me”.
2.) Το action είναι η δράση που θα ασκήσουμε πάνω στον selector.Για παράδειγμα μπορούμε να κλικάρουμε, να κάνουμε mouseover,να του αλλάξουμε το css στυλ κλπ.
3.)Οι παράμετροι είναι κάποια στοιχεία που δεν χρειάζεται πάντα να τα δίνουμε.Αυτό εξαρτάται από τι action χρησιμοποιούμε.Εφόσον το action δέχεται παραμέτρους μόνο τότε μπορούμε να δώσουμε κάποιες.
Ας δούμε ένα απλό παράδειγμα…
Για παράδειγμα ο κώδικας:
[javascript]
$(‘#mydiv’).click(function() {
alert(‘Klikares panw stin div me id = "mydiv"…..’);
});
[/javascript]
Κάνει το εξής: Όταν τοποθετήσουμε το ποντίκι μας πάνω από html στοιχείο,μπορεί να είναι μία html div, με id = “mydiv” και κλικάρουμε πάνω σε αυτή τότε εμφανίζεται ένα alert που μας λέει το μήνυμα που διαβάζουμε στον παραπάνω κώδικα.
Πριν ξεκινήσουμε τα παραδείγματα ΚΑΤΙ ΠΟΛΥ ΣΗΜΑΝΤΙΚΟ.
Πρέπει πάντα να ελέγχουμε αν έχει φορτώσει η σελίδα μας πριν εκτελεστεί οποιαδήποτε jQuery εντολή.
Αυτό πρέπει να το κάνουμε διότι με τη jQuery όπως προείπαμε ελέγχουμε κάποια στοιχεία στη σελίδα μας.Εάν αυτά δεν έχουν φορτωθεί τότε ΔΕΝ ΜΠΟΡΟΥΜΕ να τα ελέγξουμε..Τόσο απλά… 🙂
Για παράδειγμα
[javascript]
$(document).ready(function(){
$("#mydiv").click(function(){
alert(‘Clicked!’);
});
});
[/javascript]
O παραπάνω jQuery κώδικας κάνει το εξής:
Γραμμή 1:Εδώ ελέγχει εάν η σελίδα μας έχει φορτώσει.Μόνο τότε θα εκτελεστεί ο κώδικας στις γραμμές 3-5.
Γραμμές 3-5:Αφού φορτώσει η σελίδα,με τον κώδικα αυτό ελέγχουμε το html στοιχείο που έχει id =”mydiv”.Εάν πάμε το ποντίκι από πάνω του και πατήσουμε αριστερό κλίκ (click function) θα εμφανιστεί ένα παραθυράκι alert με το μήνυμα που ορίζουμε!
Μπορούμε τον κώδικα jQuery να τον ενσωματώσουμε στη σελίδα μας μέσα σε [html]<script></script>[/html]
tags.Το καλύτερο όμως είναι να δημιουργούμε ένα ξεχωριστό αρχείο με τον κώδικά μας και να τον καλούμε στο html αρχείο μας όπως ακριβώς καλούμε και το αρχείο της jQuery, μέσα στο head δηλαδή!Ο κώδικας αυτός είναι κώδικας javascript (παραλλαγμένος για να λειτουργεί με την jQuery) και έτσι λοιπόν το αρχείο που θα τον περιέχει θα τελειώνει σε “.js”…
Για να ξεκαθαριστεί το τοπίο ξεκινάμε …Παραδείγματα!!!
Παράδειγμα πρώτο….Εμφάνιση μηνύματος μετά από κλικ ποντικιού.-click() function
Εδώ δημιουργούμε δύο divs σε μία σελίδα, μία κόκκινη και μία μπλε.Εάν κλικάρουμε στην κόκκινη div
θα πάρουμε το μήνυμα “clicked!”.Θα χρησιμοποιήσουμε το αρχείο jQuery1.html .Τον JQuery κώδικα θα τον γράψουμε μέσα στο redalert.js..
1.)O κώδικας html είναι ο εξής.
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-7" />
<meta name="author" content="Archimidis Mertzanos" />
<link rel="stylesheet" href="styles.css"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="redalert.js"></script>
<title>Απλή σελίδα με jQuery.</title>
</head>
<body>
<div id="red">
Εαν κλικάρετε εδώ μέσα μόνο τότε θα δείτε το alert μήνυμα.
</div>
<div id="blue">
Εαν κλικάρετε εδώ μέσα Δεν θα δείτε τίποτα!
</div>
</body>
</html>
[/html]
Όπως βλέπουμε στις γραμμές 8,9 καλούμε στο head μας και το αρχείο της jQuery αλλά και τον κώδικα που γράψαμε στο αρχείο redalert.js.
Ο κώδικας στο αρχείο redalert.js είναι ο εξής:
[javascript]
$(document).ready(function(){
$("#red").click(function(){
alert(‘Clicked!’);
});
});
[/javascript]
Όπως παρατηρούμε όταν κλικάρουμε στο div με id=”red” τότε εμφανίζεται το μήνυμα “clicked”…
Μπορούμε στη θέση του “click” να γράψουμε “hover”,”mouseout” κλπ.
Παράδειγμα δεύτερο-CSS και jQuery.Χρήση του addClass()
Εδώ θα κάνουμε το εξής:Θα δημιουργήσουμε 1 παράγραφο και όταν θα πατήσουμε κλικ από πάνω τότε θα της εφαρμοστεί ένα ένα διαφορετικό css στυλ.
Δημιουργούμε στο css αρχείο 2 κλάσεις: H πρώτη είναι η “.nostyle” και η δεύτερη η “.add”.Στην παράγραφό μας θα εφαρμόσουμε την κλάση “nostyle” και εν συνεχεία εάν πατήσουμε πάνω της θα της εφαρμόσουμε με τη χρήση της jQuery την css class “add”..
1.) Ανάμεσα στα body tags δημιουργούμε μία παράγραφο..
[html]
<p class="nostyle">
" But I must explain to you how all this mistaken
idea of denouncing pleasure and praising pain was born
and I will give you a complete account of the system,
and expound the actual teachings of the great explorer
of the truth, the master-builder of human happiness.
No one rejects, dislikes, or avoids pleasure itself, because
it is pleasure, but because those who do not know how to pursue pleasure
rationally encounter consequences that are extremely painful. Nor again
is there anyone who loves or pursues or desires to obtain pain of itself,
because it is pain, but because occasionally circumstances occur in which toil
and pain can procure him some great pleasure. To take a trivial example, which
of us ever undertakes laborious physical exercise, except to obtain some advantage
from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that
has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
[/html]
2.) To css αρχείο μας είναι το εξής..
[css]
.nostyle{
width:400px;
}
add
{
background-color: blue;
color:orange;
font-size:20px;
width:800px;
}
[/css]
3.)O κώδικας που θα χρησιμοποιήσουμε στο js αρχείο με ονομασία “changepar.js” είναι ο εξής…
[javascript]
$(document).ready(function(){
$(‘p.nostyle’).click(function(){
$(‘p.nostyle’).addClass("add");
});
});
[/javascript]
Με το $(‘p.nostyle’).click(function() δηλώνουμε ότι εάν κλικάρω την παράγραφο με class “nostyle” θα εκτελεστούν οι εντολές που υπάρχουν μετά.
H addClass() function είναι μία συνάρτηση στην jQuery που μας δίνει τη δυνατότητα να αλλάξουμε το στυλ σε ένα html στοιχείο.Μέσα στις παρενθέσεις γράφουμε την νέα κλάση που θέλουμε να δώσουμε..!
Άλλες σημαντικές συναρτήσεις είναι οι:
H removeClass() είναι μια συνάρτηση που μας δίνει την δυνατότητα να διώξουμε το στυλ που μας εφαρμόζει κάποια συγκεκριμένη κλάση πάνω σε ένα html στοιχείο.
H toggleclass()όπου μπορούμε να προσθέτουμε ή να αφαιρούμε μία κλάση από ένα στοιχείο.Δηλαδή εάν εφαρμόζουμε τη “nostyle” και πατήσουμε πάνω στην παράγραφο θα εφαρμοστεί η “add”.Εάν ξαναπατήσουμε θα εφαρμοστεί η “nostyle” again!
Παράδειγμα με removeClass() και toggleClass()
Ακολουθώντας τα παραπάνω ας δούμε ένα live demo.
Πατώντας στην πάνω παράγραφο διώχνουμε εντελώς την κλάση.Πατώντας την κάτω παράγραφο μπορούμε να αλλάζουμε μεταξύ δύο κλάσεων κάθε φορά που κλικάρουμε πάνω στην παράγραφο.
1.)O HTML κώδικας.
[html]
<p class="add">
"But I must explain to you how all this mistaken
idea of denouncing pleasure and praising pain was born
and I will give you a complete account of the system,
and expound the actual teachings of the great explorer,
of the truth, the master-builder of human happiness.
No one rejects, dislikes, or avoids pleasure itself, because
it is pleasure, but because those who do not know how to pursue pleasure
rationally encounter consequences that are extremely painful. Nor again
is there anyone who loves or pursues or desires to obtain pain of itself,
because it is pain, but because occasionally circumstances occur in which toil
and pain can procure him some great pleasure. To take a trivial example, which
of us ever undertakes laborious physical exercise, except to obtain some advantage
from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that
has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
</p>
<p class="nostyle">
Εδώ είναι το παράδειγμα με το toggleClass!Πατήστε πάνω εδώ και μετά ξαναπατήστε!
</p>
[/html]
2.)Ο CSS κώδικας είναι ο ίδιος με το παραπάνω παράδειγμα.
2.)Ο κώδικας jQuery-αρχείο “removeClass.js”
[javascript]
$(document).ready(function(){
$(‘p.add’).click(function(){
$(‘p.add’).removeClass("add");
});
$(‘p.nostyle’).click(function(){
$(‘p.nostyle’).toggleClass("add");
});
});
[/javascript]
Γραμμές 3-5: Εάν κλίκαρουμε στην παράγραφο με κλάση “add” τότε αυτομάτως σταματάμε την εφαρμογή της κλάσης αυτής πάνω στην παράγραφο.
Γραμμές 9-11: Εδώ εάν κάνουμε κλίκ στην παράγραφό με class =”nostyle” τότε της εφαρμόζουμε την κλάση “add”.Εάν ξαναπατήσουμε την παράγραφο αυτή τότε της εφαρμόζουμε και πάλι τη κλάση “nostyle”.Αυτό θα γίνει όσες φορές και εάν πατήσουμε στην παράγραφο αυτή!
Παράδειγμα 3. :first ,:last,:odd και :even selectors στην jQuery .
Η jQuery έχει ένα χαρακτηριστικό πάρα πολύ δυνατό: Μπορεί να καταλαβαίνει πια div είναι πρώτη στη σελίδα μας και ποια είναι η τελευταία…Δηλαδή εάν έχουμε 5 divs μπορεί να καταλάβει ποια είναι πρώτη και ποια είναι τελευταία!Eπίσης εάν έχουμε μια λίστα μπορεί να καταλάβει ποιο στοιχείο της λίστας είναι ζυγός αριθμός και πιο στοιχείο είναι σε μονό αριθμό.
Παράδειγμα με :first και :last selectors
Θέλουμε να δώσουμε στυλ με css στην πρώτη και τελευταία div της σελίδας μας…
Θα δημιουργήσουμε 3 divs μέσα στο html αρχείο jQuery4.html.Στη συνέχεια θα δημιουργήσουμε 2 κλάσεις τη “.firstdiv” και την “.lastdiv”.Αφού τελειώσουμε με αυτό ,με πολύ απλό τρόπο θα δούμε πώς μπορούμε να δώσουμε στυλ στην πρώτη και την τελευταία div μας ενώ θα δούμε ότι στη δεύτερη μένει ανέπαφη.Εδώ δεν κλικάρουμε κάτι .Με το που φορτώνει η σελίδα εκτελείται ο κώδικας jQuery μας.
1.)Ο html κώδικας..
[html]
<body>
<div>
Αυτή είναι η πρώτη div…..
</div>
<div>
Αυτή είναι η δεύτερη div…
</div>
<div>
Αυτή είναι η τρίτη div…
</div>
[/html]
2.)Το css αρχείο μας όπου δημιουργούμε τις δύο προαναφερθείσες κλάσεις.
[css]
.firstdiv{
background-color: red;
}
.lastdiv{
background: green;
}
[/css]
3.)Ο κώδικας jQuery-αρχείο firstlast.js
[javascript]
$(document).ready(function(){
$(‘div:first’).addClass(‘firstdiv’);
$(‘div:last’).addClass(‘lastdiv’);
});
[/javascript]
Βλέπουμε ότι με το “:first” και το “:last” καταφέρνουμε να βρίσκουμε στη σελίδα μας την πρώτη και την τελευταία div και τους εφαρμόζουμε την κλάση που θέλουμε.Αυτοί οι δύο selectors είναι πολύ βασικοί όταν έχουμε να κάνουμε με html στοιχεία τα οποία δεν έχουν ids οι κλάσεις.
Παράδειγμα με : odd και :even selectors..
Εδώ με τη βοήθεια της jQuery θα μπορέσουμε να χρωματίσουμε διαφορετικά τις “μονές” γραμμές σε μία λίστα και διαφορετικά τις “ζυγές” γραμμές.
Ας κάνουμε ένα απλό παράδειγμα..
Θα κάνουμε μία λίστα με 8 αντικείμενα.Τα μονά θα τα γράψουμε με χρώμα κόκκινο και τα ζυγά με χρώμα μπλε.. Άρα λοιπόν θα δημιουργήσω μια css κλάση την even και την odd για ζυγά και μονά αντίστοιχα…
1.) Ο html κώδικας…
[html]
<ul>
<li>Προίον 1</li>
<li>Προίον 2</li>
<li>Προίον 3</li>
<li>Προίον 4</li>
<li>Προίον 5</li>
<li>Προίον 6</li>
<li>Προίον 7</li>
<li>Προίον 8</li>
</li>
</ul>
[/html]
2.)Ο css κώδικας..
[css]
.even1{color:red;}
.odd1{color:blue;}
[/css]
3.)Το αρχείο jQuery -oddeven.js
[javascript]
$(document).ready(function(){
$(‘li:odd’).addClass(‘odd’);
$(‘li:even’).addClass(‘even’);
});
[/javascript]
Εάν τρέξουμε τη σελίδα μας χωρίς να καλέσουμε στο head το αρχείο “oddeven.js” θα παρατηρήσουμε ότι θα δούμε μία λίστα μεν αλλά χώρις χρώματα.Εάν το τρέξουμε το αρχείο html που έχουμε με το αρχείο “oddeven.js” ενσωματωμένο στο head θα δούμε τη διαφορά!
Συγκεντρωτικό παράδειγμα και χρήση του :button selector στη jQuery.
Σε αυτό το τελευταίο παράδειγμα για σήμερα θα κάνουμε ένα συγκεντρωτικό παράδειγμα και θα δούμε πως μπορούμε να ελέγξουμε και κουμπιά -html buttons- με τη jQuery.
Θέλουμε το εξής..
Θα δημιουργήσουμε 10 divs οι οποίες θα είναι μέσα σε 1 div container.Σε αυτές τις 10 divs με την χρήση των jQuery selectors “:odd” και “:even” και 2 κουμπιών:
- Θα δώσουμε εξαρχής στυλ στις γραμμές μας.Αλλιώς θα χρωματίζονται οι μονές και αλλιώς οι ζυγές divs. Οι κλάσεις που θα χρησιμοποιήσουμε είναι οι “.odd” και “.even”.Για να εφαρμόσουμε τις κλάσεις θα χρησιμοποιήσουμε την addClass() συνάρτηση.
- Στη συνέχεια με τη χρήση ενός κουμπιού με id = “change” θα κάνουμε το εξής:Όταν το πατάμε θα δίνουμε στις div μας τελείως διαφορετικό στυλ.Επίσης όταν το ξαναπατάμε θα επανέρχεται το css στυλ σε αυτό που ήταν πριν το πατήσουμε.Εδώ θα χρησιμοποιηθεί η toggleClass() συνάρτηση.
- Τέλος θα χρησιμοποιήσουμε ένα κουμπί με id=”resetme” όπου όταν το πατάμε θα αφαιρείται οποιοδήποτε στυλ έχει εφαρμοστεί στις div μας.
Μέτα τα παραπάνω ζητούμενα ας ξεκινήσουμε….
1.)O κώδικας html είναι ο εξής-“jQuery6.html”
[html]
<div class="container">
<div>Θέμα 1</div>
<div>Θέμα 2</div>
<div>Θέμα 3</div>
<div>Θέμα 4</div>
<div>Θέμα 5</div>
<div>Θέμα 6</div>
<div>Θέμα 7</div>
<div>Θέμα 8</div>
<div>Θέμα 9</div>
<div>Θέμα 10</div>
</div>
<input type="button" id="change" value="Πατησέ με αρκετές φορές.."/>
<input type="button" id="resetme" value="Κάνε reset σε όλα!!"/>
[/html]
Εύκολο ε;Πάμε τώρα να δημιουργήσουμε το css αρχείο με τις προαναφερθείσες κλάσεις.
[css]
//το container μας έχει πλάτος 500pixels.
.container{
width:500px;
}
//το στυλ των ζυγών divs που εφαρμόζουμε με το που φορτώνεται η σελίδα..
.even
{
color:red;
background-color: #BAE6B5;
font-family:Arial;
padding:5px;
}
//το στυλ των μονών divs που εφαρμόζουμε με το που φορτώνεται η σελίδα..
.odd
{
color:blue;
background-color: #FDFAD9;
font-family:Arial;
padding:5px;
}
//το στυλ των ζυγών divs που εφαρμόζουμε με το που πατάμε το κουμπί με το "πάτησέ με"..
.evenNew
{
color:yellow;
background-color: #406F39;
font-family:Arial;
padding:10px;
}
//το στυλ των μονών divs που εφαρμόζουμε με το που πατάμε το κουμπί με το "πάτησέ με"..
.oddNew{
color: white;
background-color: gray;
font-family:Arial;
padding:10px;
}
//το στυλ των μονών divs που εφαρμόζουμε με το που πατάμε το κουμπί με το "κάνε reset.."..
.oddreset
{
color:black;
background-color: white;
font-family:Arial;
}
//το στυλ των ζυγών divs που εφαρμόζουμε με το που πατάμε το κουμπί με το "κάνε reset.."..
.evenreset{
color:black;
background-color: white;
font-family:Arial;
}
[/css]
Επίσης πολύ εύκολο και αυτό..Για πάμε τώρα στο τελευταίο κομμάτι -τον jQuery κώδικα…
Αρχείο “simple_buttons.js”
[javascript]
$(document).ready(function(){
$(‘div:odd’).addClass(‘odd’);
$(‘div:even’).addClass(‘even’);
$(‘#change:button’).click(function()
{
$(‘div:odd’).toggleClass(‘oddNew’);
$(‘div:even’).toggleClass(‘evenNew’);
});
$(‘#resetme:button’).click(function()
{
$(‘div:odd’).removeClass();
$(‘div:even’).removeClass();
});
});
[/javascript]
Έχουμε εξηγήσει τα πάντα εκτός από κάτι.Ας δούμε τη γραμμή 6:
$(‘#change:button’).click(function(): Εδώ βλέπουμε πώς με την jQuery μπορούμε να χειριστούμε το κουμπί με id=”change”..Είναι τόσο απλό πραγματικά.Εδώ ορίζουμε ότι εάν πατήσουμε το κουμπί αυτό θα γίνουν οι επόμενες εντολές που αντιστοιχούν στην click function αυτή δηλαδή οι εντολές που είναι στις γραμμές 8-9..Το ίδιο συμβαίνει και με το κουμπί στη γραμμή 13..
Σημείωση: Μην βάζετε keywords στο πεδίο για το όνομα καθώς επίσης και links προς άσχετες ιστοσελίδες με τη θεματολογία του άρθρου. Οι διαχειριστές του ifeed θα μαρκάρουν αυτόματα αυτά τα σχόλια ως spam!
χρειάζομαι επειγόντως βοήθεια.ξέρει κανείς πώς να εισάγω κλάση σε css για εισαγωγή χαρακτήρων utf-8.μόνο αυτό.ευχαριστώ και χρόνια πολλά.
Τι ακριβώς θέλεις να κάνεις? Δώσε ένα παράδειγμα
paaara polu kalo file. polu analytikos kai swstos. thanks…