jquery remplacer l'image src

Avec le développement d'Internet, les pages Web dynamiques sont devenues de plus en plus courantes et l'application d'images dans les pages Web est devenue de plus en plus étendue. Cependant, lors du processus de création de pages Web, il est parfois nécessaire de modifier dynamiquement les images. Dans ce cas, jQuery peut être utilisé pour y parvenir.

jQuery est une bibliothèque JavaScript qui permet aux développeurs d'utiliser une syntaxe plus simple pour manipuler des éléments dans des documents HTML et des pages Web. Il existe de nombreuses méthodes de manipulation d'images dans jQuery, l'une des plus courantes consiste à remplacer l'adresse source (src) de l'image. Cette opération peut remplacer dynamiquement l'image via JavaScript après le chargement de la page Web.

Voyons maintenant comment jQuery remplace l'attribut src d'une image.

Tout d'abord, nous devons introduire la bibliothèque jQuery dans la page Web, ce qui peut être réalisé grâce au code suivant :

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

Après avoir introduit la bibliothèque jQuery, nous pouvons utiliser le sélecteur jQuery pour sélectionner les éléments de l'image. Par exemple, nous pouvons sélectionner l'élément image par son ID ou sa classe, comme indiqué ci-dessous :

var img = $('#img1'); // 通过ID选取图片元素
var imgs = $('img'); // 选取所有的图片元素

Après avoir sélectionné l'élément image, nous pouvons obtenir ou définir l'attribut src de l'image via la méthode attr() de jQuery. Par exemple, nous pouvons obtenir l'attribut src de l'image via le code suivant :

var src = img.attr('src'); // 获取图片的src属性

Nous pouvons également définir l'attribut src de l'image via le code suivant :

img.attr('src', 'new.jpg'); // 将图片的src属性设置为new.jpg

En plus de définir directement l'attribut src de l'image, nous pouvons également utiliser la méthode ajax() de jQuery pour obtenir dynamiquement des ressources d'image via le serveur backend. Par exemple, nous pouvons y parvenir grâce au code suivant :

$.ajax({
  url: 'image.php?id=1',
  type: 'GET',
  dataType: 'json',
  success: function(data){
    if(data.success){
      img.attr('src', data.url); // 将图片的src属性设置为后台返回的图片url
    }else{
      alert('获取图片资源失败！'); // 处理失败情况
    }
  },
  error: function(){
    alert('获取图片资源失败！'); // 处理失败情况
  }
});

Dans le code ci-dessus, nous envoyons une requête au serveur via la méthode ajax() pour obtenir la ressource image correspondant à l'identifiant. Si l'acquisition réussit, l'attribut src de l'image est défini sur l'URL de l'image renvoyée par l'arrière-plan. Si l'acquisition échoue, une boîte de dialogue apparaîtra.

En bref, en utilisant jQuery, on peut facilement remplacer l'attribut src de l'image. Qu’il s’agisse d’un remplacement statique ou d’un remplacement dynamique, cela peut être facilement réalisé. Je pense que jQuery nous apportera plus de commodité à l'avenir et rendra la conception Web plus simple et plus efficace.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!