close

Βασική σύνταξη του jQuery- Επιλογή, χειρισμός και εφέ

Η βασική σύνταξη του jQuery περιλαμβάνει τη χρήση ενός επιλογέα(επιλογέας τύπου CSS) και μεθόδων για τον χειρισμό των επιλεγμένων στοιχείων. Ακολουθούν μερικά βασικά παραδείγματα σύνταξης του jQuery:

 

Επιλογή στοιχείων

  • Επιλογή στοιχείων βάσει ονόματος ετικέτας HTML: $("tagname") Παράδειγμα: $("p") επιλέγει όλα <p> τα στοιχεία στη σελίδα.

  • Επιλογή στοιχείων ανά κλάση CSS: $(".classname") Παράδειγμα: $(".myClass") επιλέγει όλα τα στοιχεία με την κλάση "myClass".

  • Επιλογή στοιχείων κατά αναγνωριστικό: $("#idname") Παράδειγμα: $("#myElement") επιλέγει το στοιχείο με το αναγνωριστικό "myElement".

  • Επιλογή στοιχείων ανά χαρακτηριστικό: $("[attribute='value']") Παράδειγμα: $("[data-type='button']") επιλέγει στοιχεία με το χαρακτηριστικό data-type ορισμένο σε "κουμπί".

  • Συνδυασμός επιλογών: $("tagname.classname"), $("#idname .classname"), ...

 

Χειρισμός επιλεγμένων στοιχείων

  • Αλλαγή του περιεχομένου ενός στοιχείου: .html(), .text() Παράδειγμα: $("#myElement").html("New content") ορίζει το περιεχόμενο HTML του στοιχείου με αναγνωριστικό "myElement".

  • Τροποποίηση χαρακτηριστικών στοιχείων: .attr(), .prop() Παράδειγμα: $("img").attr("src", "newimage.jpg") αλλάζει το src χαρακτηριστικό όλων <img> των στοιχείων.

  • Χειρισμός κλάσεων CSS ενός στοιχείου: .addClass(), .removeClass(), .toggleClass() Παράδειγμα: $("#myElement").addClass("highlight") προσθέτει την κλάση "επισήμανση" στο στοιχείο με αναγνωριστικό "myElement".

  • Απόκρυψη/εμφάνιση στοιχείων: .hide(), .show(), .toggle() Παράδειγμα: $(".myClass").hide() κρύβει όλα τα στοιχεία με την κλάση "myClass".

  • Χειρισμός συμβάντων σε στοιχεία: .click(), .hover(), .submit(), ... Παράδειγμα: $("button").click(function() { ... }) καταχωρεί ένα πρόγραμμα χειρισμού συμβάντων κλικ

 

Εργασία με συλλογές στοιχείων

  • Επανάληψη μέσω μιας συλλογής: .each() Παράδειγμα: $("li").each(function() { ... }) επαναλαμβάνεται πάνω από κάθε <li> στοιχείο της σελίδας.

  • Φιλτράρισμα συλλογής: .filter(), .not() Παράδειγμα: $("div").filter(".myClass") φιλτράρει τα <div> στοιχεία και επιλέγει αυτά με την κλάση "myClass".

  • Εισαγωγή στοιχείων σε μια συλλογή: .append(), .prepend(), .after(), .before() Παράδειγμα: $("#myElement").append("<p>New paragraph</p>") προσαρτά ένα νέο <p> στοιχείο στο στοιχείο με αναγνωριστικό "myElement".

 

Εφέ και κινούμενα σχέδια

  • Εκτέλεση εφέ fadeIn/fadeOut: .fadeIn(), .fadeOut() Παράδειγμα: $("#myElement").fadeIn(1000) ξεθωριάζει στο στοιχείο με αναγνωριστικό "myElement" σε διάρκεια 1 δευτερολέπτου.

  • Εκτέλεση εφέ slideUp/slideDown: .slideUp(), .slideDown() Παράδειγμα: $(".myClass").slideUp(500) σύρει προς τα πάνω όλα τα στοιχεία με την κλάση "myClass" σε διάρκεια 0,5 δευτερολέπτων.

  • Εκτέλεση προσαρμοσμένων κινούμενων εικόνων: .animate() Παράδειγμα: $("#myElement").animate({ left: '250px', opacity: '0.5' }) κινείται το στοιχείο με αναγνωριστικό "myElement" αλλάζοντας την αριστερή θέση και την αδιαφάνειά του.

 

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