Σε αυτή την εισαγωγή στην jQuery θα εξηγήσουμε πως να προσθέσετε το jquery στις ιστοσελίδες σας.
Υπάρχουν διάφοροι τρόποι για να ξεκινήσετε να χρησιμοποιείτε το jQuery στην ιστοσελίδα σας. Μπορείτε: …
- Να κατεβάσετε το jQuery library από το jQuery.com
- Να ενσωματώσετε το jQuery μέσω ενός CDN (Content Delivery Network), όπως είναι το Google
Εάν επιλέξετε την 1η επιλογή (Downloading jQuery) τότε υπάρχουν 2 εκδόσεις (versions) του jquery που μπορείτε να κατεβάσετε:
- Έκδοση παραγωγής (Production version) – αυτή την έκδοση σας την προτείνουμε για χρήση στην ιστοσελίδα σας, διότι είναι ελαχιστοποιημένη και συμπιεσμένη
- Έκδοση ανάπτυξης (Development version) – αυτή την έκδοση σας την προτείνουμε για έλεγχο και ανάπτυξη, διότι περιέχει μη συμπιεσμένο και ευανάγνωστο κώδικα
Και τις δυο εκδόσεις μπορείτε να τις κατεβάσετε από το jQuery.com.
εισαγωγή στην jQuery
Τι είναι το jquery:
Το jQuery library είναι ένα απλό, αυτόνομο αρχείο JavaScript, στο οποίο αναφέρεστε μέσω του HTML tag (Εδώ να τονίσουμε οτι το script tag πρέπει να βρίσκεται μέσα στο head της σελίδας):
|
1
|
<script type=”text/javascript” src=”jquery-1.10.2.min.js”></script>
|
ΠΡΟΣΟΧΗ: Πρέπει να τοποθετήσετε το αρχείο javascript που θα κατεβάσετε στον ίδιο φάκελο με τις σελίδες html στις οποίες θα χρησιμοποιηθεί. Εάν δεν θέλετε να κατεβάσετε (download) και να φιλοξενήσετε το jquery, τότε μπορείτε να το χρησιμοποιήσετε μέσω ενός CDN (Content Delivery Network). Τόσο η Google όσο και η Microsoft φιλοξενούν το jQuery. Εάν θέλετε να χρησιμοποιήσετε το jQuery μέσω της Google ή της Microsoft, τότε πρέπει να χρησιμοποιήσετε τον παρακάτω κώδικα: Μέσω του Google CDN:
|
1
2
3
|
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js“>// <![CDATA[
// ]]></script>
|
Μέσω του Microsoft CDN:
|
1
2
3
|
<script type=”text/javascript” src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js“>// <![CDATA[
// ]]></script>
|
Ακολουθούν παραδείγματα ολοκληρωμένης εφαρμογής του jquery σε ιστοσελίδες, ως εξάσκηση για την εισαγωγή στην jQuery:
Μέσω του Google CDN:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js“></script><script type=”text/javascript”>// <![CDATA[
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});
// ]]></script></pre>
<h2>This is a heading</h2>
<pre>
This is a paragraph.
This is another paragraph.
<button>Click me</button>
|
Μέσω του Microsoft CDN:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<script type=”text/javascript” src=”//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js”></script><script type=”text/javascript”>// <![CDATA[
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
});
});
// ]]></script>
</pre>
<h2>This is a heading</h2>
<pre>
This is a paragraph.
This is another paragraph.
<button>Click me</button>
|
Κλείνοντας να τονίσουμε ένα μεγάλο πλεονέκτημα της χρήσης του jquery μέσω του Google ή της Microsoft:
Πολλοί χρήστες έχουν ήδη κατεβάσει (download) από το Google ή της Microsoft κατά την επίσκεψη σε άλλο site που χρησιμοποιούσε επίσης jquery.
Αυτό έχει σαν αποτέλεσμα να είναι ήδη φορτωμένο από την cache όταν επισκεφτούν το δικό σας site, το οποίο οδηγεί σε μικρότερο χρόνο εκτέλεσης της ιστοσελίδας σας.
Επίσης, τα περισσότερα Content Delivery Networks εγγυώνται οτι εφόσον ο χρήστης ζητήσει ένα αρχείο, αυτό θα φορτωθεί από το server που βρίσκεται πλησιέστερα στο χρήστη, , το οποίο επίσης οδηγεί σε μικρότερο χρόνο εκτέλεσης της ιστοσελίδας σας.
Αυτό έχει σαν αποτέλεσμα να είναι ήδη φορτωμένο από την cache όταν επισκεφτούν το δικό σας site, το οποίο οδηγεί σε μικρότερο χρόνο εκτέλεσης της ιστοσελίδας σας.
Επίσης, τα περισσότερα Content Delivery Networks εγγυώνται οτι εφόσον ο χρήστης ζητήσει ένα αρχείο, αυτό θα φορτωθεί από το server που βρίσκεται πλησιέστερα στο χρήστη, , το οποίο επίσης οδηγεί σε μικρότερο χρόνο εκτέλεσης της ιστοσελίδας σας.
Αυτό το άρθρο ήταν μια εισαγωγή στην jQuery. Στο infopolis.gr θα βρείτε πολλά άρθρα για επιπλέον μελέτη.
Πηγή: http://www.infopolis.gr/jquery-introduction/