Implementation method: 1. Use click() to bind the click event to the button element and set the processing function. The syntax is "button element.click(function(){});"; 2. In the processing function , use attr() to modify the image address, the syntax is "$("img").attr("src","new image address")".
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
jquery method to implement click-to-change pictures:
Implementation ideas:
Use click() to bind the click event to the button element and set the event processing function
In the processing function, use attr() to modify the image address (i.e. modify the img element src Attribute value)
Implementation code:Click the button to change the picture
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("img").attr("src","img/1.jpg");
});
});
</script>
</head>
<body>
<img src="img/3.jpg" style="max-width:90%" / alt="How to change pictures by clicking in jquery" ><br><br>
<button>点击按钮，更换图片</button>
</body>
</html>
##Description:
Tag defines an image in an HTML page.
jQuery video tutorial, web front-end video]
The above is the detailed content of How to change pictures by clicking in jquery. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
