淘先锋技术网

首页 1 2 3 4 5 6 7

jquery点击按钮input显示图片

jQuery是一种流行的JavaScript库，它可以帮助您轻松地操纵HTML元素及其属性，使Web开发更加简单。您可以使用jQuery来实现许多功能，例如当用户点击按钮时，显示图片。


//为按钮元素添加点击事件的监听器
$("button").click(function() {
  //获取图片的URL
  var imgUrl = $("input").val();
  //将图片元素的src属性设置为URL
  $("img").attr("src", imgUrl);
});

jquery点击按钮input显示图片

可以看到，上述代码使用了jQuery的选择器，并为按钮元素添加了点击事件的监听器。当用户点击按钮时，代码将获取输入框中输入的图片URL，并将其设置为图片元素的src属性。这样，点击按钮后，就可以显示用户想要的图片了。

下面是一段完整的HTML代码示例，您可以运行它来实际测试一下上述代码的效果：


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>点击按钮显示图片</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <input type="text" placeholder="输入图片URL">
    <br><br>
    <button>点击显示图片</button>
    <br><br>
    <img src="#" alt="这里将显示图片">
    <script>
      $("button").click(function() {
        var imgUrl = $("input").val();
        $("img").attr("src", imgUrl);
      });
    </script>
  </body>
</html>

通过以上代码示例，您可以更好地理解在jQuery中如何使用绑定事件，以及如何获取表单中的输入值等操作。