jquery replace image src

With the development of the Internet, dynamic web pages have become more and more common, and the application of pictures in web pages has become more and more extensive. However, in the process of making web pages, sometimes it is necessary to dynamically change pictures. In this case, jQuery can be used to achieve this.

jQuery is a JavaScript library that allows developers to use simpler syntax to manipulate elements in HTML documents and web pages. There are many methods for image manipulation in jQuery, one of the more common ones is to replace the source address (src) of the image. This operation can dynamically replace the image through JavaScript after the web page is loaded.

Let’s introduce how jQuery replaces the src attribute of an image.

First, we need to introduce the jQuery library into the web page, which can be achieved through the following code:

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

After introducing the jQuery library, we can use the jQuery selector to select image elements. For example, we can select the image element by its ID or class, as shown below:

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

After selecting the image element, we can get or set the src attribute of the image through jQuery's attr() method. For example, we can get the src attribute of the image through the following code:

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

We can also set the src attribute of the image through the following code:

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

In addition to directly setting the src attribute of the image, We can also use jQuery's ajax() method to dynamically obtain image resources through the background server. For example, we can achieve this through the following code:

$.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('获取图片资源失败！'); // 处理失败情况
  }
});

In the above code, we send a request to the server through the ajax() method to obtain the image resource corresponding to the id. If the acquisition is successful, the src attribute of the image is set to the image URL returned by the background. If the acquisition fails, a prompt box will pop up.

In short, by using jQuery, we can easily replace the src attribute of the image. Whether it is static replacement or dynamic replacement, it can be easily done. I believe that jQuery will bring us more convenience in the future and make web design simpler and more efficient.

The above is the detailed content of jquery replace image src. For more information, please follow other related articles on the PHP Chinese website!