本文介绍利用jQuery选择器绑定按钮点击事件并修改页面元素内容的方法。通过为不同按钮分别绑定click事件,实现显示、隐藏及动态更新指定Div标签内HTML文本的功能,提供完整的HTML与JavaScript代码示例供参考。
jQuery绑定事件与修改内容示例
本文通过具体实例展示如何利用jQuery的选择器功能来绑定用户交互事件,并演示如何动态修改页面元素的内容。该方法简单实用,适合初学者参考学习。
具体实现代码示例如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World jQuery!</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<div id="divMsg">Hello World!</div>
<input id="btnShow" type="button" value="显示" />
<input id="btnHide" type="button" value="隐藏" /><br />
<input id="btnChange" type="button" value="修改内容为Hello World,jb51!" />
<script type="text/javascript" >
$("#btnShow").bind("click", function(event) { $("#divMsg").show();});
$("#btnHide").bind("click", function(event) { $("#divMsg").hide();});
$("#btnChange").bind("click", function(event){ $("#divMsg").html("Hello World, jb51!"); });
</script>
</body>
</html>
如需了解更多关于jQuery选择器的用法,建议查阅本站专题《jquery选择器用法总结》。
希望上述代码示例能对您的jQuery编程实践提供有效帮助。