jQuery 是一个快速、小巧且功能丰富的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。对于页面文字的操作,jQuery 提供了简洁的 API 来实现文本的获取、设置和修改。
.text()
方法可以获取匹配元素的文本内容。.text()
方法也可以设置匹配元素的文本内容。.html()
方法可以获取或设置匹配元素的 HTML 内容。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 文字操作示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="title">欢迎来到我的网站</h1>
<button id="changeText">点击修改标题</button>
<script>
$(document).ready(function() {
$('#changeText').click(function() {
// 获取当前标题文本
var currentText = $('#title').text();
console.log('当前标题:', currentText);
// 设置新的标题文本
$('#title').text('你好,世界!');
});
});
</script>
</body>
</html>
问题:为什么使用 jQuery 设置文本后,页面没有立即更新?
原因:这可能是由于 jQuery 的 DOM 更新是异步的,或者代码执行顺序的问题。
解决方法:
<script>
标签是否正确引入了 jQuery 库。$(document).ready()
或 $(function() {})
确保在 DOM 完全加载后再执行 jQuery 代码。$(document).ready(function() {
$('#changeText').click(function() {
$('#title').text('你好,世界!');
});
});
通过以上方法,可以确保 jQuery 能够正确地操作页面文字,并实现预期的效果。