jquery 修改button的文字|极客教程

jquery 修改button的文字

在网页开发中，经常会遇到需要修改按钮上的文字内容的情况。使用jQuery可以方便地实现这一功能。本文将介绍如何使用jQuery来修改按钮的文字内容。

方法一：使用text()方法

jQuery提供了text()方法来设置或返回元素的文本内容。我们可以通过选取按钮元素，然后调用text()方法来修改按钮的文字内容。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Button Text</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="myButton">Click Me</button>

<script>
(document).ready(function(){("#myButton").text("New Text");
});
</script>

</body>
</html>

在上面的代码中，我们创建了一个按钮元素并指定了一个id为”myButton”。在jQuery的ready函数中，我们选取id为”myButton”的元素，并调用text()方法将按钮的文字内容修改为”New Text”。

运行以上代码，打开浏览器，可以看到按钮的文字内容已经被修改为”New Text”。

方法二：使用html()方法

除了text()方法，jQuery还提供了html()方法，可以设置或返回元素的HTML内容。虽然按钮元素通常不包含HTML内容，但我们也可以通过html()方法来修改按钮的文字内容。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Button Text</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="myButton">Click Me</button>

<script>
(document).ready(function(){("#myButton").html("New <strong>Text</strong>");
});
</script>

</body>
</html>

在上面的代码中，我们使用html()方法将按钮的文字内容修改为”New Text“。这里的”Text“将以加粗方式显示。

运行以上代码，打开浏览器，可以看到按钮的文字内容已经被修改为”New Text”，并且”Text”是以加粗方式显示的。

方法三：使用.attr()方法

除了直接设置元素的文本或HTML内容之外，我们还可以使用attr()方法来修改元素的属性。在按钮元素中，有一个名为”value”的属性，可以用来设置按钮的文字内容。我们可以通过attr()方法来修改按钮的”value”属性，从而修改按钮的文字内容。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Button Text</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<button id="myButton">Click Me</button>

<script>
(document).ready(function(){("#myButton").attr("value", "New Text");
});
</script>

</body>
</html>