通过id给input框和div赋值，修改属性值。

懒鱼七忆

于 2023-11-09 00:30:00 发布

阅读量733

点赞数 3

文章标签： css jquery 前端

本文链接：https://blog.csdn.net/weixin_53607413/article/details/134288452

版权

当你构建一个网页或者应用程序时，经常需要使用JavaScript来动态地操作元素和改变其内容。在这个例子中，我们展示了如何使用jQuery库来实现元素的赋值和内容的改变。

首先，我们引入了jQuery库的文件，"jquery-1.9.1.min.js"。这样可以让我们使用jQuery的函数和方法。

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>

然后，我们定义了三个相关的元素，一个输入框和两个div元素，它们分别具有id属性"valfz"，"htmlfz"和"zrs"。这些元素将被用来展示和修改内容。并且写了两个按钮，赋值和人数来实现。

<body>
    <div class="form-group">
        <label class="col-lg-3 control-label">val赋值</label>
        <div class="col-lg-9">
            <input type="text" class="form-control text-y" id="valfz" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label">html赋值</label>
        <div class="col-lg-9" id="htmlfz"></div>
    </div>
    <div>
        <span>总人数：<span id="zrs">0</span></span>
    </div>
    <button type="button" id="fuzhi">赋值</button>
    <button type="button" id="renshu">人数</button>
</body>

页面效果：

在JavaScript的代码中，我们使用$(document).ready()函数来确保页面完全加载后再执行我们的代码。

我们缓存了三个元素的引用，这样我们就可以在代码中多次使用它们。

"赋值"按钮的点击事件处理程序中，我们调用了两个赋值函数fz()和fz2()。这些函数使用.val()方法和.html()方法来改变相应元素的值。

"人数"按钮的点击事件处理程序中，我们定义了一个变量total，并将其值设为100。然后使用.html()方法将total的值赋给$zrs元素。

通过这个例子，我们可以学习到如何使用jQuery来动态地改变元素的值和内容。这对于构建交互式的网页和应用程序非常有用。

完整代码：

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <div class="form-group">
        <label class="col-lg-3 control-label">val赋值</label>
        <div class="col-lg-9">
            <input type="text" class="form-control text-y" id="valfz" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-3 control-label">html赋值</label>
        <div class="col-lg-9" id="htmlfz"></div>
    </div>
    <div>
        <span>总人数：<span id="zrs">0</span></span>
    </div>
    <button type="button" id="fuzhi">赋值</button>
    <button type="button" id="renshu">人数</button>
</body>
    <script type="text/javascript">
        $(document).ready(function() {
            // 缓存元素引用
            var $valfz = $("#valfz");
            var $htmlfz = $("#htmlfz");
            var $zrs = $("#zrs");

            // 赋值按钮点击事件处理程序
            $("#fuzhi").on("click", function() {
                fz();
                fz2();
            });

            // 人数按钮点击事件处理程序
            $("#renshu").on("click", function() {
                renshuu();
            });

            // 赋值函数
            function fz() {
                $valfz.val("7777val");
            }

            // 赋值函数
            function fz2() {
                $htmlfz.html("66666html");
            }

            // 人数函数
            function renshuu() {
                var total = 100;
                $zrs.html(total);
            }
        });
    </script>
</html>

懒鱼七忆

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
通过id给input框和div赋值，修改属性值。

当你构建一个网页或者应用程序时，经常需要使用JavaScript来动态地操作元素和改变其内容。在这个例子中，我们展示了如何使用jQuery库来实现元素的赋值和内容的改变。首先，我们引入了jQuery库的文件，"jquery-1.9.1.min.js"。这样可以让我们使用jQuery的函数和方法。然后，我们定义了三个相关的元素，一个输入框和两个div元素，它们分别具有id属性"valfz"，"htmlfz"和"zrs"。这些元素将被用来展示和修改内容。并且写了两个按钮，赋值和人数来实现。
复制链接

扫一扫