Η δημιουργία μιας εφαρμογής που βασίζεται σε Ajax γίνεται πολύ απλή και γρήγορη με το jQuery.
Το jQuery δημιουργήθηκε αρχικά από τον John Resig στις αρχές του 2006. Το έργο jQuery αυτή τη στιγμή διατηρείται και διατηρείται από μια κατανεμημένη ομάδα προγραμματιστών ως έργο ανοιχτού κώδικα.
Μπορείτε να εξοικονομήσετε πολύ χρόνο και προσπάθεια με το jQuery. Προσθέστε λοιπόν αυτόν τον ιστότοπο στα αγαπημένα σας και συνεχίστε να διαβάζετε
Υπάρχουν πολλά περισσότερα πράγματα που μπορείτε να κάνετε με το jQuery.
Η λίστα δεν τελειώνει εκεί, υπάρχουν πολλά άλλα ωραία πράγματα που μπορείτε να κάνετε με το jQuery.
Υπάρχουν πολλά πλεονεκτήματα για τα οποία κάποιος πρέπει να επιλέξει τη χρήση του jQuery:
Για να ξεκινήσετε, ας κατεβάσουμε πρώτα ένα αντίγραφο του jQuery και στη συνέχεια ας το συμπεριλάβουμε στο έργο μας. Δύο εκδόσεις του jQuery είναι διαθέσιμες για λήψη: κομπρέσα e δεν συμπιέζεται .
Το ασυμπίεστο αρχείο είναι πιο κατάλληλο για ανάπτυξη ή εντοπισμό σφαλμάτων. ενώ, το ελαχιστοποιημένο και συμπιεσμένο αρχείο συνιστάται για παραγωγή επειδή εξοικονομεί εύρος ζώνης και βελτιώνει την απόδοση λόγω του μικρότερου μεγέθους του αρχείου.
Μπορούμε να κατεβάσουμε το jQuery από εδώ: https://jquery.com/download/
Μόλις κατεβάσετε το αρχείο jQuery μπορείτε να δείτε ότι έχει επέκταση js, δηλαδή είναι αρχείο JavaScript. Στην πραγματικότητα το JQuery δεν είναι παρά μια βιβλιοθήκη JavaScript, έτσι μπορείτε να συμπεριλάβετε το αρχείο jQuery στο έγγραφο HTML με το στοιχείο όπως ακριβώς συμπεριλαμβάνετε κανονικά αρχεία JavaScript.
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Θυμηθείτε να συμπεριλαμβάνετε πάντα το αρχείο jQuery πριν από προσαρμοσμένα σενάρια. Διαφορετικά, τα API jQuery δεν θα είναι διαθέσιμα όταν ο κώδικας jQuery προσπαθεί να αποκτήσει πρόσβαση σε αυτά.
Όπως ίσως έχετε παρατηρήσει, παραλείψαμε το χαρακτηριστικό στο προηγούμενο παράδειγμα type="text/javascript" μέσα στην ετικέτα . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiολοκληρωμένη σε HTML5 και σε όλα τα σύγχρονα προγράμματα περιήγησης.
Εναλλακτικά, μπορείτε να ενσωματώσετε το jQuery στο έγγραφό σας μέσω ελεύθερα διαθέσιμων συνδέσμων CDN (Content Delivery Network), εάν προτιμάτε να αποφύγετε τη λήψη του αρχείου.
Τα CDN μπορούν να προσφέρουν ένα πλεονέκτημα απόδοσης μειώνοντας τον χρόνο φόρτωσης, επειδή φιλοξενούν το jQuery σε πολλούς διακομιστές σε όλο τον κόσμο και όταν ένας χρήστης ζητήσει το αρχείο, θα προβληθεί από τον πλησιέστερο διακομιστή.
Αυτό έχει επίσης το πλεονέκτημα ότι εάν ο επισκέπτης της ιστοσελίδας σας έχει ήδη κατεβάσει ένα αντίγραφο του jQuery από το ίδιο CDN ενώ επισκέπτεται άλλους ιστότοπους, δεν θα χρειαστεί να το κατεβάσει ξανά, καθώς βρίσκεται ήδη στη μνήμη cache του προγράμματος περιήγησής του.
Σε αυτή την περίπτωση θα πρέπει να γράψετε:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>Εκτός από το CDN που παρέχεται από το έργο jquery, μπορείτε να συμπεριλάβετε το jQuery μέσω Google e Microsoft cdn.
Έχοντας δει τους στόχους της βιβλιοθήκης jQuery και πώς να τη συμπεριλάβετε στο έγγραφό σας, τώρα είναι η ώρα να εφαρμόσετε το jQuery.
Τώρα ας κάνουμε μια απλή λειτουργία jQuery αλλάζοντας το χρώμα του κειμένου της κεφαλίδας από το προχρώμαdefiγυαλισμένο μαύρο έως πράσινο χρώμα.
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>Στον κώδικα εκτελέσαμε μια απλή λειτουργία jQuery αλλάζοντας το χρώμα της κεφαλίδας, δηλαδή του στοιχείου χρησιμοποιώντας τον επιλογέα του στοιχείου jQuery και τη μέθοδο css() όταν το έγγραφο είναι έτοιμο, γνωστό ως συμβάν έτοιμο για έγγραφο.
Μια δήλωση jQuery συνήθως ξεκινά με ένα σύμβολο δολαρίου ( $) και τελειώνει με ερωτηματικό ( ;).
Στο jQuery, το σύμβολο του δολαρίου ( $) είναι απλώς ένα ψευδώνυμο για το jQuery. Εξετάστε το ακόλουθο δείγμα κώδικα που δείχνει την απλούστερη πρόταση jQuery.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Το παράδειγμα εμφανίζει απλώς ένα προειδοποιητικό μήνυμα "Hello I'm a JQuery sign» στον χρήστη. Ας δούμε μερικά χαρακτηριστικά:
<script>: Το jQuery είναι απλώς μια βιβλιοθήκη JavaScript, ο κώδικας jQuery μπορεί να τοποθετηθεί μέσα στο στοιχείο <script>, ή μπορείτε να το βάλετε σε ένα εξωτερικό αρχείο JavaScript.$(document).ready(handler); είναι γνωστό ως έτοιμο γεγονός. Που είναι handler είναι μια συνάρτηση που μεταβιβάζεται στη μέθοδο που θα εκτελεστεί, μόλις το έγγραφο είναι έτοιμο, δηλαδή όταν η ιεραρχία DOM έχει ολοκληρωθεί.Η μέθοδος jQuery ready() Συνήθως χρησιμοποιείται με μια ανώνυμη συνάρτηση. Έτσι, το παραπάνω παράδειγμα μπορεί επίσης να γραφτεί με συντομογραφία ως εξής:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Μέσα σε μια συνάρτηση μπορείτε να γράψετε δηλώσεις jQuery για να εκτελέσετε οποιαδήποτε ενέργεια ακολουθώντας τη βασική σύνταξη, όπως:
$(selector).action();Που είναι, $(selector) Βασικά επιλέγει τα στοιχεία HTML από το δέντρο DOM ώστε να μπορεί να χειριστεί και action() εφαρμόστε ορισμένες ενέργειες στα επιλεγμένα στοιχεία, όπως αλλαγή της τιμής της ιδιότητας CSS ή ρύθμιση του περιεχομένου του στοιχείου κ.λπ.
Τώρα ας δούμε ένα άλλο παράδειγμα που ορίζει το κείμενο της παραγράφου:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>Το παράδειγμα jQuery αναφέρεται στον επιλογέα p, και αυτό επιλέγει όλες τις παραγράφους και μετά τη μέθοδο text() ορίστε το περιεχόμενο κειμένου της παραγράφου με "Hello World!".
Το κείμενο της παραγράφου στο προηγούμενο παράδειγμα αντικαθίσταται αυτόματα όταν το έγγραφο είναι έτοιμο. Ας δούμε όμως πώς να το κάνουμε σε περίπτωση που θέλετε να εκτελέσετε μια ενέργεια πριν εκτελέσετε τον κώδικα jQuery, για να αντικαταστήσετε το κείμενο της παραγράφου.
Ας δούμε ένα τελευταίο παράδειγμα:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>Σε αυτό το παράδειγμα, το κείμενο της παραγράφου αντικαθίσταται μόνο όταν εμφανίζεται ένα συμβάν κλικ στο κουμπί "Replace Text", που σημαίνει απλά όταν ένας χρήστης κάνει κλικ σε αυτό το κουμπί.
Μπορείτε να χρησιμοποιήσετε τον επιλογέα αναγνωριστικού για να επιλέξετε ένα μεμονωμένο στοιχείο με το μοναδικό αναγνωριστικό στη σελίδα.
Για παράδειγμα, ο παρακάτω κώδικας jQuery θα επιλέξει και θα επισημάνει ένα στοιχείο με το χαρακτηριστικό ID id="markid", όταν το έγγραφο είναι έτοιμο.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Ο επιλογέας κλάσης μπορεί να χρησιμοποιηθεί για την επιλογή στοιχείων με μια συγκεκριμένη κλάση.
Για παράδειγμα, ο παρακάτω κώδικας jQuery θα επιλέξει και θα επισημάνει στοιχεία με το χαρακτηριστικό class class="markclass", όταν το έγγραφο είναι έτοιμο.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Ο επιλογέας στοιχείων μπορεί να χρησιμοποιηθεί για την επιλογή στοιχείων με βάση το όνομα του στοιχείου.
Για παράδειγμα, ο παρακάτω κώδικας jQuery θα επιλέξει και θα επισημάνει όλη την παράγραφο, δηλαδή τα στοιχεία "<p>" του εγγράφου όταν είναι έτοιμο.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Μπορείτε να χρησιμοποιήσετε τον επιλογέα χαρακτηριστικών για να επιλέξετε ένα στοιχείο με βάση ένα από τα χαρακτηριστικά HTML του, όπως ένα χαρακτηριστικό συνδέσμου targetή το χαρακτηριστικό μιας εισόδου type, π.χ.
Για παράδειγμα, ο παρακάτω κώδικας jQuery θα επιλέξει και θα επισημάνει όλες τις εισαγωγές κειμένου, όπως στοιχεία "<input>" με type="text", όταν το έγγραφο είναι έτοιμο.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Μπορείτε επίσης να συνδυάσετε επιλογείς CSS για να κάνετε την επιλογή σας ακόμα πιο ακριβή.
Για παράδειγμα, μπορείτε να συνδυάσετε τον επιλογέα κλάσης με έναν επιλογέα στοιχείων για να βρείτε στοιχεία σε ένα έγγραφο που έχουν συγκεκριμένο τύπο και κλάση.
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>Εκτός από τους επιλογείς definiti, το jQuery παρέχει τον δικό του προσαρμοσμένο επιλογέα για να βελτιώσει περαιτέρω τις δυνατότητες επιλογής στοιχείων σε μια σελίδα.
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>Τα συμβάντα συχνά ενεργοποιούνται από την αλληλεπίδραση του χρήστη με την ιστοσελίδα, όπως όταν κάνετε κλικ σε έναν σύνδεσμο ή κουμπί, όταν εισάγετε κείμενο σε ένα πλαίσιο εισαγωγής ή περιοχή κειμένου, κάνετε μια επιλογή σε ένα πλαίσιο επιλογής, πατήστε ένα πλήκτρο στο πληκτρολόγιο, μετακινήστε το δείκτη του ποντικιού , και τα λοιπά. Σε ορισμένες περιπτώσεις, το ίδιο το πρόγραμμα περιήγησης μπορεί να ενεργοποιήσει συμβάντα, όπως συμβάντα φόρτωσης και λήψης σελίδας.
Το jQuery βελτιώνει τους βασικούς μηχανισμούς χειρισμού συμβάντων, προσφέροντας μεθόδους συμβάντων για τα περισσότερα συμβάντα εγγενών προγραμμάτων περιήγησης, ορισμένες από αυτές τις μεθόδους είναι ready(), click(), keypress(), focus(), blur(), change(), π.χ.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Γενικά, τα γεγονότα μπορούν να ταξινομηθούν σε τέσσερις κύριες ομάδες:
Ένα συμβάν ποντικιού ενεργοποιείται όταν ο χρήστης κάνει κλικ σε ένα στοιχείο, μετακινεί τον δείκτη του ποντικιού κ.λπ.
Ακολουθούν ορισμένες κοινά χρησιμοποιούμενες μέθοδοι jQuery για το χειρισμό συμβάντων του ποντικιού.
click()Η μέθοδος click() επισυνάψτε μια συνάρτηση χειριστή συμβάντων στα επιλεγμένα στοιχεία για το συμβάν "click". Η συνδεδεμένη συνάρτηση εκτελείται όταν ο χρήστης κάνει κλικ σε αυτό το στοιχείο. Το παρακάτω παράδειγμα θα κρύψει τα στοιχεία <p> σε μια σελίδα όταν κάνετε κλικ.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Η μέθοδος dblclick() επισυνάψτε μια συνάρτηση χειριστή συμβάντων στα επιλεγμένα στοιχεία για το συμβάν "dblclick". Η συνδεδεμένη συνάρτηση εκτελείται όταν ο χρήστης κάνει διπλό κλικ σε αυτό το στοιχείο. Το παρακάτω παράδειγμα θα κρύψει τα στοιχεία <p> όταν κάνετε διπλό κλικ σε αυτά.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Η μέθοδος hover() επισυνάψτε μία ή δύο συναρτήσεις χειριστή συμβάντων σε επιλεγμένα στοιχεία που εκτελούνται όταν ο δείκτης του ποντικιού μετακινείται μέσα και έξω από στοιχεία. Η πρώτη συνάρτηση εκτελείται όταν ο χρήστης τοποθετεί το δείκτη του ποντικιού πάνω από ένα στοιχείο, ενώ η δεύτερη συνάρτηση εκτελείται όταν ο χρήστης αφαιρεί το δείκτη του ποντικιού από αυτό το στοιχείο.
Το παρακάτω παράδειγμα θα επισημάνει στοιχεία <p> όταν τοποθετείτε τον κέρσορα πάνω του, η επισήμανση θα αφαιρεθεί όταν αφαιρέσετε τον κέρσορα.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Η μέθοδος mouseenter() επισυνάψτε μια συνάρτηση χειριστή συμβάντων στα επιλεγμένα στοιχεία, η οποία εκτελείται όταν το ποντίκι εισάγει ένα στοιχείο. Το παρακάτω παράδειγμα θα προσθέσει επισήμανση κλάσης στο στοιχείο <p> όταν τοποθετείτε τον κέρσορα πάνω του.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Η μέθοδος mouseleave() επισυνάψτε μια λειτουργία χειρισμού συμβάντων σε επιλεγμένα στοιχεία που εκτελείται όταν το ποντίκι αφήνει ένα στοιχείο. Το παρακάτω παράδειγμα θα αφαιρέσει την επισήμανση κλάσης από το στοιχείο <p> όταν αφαιρείτε τον κέρσορα από αυτό.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Ένα συμβάν πληκτρολογίου εμφανίζεται όταν ο χρήστης πατάει ή αφήνει ένα πλήκτρο στο πληκτρολόγιο. Ας δούμε μερικές κοινώς χρησιμοποιούμενες μεθόδους jQuery για το χειρισμό συμβάντων πληκτρολογίου.
keypress()Η μέθοδος keypress() επισυνάπτει μια λειτουργία χειρισμού συμβάντων σε επιλεγμένα στοιχεία (συνήθως στοιχεία ελέγχου φόρμας) που εκτελείται όταν το πρόγραμμα περιήγησης λαμβάνει στοιχεία πληκτρολογίου από τον χρήστη. Το ακόλουθο παράδειγμα θα εμφανίσει ένα μήνυμα όταν ενεργοποιηθεί το συμβάν keypress και πόσες φορές ενεργοποιείται όταν πατάτε το πλήκτρο στο πληκτρολόγιό σας.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Το συμβάν πατήματος πλήκτρων είναι παρόμοιο με το συμβάν keydown, εκτός από τα πλήκτρα τροποποίησης και μη εκτύπωσης όπως Shift, Esc, Backspace ή Delete, πλήκτρα βέλους κ.λπ. ενεργοποιούν συμβάντα πλήκτρων αλλά όχι συμβάντα πληκτρολογίου.
keydown()Η μέθοδος keydown() επισυνάπτει μια λειτουργία χειρισμού συμβάντων σε επιλεγμένα στοιχεία (συνήθως στοιχεία ελέγχου φορμών) που εκτελείται όταν ο χρήστης πατήσει για πρώτη φορά ένα πλήκτρο στο πληκτρολόγιο. Το ακόλουθο παράδειγμα θα εμφανίσει ένα μήνυμα όταν ενεργοποιηθεί το συμβάν keydown και πόσες φορές ενεργοποιείται όταν πατάτε το πλήκτρο στο πληκτρολόγιό σας.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Η μέθοδος keyup() επισυνάψτε μια συνάρτηση χειρισμού συμβάντων σε επιλεγμένα στοιχεία (συνήθως στοιχεία ελέγχου φορμών) που εκτελείται όταν ο χρήστης αφήσει ένα πλήκτρο στο πληκτρολόγιο. Το ακόλουθο παράδειγμα θα εμφανίσει ένα μήνυμα όταν ενεργοποιηθεί το συμβάν keyup και πόσες φορές ενεργοποιείται όταν πατάτε και αφήνετε ένα πλήκτρο στο πληκτρολόγιό σας.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Ένα συμβάν φόρμας ενεργοποιείται όταν ένα στοιχείο ελέγχου φόρμας λαμβάνει ή χάνει την εστίαση ή όταν ο χρήστης αλλάζει μια τιμή ελέγχου φόρμας, όπως η πληκτρολόγηση κειμένου σε μια εισαγωγή κειμένου, η επιλογή μιας επιλογής σε ένα πλαίσιο επιλογής κ.λπ. . Ακολουθούν ορισμένες κοινώς χρησιμοποιούμενες μέθοδοι jQuery για το χειρισμό συμβάντων φόρμας.
change()Η μέθοδος change() επισυνάψτε μια συνάρτηση χειριστή συμβάντων σε στοιχεία <input> και εκτελείται όταν αλλάξει η τιμή του. Το ακόλουθο παράδειγμα θα εμφανίσει ένα προειδοποιητικό μήνυμα όταν επιλέγετε μια επιλογή στο αναπτυσσόμενο πλαίσιο επιλογής.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Για τα πλαίσια κλικ, τα πλαίσια ελέγχου και τα κουμπιά επιλογής, το συμβάν ενεργοποιείται αμέσως όταν ο χρήστης κάνει μια επιλογή του ποντικιού, αλλά για την εισαγωγή κειμένου και την περιοχή κειμένου το συμβάν ενεργοποιείται αφού το στοιχείο χάσει την εστίαση.
focus()Η μέθοδος focus() επισυνάπτει μια συνάρτηση χειριστή συμβάντων σε επιλεγμένα στοιχεία (συνήθως στοιχεία ελέγχου και δεσμεύσεις φορμών) που εκτελείται όταν εστιάζει. Το ακόλουθο παράδειγμα θα εμφανίσει ένα μήνυμα όταν εστιάζει η εισαγωγή κειμένου.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Η μέθοδος blur() επισυνάψτε μια συνάρτηση χειριστή συμβάντων για να σχηματίσετε στοιχεία όπως <input>, <textarea>, <select> που εκτελείται όταν χάσει την εστίαση. Το ακόλουθο παράδειγμα θα εμφανίσει ένα μήνυμα όταν η εισαγωγή κειμένου χάσει την εστίαση.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Η μέθοδος submit() επισυνάψτε μια συνάρτηση χειριστή συμβάντων σε στοιχεία <form> που εκτελείται όταν ο χρήστης προσπαθεί να υποβάλει μια φόρμα. Το ακόλουθο παράδειγμα θα εμφανίσει ένα μήνυμα με βάση την τιμή που εισαγάγατε κατά την προσπάθεια υποβολής της φόρμας.
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>Τα συμβάντα ενεργοποιούνται επίσης σε μια κατάσταση όπου η σελίδα DOM (Μοντέλο αντικειμένου εγγράφου) είναι έτοιμη ή όταν ο χρήστης αλλάζει μέγεθος ή κάνει κύλιση στο παράθυρο του προγράμματος περιήγησης κ.λπ. Ακολουθούν ορισμένες κοινά χρησιμοποιούμενες μέθοδοι jQuery για τη διαχείριση αυτού του τύπου συμβάντων.
ready()Η μέθοδος ready() καθορίζει μια συνάρτηση που θα εκτελεστεί όταν το DOM είναι πλήρως φορτωμένο.
Το παρακάτω παράδειγμα θα αντικαταστήσει το κείμενο της παραγράφου μόλις η ιεραρχία DOM χτιστεί πλήρως και είναι έτοιμη για χειραγώγηση.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Η μέθοδος resize() επισυνάψτε μια συνάρτηση χειριστή συμβάντων στο στοιχείο παραθύρου που εκτελείται όταν αλλάζει το μέγεθος του παραθύρου του προγράμματος περιήγησης.
Το παρακάτω παράδειγμα θα εμφανίσει το τρέχον πλάτος και ύψος του παραθύρου του προγράμματος περιήγησης όταν προσπαθείτε να αλλάξετε το μέγεθός του σύροντας τις γωνίες του.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Η μέθοδος scroll() συνδέστε μια λειτουργία χειριστή συμβάντων στο παράθυρο ή στο iframe και στοιχεία κύλισης που εκτελούνται κάθε φορά που αλλάζει η θέση κύλισης του στοιχείου.
Το ακόλουθο παράδειγμα θα εμφανίσει ένα μήνυμα κατά την κύλιση στο παράθυρο του προγράμματος περιήγησης.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Η βρετανική CMA εξέδωσε προειδοποίηση σχετικά με τη συμπεριφορά της Big Tech στην αγορά τεχνητής νοημοσύνης. Εκεί…
Το διάταγμα «Case Green», που διατυπώθηκε από την Ευρωπαϊκή Ένωση για τη βελτίωση της ενεργειακής απόδοσης των κτιρίων, ολοκλήρωσε τη νομοθετική του διαδικασία με…
Παρουσιάστηκε η ετήσια έκθεση της Casaleggio Associati για το ηλεκτρονικό εμπόριο στην Ιταλία. Έκθεση με τίτλο «AI-Commerce: τα σύνορα του ηλεκτρονικού εμπορίου με την τεχνητή νοημοσύνη».…
Αποτέλεσμα συνεχούς τεχνολογικής καινοτομίας και δέσμευσης για το περιβάλλον και την ευημερία των ανθρώπων. Η Bandalux παρουσιάζει το Airpure®, μια σκηνή…