如何用jQuery改变按钮的文本
下面是使用jQuery改变按钮的文本的问题。为了完成这个任务,我们可以使用以下两种方法。
- prop()方法。它是用来设置属性值的,它为所选元素设置一个或多个属性。
语法:
$(selector).prop(para1, para2)
步骤:
* 从<input>
元素中获取文本。
* 在第1段的基础上采取第一种匹配元素。
* 将所选元素的设定值从para1改为para2。
示例:
<!DOCTYPE html>
<html>
<head>
<title>
Change the Text of a Button using jQuery
</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h3>Change the Text of a Button using jQuery</h3>
<p>
Click on button to change text
from "Click" to "Prop Click"
</p>
<input type="button" id="Geeks" value="Click">
<script>
(document).ready(function() {
("input").click(function() {
// Change text of input button
$("#Geeks").prop("value", "Prop Click");
});
});
</script>
</body>
</html>
输出:
在点击按钮之前:
点击按钮后:
2.html()方法。它设置或返回所选元素的内容(innerHTML)。
语法:
$(selector).html(content)
步骤:
* 从<button>
元素中获取文本。
* 它与选择器元素相匹配。
* 将所选元素的值设置改为内容。
示例:
<!DOCTYPE html>
<html>
<head>
<title>How to Change the Text of a
Button using jQuery?</title>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h3>How to Change the Text of a Button using jQuery?</h3>
<p>Click on button to change text
from "Click" to "Html Click"</p>
<button type="button" id="Geeks">Click</button>
<script>
(document).ready(function() {
("button").click(function() {
// Change text of button element
$("#Geeks").html("Html Click");
});
});
</script>
</body>
</html>
输出:
在点击按钮之前:
点击按钮后: