通过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>
相关文章
|
3月前
a标签target属性的取值和作用?
a标签target属性的取值和作用?
24 0
|
5月前
|
JavaScript
js通过input框输入属性和值,改变div的属性
js通过input框输入属性和值,改变div的属性
75 0
|
3月前
|
Web App开发 前端开发 iOS开发
input中typedate的属性都有那些
input中typedate的属性都有那些
|
3月前
|
JavaScript 前端开发 开发者
div 元素的 tab-index 属性被设置为 -1,意味着什么
div 元素的 tab-index 属性被设置为 -1,意味着什么
24 0
|
4月前
|
前端开发
input去掉输入框type为number时的上下箭头的实现方法
input去掉输入框type为number时的上下箭头的实现方法
41 0
|
5月前
Element-UI中el-input输入值不显示
Element-UI中el-input输入值不显示
149 0
element中el-cascader级联获取name和id值(整理)
element中el-cascader级联获取name和id值(整理)
|
9月前
|
JavaScript 前端开发 数据安全/隐私保护
input的23种属性
input的23种属性
动态添加input,然后获取所有的input框中的值
动态添加input,然后获取所有的input框中的值
|
Web App开发 JavaScript 数据安全/隐私保护
ie8下修改input的type属性报错
ie8下修改input的type属性报错