How to use jquery to change text on click-Front-end Q&A-php.cn

How to use jquery to change text on click

青灯夜游

Release： 2022-06-07 17:15:07

Original

3193 people have browsed it

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>

Copy after login

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

Copy after login

How to use jquery to change text on click

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

Copy after login

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

Copy after login

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!