18-attr和prop方法的练习

最新推荐文章于 2025-10-29 13:38:43 发布

原创最新推荐文章于 2025-10-29 13:38:43 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，通过jQuery的attr方法实现输入框中URL的动态更改并即时更新页面上图片的src属性，展示了基本的DOM操作和事件监听技巧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-attr和prop方法的练习</title>
    <script type="text/javascript" src ="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //1.给按钮添加点击事件
          var btn = document.getElementsByTagName("button")[0];
          btn.onclick = function () {
            var input = document.getElementsByTagName("input")[0];
            //2.获取输入框的内容
            var text = input.value;
            //3.修改img 的src属性节点的值
            $("img").attr("src",text);
            //$("img").prop("src",text);
          }
          });
    </script>
</head>
<body>
<input type="text">
<button>切换图片</button>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</body>
</html>