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

简介: 通过id给input框和div赋值,修改属性值。

   当你构建一个网页或者应用程序时,经常需要使用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>
相关文章
|
JavaScript
js通过input框输入属性和值,改变div的属性
js通过input框输入属性和值,改变div的属性
118 0
|
2月前
Input元素的其他属性
Input元素的其他属性。
31 3
|
1月前
|
数据安全/隐私保护
Input元素的type属性
【10月更文挑战第4天】Input元素的type属性。
31 6
|
2月前
<select>标记和<option>标签的常用属性
<select>标记和<option>标签的常用属性
37 2
|
3月前
|
JavaScript 前端开发
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
这篇文章介绍了在Vue框架中使用Element UI组件库时,如何通过v-if指令和v-model绑定来控制`el-form-item`的显示与隐藏,以及如何通过设置`readonly`属性让输入框变为只读状态。
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
|
4月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
707 1
|
5月前
jq获取多个相同name名的input框的value值
jq获取多个相同name名的input框的value值
45 0
|
11月前
|
前端开发
input去掉输入框type为number时的上下箭头的实现方法
input去掉输入框type为number时的上下箭头的实现方法
83 0
|
前端开发 C#
C# 动态赋值CheckBox
C# 动态赋值CheckBox
162 0
C# 动态赋值CheckBox
动态添加input,然后获取所有的input框中的值
动态添加input,然后获取所有的input框中的值