当你构建一个网页或者应用程序时,经常需要使用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>