How to modify img image with jquery-Front-end Q&A-php.cn

How to modify img image with jquery

PHPz

Release： 2023-04-26 15:45:11

Original

1677 people have browsed it

jQuery is a JavaScript library widely used in front-end development. It provides a rich API that can easily operate HTML elements. In front-end development, it is often necessary to modify images on web pages. This article will introduce how to use jQuery to modify the src attribute of the element to replace the image.

1. Use the .attr() method to modify the image src attribute

jQuery provides the .attr() method to get or set the attribute value of the HTML element. This method can modify the src attribute of the element. The following is a simple sample code:

<!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>

Copy after login

In the above code, the src attribute of the image is modified by clicking the button. When using the .attr() method, the first parameter is the attribute name to be modified, and the second parameter is the attribute value to be set. After running the code, click the button to replace the image with a new image named "new_image.jpg". Note that you need to ensure that the new image file exists and is in the same directory as the old image file.

2. Use the .prop() method to modify the src attribute of the image

In addition to using the .attr() method, you can also use the .prop() method to modify the src attribute of the image. The .prop() method is used to get or set the value of an attribute. At the same time, it can also be used to modify the inherent attributes of HTML elements, such as .disabled and .checked attributes. The following is an example of using the .prop() method to implement image replacement:

<!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>

Copy after login

The above code is basically the same as the example using the .attr() method. The only difference is that you use the .prop() method to modify the src attribute of the image. Likewise, clicking the button replaces the image with a new image named "new_image.jpg".

Summary

This article introduces two methods of replacing images by modifying the src attribute of the element through jQuery. This function can be achieved using both the .attr() method and the .prop() method. No matter which method you choose, you first need to use the selector to select the image element that needs to be modified, and then use the corresponding method to modify its src attribute. It is worth noting that the replaced new image must be in the same directory, otherwise it will not be displayed.

The above is the detailed content of How to modify img image with jquery. For more information, please follow other related articles on the PHP Chinese website!