Heim > Artikel > Web-Frontend > So ändern Sie das IMG-Bild mit JQuery

So ändern Sie das IMG-Bild mit JQuery

PHPzOriginal: 2023-04-26 14:22:241607Durchsuche

jQuery ist eine JavaScript-Bibliothek, die häufig in der Front-End-Entwicklung verwendet wird. Sie bietet eine umfangreiche API, mit der HTML-Elemente problemlos bedient werden können. Bei der Frontend-Entwicklung ist es häufig erforderlich, Bilder auf Webseiten zu ändern. In diesem Artikel wird erläutert, wie Sie mit jQuery das src-Attribut des -Elements ändern, um das Bild zu ersetzen.

1. Verwenden Sie die Methode .attr(), um das Attribut „image src“ zu ändern.

jQuery stellt die Methode .attr() bereit, um den Attributwert des HTML-Elements abzurufen oder festzulegen. Diese Methode kann das src-Attribut des -Elements ändern. Das Folgende ist ein einfacher Beispielcode:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery修改图片</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            //点击按钮时，修改图片的src属性
            $("#btn").click(function(){
                $("img").attr("src","new_image.jpg");
            });
        });
    </script>
</head>
<body>
    <img src="old_image.jpg">
    <button id="btn">替换图片</button>
</body>
</html>

Im obigen Code wird das src-Attribut des Bildes durch Klicken auf die Schaltfläche geändert. Bei Verwendung der Methode .attr() ist der erste Parameter der zu ändernde Attributname und der zweite Parameter der festzulegende Attributwert. Nachdem Sie den Code ausgeführt haben, klicken Sie auf die Schaltfläche, um das Bild durch ein neues Bild mit dem Namen „new_image.jpg“ zu ersetzen. Beachten Sie, dass Sie sicherstellen müssen, dass die neue Bilddatei vorhanden ist und sich im selben Verzeichnis wie die alte Bilddatei befindet.

2. Verwenden Sie die Methode .prop(), um das src-Attribut des Bildes zu ändern.

Zusätzlich zur Verwendung der Methode .attr() können Sie auch die Methode .prop() verwenden, um das Attribut src des Bildes zu ändern . Die Methode .prop() wird verwendet, um den Wert eines Attributs abzurufen oder festzulegen. Gleichzeitig kann sie auch zum Ändern der inhärenten Attribute von HTML-Elementen verwendet werden, z. B. .disabled- und .checked-Attribute. Hier ist ein Beispiel für die Verwendung der Methode .prop() zum Implementieren der Bildersetzung:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery修改图片</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            //点击按钮时，修改图片的src属性
            $("#btn").click(function(){
                $("img").prop("src","new_image.jpg");
            });
        });
    </script>
</head>
<body>
    <img src="old_image.jpg">
    <button id="btn">替换图片</button>
</body>
</html>

Der obige Code ist im Wesentlichen derselbe wie das Beispiel mit der Methode .attr(). Der einzige Unterschied besteht darin, dass Sie die Methode .prop() verwenden, um das src-Attribut des Bildes zu ändern. Ebenso wird durch Klicken auf die Schaltfläche das Bild durch ein neues Bild mit dem Namen „new_image.jpg“ ersetzt.

Zusammenfassung

In diesem Artikel werden zwei Methoden zum Ersetzen von Bildern durch Ändern des src-Attributs des -Elements vorgestellt. Diese Funktion kann sowohl mit der Methode .attr() als auch mit der Methode .prop() erreicht werden. Unabhängig davon, welche Methode Sie wählen, müssen Sie zuerst den Selektor verwenden, um das Bildelement auszuwählen, das geändert werden muss, und dann die entsprechende Methode verwenden, um dessen src-Attribut zu ändern. Beachten Sie, dass sich das ersetzte neue Bild im selben Verzeichnis befinden muss, sonst wird es nicht angezeigt.

Das obige ist der detaillierte Inhalt vonSo ändern Sie das IMG-Bild mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So fordern Sie Daten domänenübergreifend mit dem JQuery-Frontend anNächster Artikel：So fordern Sie Daten domänenübergreifend mit dem JQuery-Frontend an

In Verbindung stehende Artikel

Mehr sehen