如何用jQuery改变按钮的文本

  • Post category:jquery

以下是详细的“如何用jQuery改变按钮的文本”的攻略:

准备工作

在使用jQuery修改按钮文本之前,我们需要头部引入jQuery库文件,确保页面正常加载jQuery。引入代码如下:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

改变按钮文本

  1. 使用.text()方法改变按钮文本

我们可以使用jQuery中的.text()方法来获取或者设置元素的文本内容,其中设置方法可以改变按钮的文本。

<button class="btn">点击我</button>

如上,我们有一个初始文本为“点击我”的按钮,我们可以使用以下代码修改按钮文本:

$(document).ready(function() {
  $('.btn').text('新文本');
});

上述代码中,我们首先使用.ready()方法确保页面初始加载完成之后再执行代码,而后使用jQuery选择器.select()方法选择.btn按钮元素,使用.text()方法将按钮文本修改为“新文本”。

  1. 使用.html()方法改变按钮文本

和.text()方法类似,我们也可以使用jQuery中的.html()方法来获取或者设置元素的HTML内容,其中设置方法可以改变按钮的文本。

<button class="btn">点击我</button>

如上,我们有一个初始文本为“点击我”的按钮,我们可以使用以下代码修改按钮文本:

$(document).ready(function() {
  $('.btn').html('新文本');
});

上述代码中,我们同样使用.ready()方法确保页面初始加载完成之后再执行代码,而后使用jQuery选择器.select()方法选择.btn按钮元素,使用.html()方法将按钮文本修改为“新文本”。

总结

以上就是使用jQuery改变按钮文本的攻略,通过.text()方法和.html()方法可以很容易的实现按钮文本的修改。