在网页开发中，我们经常需要实现用户交互功能，比如点击按钮来改变页面上的某些内容。jQuery是一个非常流行的JavaScript库，它可以帮助我们简化DOM操作，使得编写交互式网页变得更加容易。下面，我将详细讲解如何使用jQuery来实现在点击按钮时修改文本框内容的技巧。
准备工作
在开始之前，请确保你的项目中已经引入了jQuery库。你可以从jQuery官网下载最新版本的jQuery库，或者使用CDN链接来引入。
HTML结构
首先，我们需要一个按钮和一个文本框。按钮用于触发修改文本框内容的操作，而文本框则是我们要修改的内容所在。
CSS样式（可选）
为了使按钮和文本框更加美观，我们可以添加一些CSS样式。
#changeTextBtn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#textInput {
margin-top: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
jQuery脚本
接下来，我们需要编写jQuery脚本来实现点击按钮修改文本框内容的逻辑。
$(document).ready(function() {
$(‘#changeTextBtn’).click(function() {
// 获取文本框的当前值
var currentText = $(‘#textInput’).val();
// 修改文本框内容
$(‘#textInput’).val(currentText + ‘ – 文本已修改’);
});
});
在上面的脚本中，我们首先使用
$(document).ready()
函数确保DOM元素加载完成后再执行脚本。然后，我们为按钮添加了一个点击事件监听器。当按钮被点击时，我们首先获取文本框的当前值，然后将其与一个新字符串连接起来，并设置回文本框中。
测试
现在，你可以将HTML、CSS和jQuery代码放入一个HTML文件中，并在浏览器中打开它。点击按钮，你应该会看到文本框的内容被修改了。
总结
通过上面的教程，你学会了如何使用jQuery来实现点击按钮修改文本框内容的技巧。这个例子非常基础，但jQuery的强大之处在于它可以轻松扩展到更复杂的交互功能。希望这个教程能帮助你更好地掌握jQuery的使用。