Home > Article > Web Front-end > How to use jquery to change text on click
How to use jquery to change text on click
- 青灯夜游Original
- 2022-05-13 18:13:193175browse
Implementation method: 1. Use the "$("button").click(function(){})" statement to bind the click event to the button element and set the event processing function; 2. In the processing function , set the "element object.text("new text")" or "object.html("new text")" statement to modify the text.
The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.
Use jquery to change text on click
1. Set the click event
Use click( )Bind a click event to the button element and set the event processing function
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
//点击事件发生后，执行的代码
});
});
</script>
</head>
<body>
<button>修改所有p元素的文本内容</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>2. In the event processing function, use text() or html() to modify the text content of the specified element
text() method sets or returns the text content of the selected element.
html() method sets or returns the content (innerHTML) of the selected element.
$(document).ready(function() {
$("button").click(function() {
$("p").text("Hello world!");
});
});
$(document).ready(function() {
$("button").click(function() {
$("p").html("Hello!");
});
});
##Description:
html() Get is all the content inside the element, while text() gets only the text content html() can set the content including tags, while text() can only set the text content (not including tags).$(document).ready(function() {
$("button").click(function() {
$("p").html("Hello <b>world!</b>");
});
});
jQuery video tutorial, web front-end video】
The above is the detailed content of How to use jquery to change text on click. For more information, please follow other related articles on the PHP Chinese website!