Μέθοδος attr

Η μέθοδος attr επιτρέπει τη λήψη και αλλαγή οποιουδήποτε χαρακτηριστικού ενός στοιχείου.

Είναι σημαντικό να μην συγχέουμε τις ιδιότητες και τα χαρακτηριστικά των στοιχείων. Κατά τη δημιουργία του DOM δέντρου, τα χαρακτηριστικά μετατρέπονται στις αντίστοιχες DOM ιδιότητες των στοιχείων. Τα ονόματά τους δεν ταιριάζουν πάντα, όπως και οι τιμές τους. Ορισμένες ιδιότητες μπορεί επίσης να μην έχουν αντίστοιχα χαρακτηριστικά, μπορούν να ληφθούν και να οριστούν μόνο όταν χρησιμοποιείται η μέθοδος prop, για παράδειγμα η ιδιότητα tagName.

Σύνταξη

Λήψη τιμής χαρακτηριστικού:

$(επιλογέας).attr(όνομα χαρακτηριστικού);

Αλλαγή τιμής χαρακτηριστικού:

$(επιλογέας).attr(όνομα χαρακτηριστικού, νέα τιμή);

Αλλαγή τιμών πολλαπλών χαρακτηριστικών:

$(επιλογέας).attr({πρώτο_χαρακτηριστικό: νέα_τιμή, δεύτερο_χαρακτηριστικό: νέα_τιμή, ...});

Εφαρμογή συνάρτησης σε κάθε στοιχείο στο σύνολο:

$(επιλογέας).attr(όνομα χαρακτηριστικού, function(αριθμός στο σύνολο, τρέχουσα τιμή χαρακτηριστικού));

Παράδειγμα

Στο επόμενο παράδειγμα θα πάρουμε ένα input από το id του και θα εμφανίσουμε στην οθόνη την τιμή του χαρακτηριστικού value:

<input type="text" value="!!!" id="test">

let value = $('#test').attr('value');
console.log(value);

Παράδειγμα

Και τώρα ας γράψουμε μια νέα τιμή 'www' στο ίδιο χαρακτηριστικό:

<input type="text" value="!!!" id="test"> $('#test').attr('value', 'www');

Ο κώδικας HTML θα γίνει έτσι:

<input type="text" value="www" id="test">

Παράδειγμα

Ας αλλάξουμε ταυτόχρονα τα χαρακτηριστικά type και value:

<input type="text" value="!!!" id="test"> $('#test').attr({value: 'www', type: 'password'});

Ο κώδικας HTML θα γίνει έτσι:

<input type="password" value="www" id="test">

Παράδειγμα

Ας αλλάξουμε το χαρακτηριστικό value σε κάθε input - προσθέτοντας στο τρέχον value τον τακτικό αριθμό του στοιχείου στο σύνολο:

<input type="text" value="aaa">
<input type="text" value="bbb">
<input type="text" value="ccc">

$('input').attr('value', function(index, value) {
	return value + ' ' + index;
});

Ο κώδικας HTML θα γίνει έτσι:

<input type="text" value="aaa 1">
<input type="text" value="bbb 2">
<input type="text" value="ccc 3">

Δείτε επίσης

η μέθοδος removeAttr,
που επιτρέπει τη διαγραφή χαρακτηριστικών των στοιχείων
η μέθοδος prop,
που επιτρέπει την εργασία με ιδιότητες στοιχείων
η μέθοδος val,
που επιτρέπει τη λήψη και αλλαγή της τρέχουσας τιμής ενός στοιχείου