jQuery ρύθμιση περιεχομένου και ιδιοτήτων

Ρύθμιση περιεχομένου - text(), html() και val()

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

  • text() - Ρύθμιση ή επιστροφή του κειμένου του επιλεγμένου στοιχείου
  • html() - Ρύθμιση ή επιστροφή του περιεχομένου του επιλεγμένου στοιχείου (συμπεριλαμβανομένων των σημείων HTML)
  • val() - Ρύθμιση ή επιστροφή της τιμής του πεδίου της φόρμας

Ο παρακάτω παράδειγμα δείχνει πώς να ρυθμίσετε το περιεχόμενο χρησιμοποιώντας τις μεθόδους text(), html() και val():

Παράδειγμα

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

Δοκιμάστε το شخصικά

Λειτουργίες callback για text(), html() και val()

Οι τρεις μεθόδους jQuery: text(), html() και val() έχουν επίσης λειτουργίες callback. Οι λειτουργίες callback λαμβάνουν δύο παραμέτρους: τον αριθμό του τρέχοντος στοιχείου στη λίστα των επιλεγμένων στοιχείων και την αρχική (πρώην) τιμή. Στη συνέχεια, επιστρέφουν τη νέα τιμή ως字符串.

Το παρακάτω παράδειγμα δείχνει τη χρήση της ανατροφοδότησης των μεθόδων text() και html()

Παράδειγμα

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    επιστρέφει "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});
$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    επιστρέφει "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

Δοκιμάστε το شخصικά

Ρύθμιση ιδιοτήτων - attr()

Η μέθοδος attr() του jQuery χρησιμοποιείται επίσης για τη ρύθμιση/τροποποίηση τιμών ιδιοτήτων.

Το παρακάτω παράδειγμα δείχνει πώς να αλλάξετε (να ρυθμίσετε) την τιμή της ιδιότητας href του σύνδεσμου:

Παράδειγμα

$("button").click(function(){
  $("#w3s").attr("href","http://www.codew3c.com/jquery");
});

Δοκιμάστε το شخصικά

Η μέθοδος attr() επιτρέπει επίσης την ταυτόχρονη ρύθμιση πολλαπλών ιδιοτήτων.

Το παρακάτω παράδειγμα δείχνει πώς να ρυθμίσετε ταυτόχρονα τις ιδιότητες href και title:

Παράδειγμα

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.codew3c.com/jquery",
    "title" : "CodeW3C.com jQuery Τεκμηρίωση"
  });
});

Δοκιμάστε το شخصικά

Ανατροφοδότηση της μεθόδου attr()

Η μέθοδος attr() του jQuery παρέχει επίσης ανατροφοδότηση. Η ανατροφοδότηση περιλαμβάνει δύο παραμέτρους: τον αριθμό του στοιχείου της λίστας που επιλέχθηκε και την αρχική (πρώτη) τιμή. Στη συνέχεια, η ανατροφοδότηση επιστρέφει την字符串 που θέλετε να χρησιμοποιήσετε ως νέα τιμή.

Το παρακάτω παράδειγμα δείχνει τη χρήση της μεθόδου attr() με ανατροφοδότηση:

Παράδειγμα

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    επιστρέφει το origValue + "/jquery";
  });
});

Δοκιμάστε το شخصικά

Τεκμηρίωση jQuery HTML

Για πλήρη περιγραφή των μεθόδων HTML του jQuery, επισκεφθείτε την παρακάτω τεκμηρίωση: