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.

How to use jquery to change text on click

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!");
	});
});

How to use jquery to change text on click

$(document).ready(function() {
	$("button").click(function() {
		$("p").html("Hello!");
	});
});

How to use jquery to change text on click

##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>");
	});
});

How to use jquery to change text on click

[Recommended learning:

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn