Προτεινόμενη Σειρά Μαθημάτων:

jQuery αποκτήστε περιεχόμενο και ιδιότητες

Το jQuery διαθέτει ισχυρές μεθόδους για τη λειτουργία στοιχείων HTML και ιδιοτήτων.

jQuery λειτουργία DOM

Μια πολύ σημαντική πτυχή του jQuery είναι η ικανότητά του να λειτουργεί στο DOM.

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

DOM = Document Object Model (Document Object Model)

“Το W3C Document Object Model (DOM) ανεξάρτητο από πλατφόρμα και γλώσσα, επιτρέπει τις προγράμματα και τις σενάρια να έχουν δυνατότητα δυναμικής πρόσβασης και αναθεώρησης του περιεχομένου, της δομής και του στυλ του έγγραφου.”

Αποκτήστε περιεχόμενο - text(), html() και val()

Τρεις απλές και χρήσιμες μεθόδους jQuery για τη λειτουργία DOM:

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

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

Παράδειγμα

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

Δοκιμάστε το αμέσως

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

Παράδειγμα

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

Δοκιμάστε το αμέσως

Αποκτήστε ιδιότητα - attr()

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

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

Παράδειγμα

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

Δοκιμάστε το αμέσως

Το επόμενο κεφάλαιο θα εξηγήσει πώς να ρυθμίσετε (更改) το περιεχόμενο και τις τιμές των ιδιοτήτων.

jQuery HTML Οδηγός Αναφοράς

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