close

Χειρισμός DOM με jQuery -Τεχνικές και Παραδείγματα

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

Ακολουθούν επεξηγήσεις για κάθε ενότητα μαζί με συγκεκριμένα παραδείγματα:

 

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

  • $("p"): Επιλέξτε όλα <p> τα στοιχεία στη σελίδα.
  • $(".myClass"): Επιλέξτε όλα τα στοιχεία με την κλάση myClass.
  • $("#myElement"): Επιλέξτε το στοιχείο με το αναγνωριστικό myElement.
  • $("parentElement").find(".childElement"): Επιλέξτε όλα τα θυγατρικά στοιχεία με την τάξη childElement μέσα στο parentElement.

Παράδειγμα:

$("p").css("color", "red");

 

Αλλαγή περιεχομένου

  • $("#myElement").html("<b>Hello World</b>"): Ορίστε το περιεχόμενο HTML για το στοιχείο με το αναγνωριστικό myElement.
  • $("p").text("New text"): Ορίστε το περιεχόμενο κειμένου για όλα <p> τα στοιχεία.

Παράδειγμα:

$("p").text("New paragraph");

 

Προσθήκη και αφαίρεση στοιχείων

  • $("ul").append("<li>New item</li>"): Προσθέστε ένα <li> στοιχείο στο τέλος της μη ταξινομημένης λίστας( <ul>).
  • $(".myClass").remove(): Καταργήστε όλα τα στοιχεία με την κλάση myClass από τη σελίδα.

Παράδειγμα:

$("ul").append("<li>Item 4</li>");

 

Αλλαγή χαρακτηριστικών και κλάσεων

  • $("img").attr("src", "new-image.jpg"): Αλλάξτε την src τιμή του χαρακτηριστικού για όλα <img> τα στοιχεία.
  • $("#myElement").addClass("newClass"): Προσθέστε την κλάση newClass στο στοιχείο με το αναγνωριστικό myElement.
  • $("#myElement").removeClass("oldClass"): Αφαιρέστε την κλάση oldClass από το στοιχείο με το αναγνωριστικό myElement.

Παράδειγμα:

$("img").attr("alt", "New Image");

 

Χειρισμός εκδηλώσεων

$("button").click(function() { }): Καταχωρίστε μια λειτουργία χειριστή συμβάντων όταν <button> γίνεται κλικ σε ένα στοιχείο.

Παράδειγμα:

$("button").click(function() {  
  alert("Button clicked!");  
});

 

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

  • $("#myElement").hide(): Απόκρυψη του στοιχείου με το αναγνωριστικό myElement.
  • $("#myElement").show(): Εμφάνιση του στοιχείου με το αναγνωριστικό myElement.
  • $("#myElement").fadeOut(): Εκτελέστε ένα εφέ εξασθένισης στο στοιχείο με το αναγνωριστικό myElement.
  • $("#myElement").fadeIn(): Εκτελέστε ένα εφέ fade-in στο στοιχείο με το αναγνωριστικό myElement.

Παράδειγμα:

$("#myElement").fadeOut(1000, function() {  
  console.log("Fade out complete");  
});