核心方法

jQuery 提供了两种主要的方法来获取和设置网页标题：

jquery 获取网页标题
（图片来源网络，侵删）
  1. document.title (最常用、最直接)
  2. $(document).prop('title')

下面我将详细解释这两种方法,并提供代码示例。

直接使用 document.title (推荐)

这是最直接、最高效的方法。document.title 是 JavaScript 原生 API，可以直接获取或设置当前文档的标题，在 jQuery 项目中使用它完全没有问题。

// 获取网页标题并存储到变量中
var pageTitle = document.title;
// 在控制台打印出来查看
console.log(pageTitle);
// 如果网页标题是 "我的网站首页"，控制台会输出：
// 我的主页
// 设置网页标题
document.title = "新标题 - 我修改了页面标题！";
// 再次获取并打印，验证是否修改成功
console.log(document.title); // 输出: 新标题 - 我修改了页面标题！

使用 $(document).prop('title')

这是更符合 jQuery 风格的方法，它通过 jQuery 选择器选中整个文档对象 (document)，然后使用 .prop() 方法来获取其 title 属性。

// 使用 jQuery 选择器和 prop() 方法获取标题
var pageTitle = $(document).prop('title');
// 在控制台打印出来查看
console.log(pageTitle);
// 使用 prop() 方法设置标题
$(document).prop('title', '新标题 - jQuery 修改的！');
// 验证修改
console.log($(document).prop('title'));

两种方法的对比

特性 document.title $(document).prop('title')
简洁性 非常简洁，直接访问原生属性 稍长，需要调用 jQuery 对象和方法
性能 性能最好，是原生操作，无需 jQuery 包装 性能略低，因为需要创建 jQuery 对象并调用方法
一致性 直接操作 DOM，行为一致 符合 jQuery 的统一 API 风格，可以与其他属性操作（如 .prop('href')）保持一致
依赖 不依赖 jQuery 库 必须先加载 jQuery 库
  • 如果你只需要快速获取或设置标题，并且不介意直接使用原生 JavaScript，强烈推荐 document.title。 它最快、最简单。
  • 如果你的项目已经大量使用了 jQuery，并且希望代码风格统一，$(document).prop('title') 是一个不错的选择。

完整的 HTML 示例

下面是一个完整的 HTML 文件，你可以直接复制到本地 .html 文件中，然后在浏览器中打开，通过开发者工具的“控制台”（Console）来测试。

jquery 获取网页标题
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>原始网页标题</title>
</head>
<body>
    <h1>jQuery 获取网页标题示例</h1>
    <p>打开浏览器的开发者工具（按 F12），切换到 "Console" 标签页，查看下面的输出。</p>
    <script>
        $(document).ready(function() {
            // --- 获取标题 ---
            // 方法1：使用 document.title (推荐)
            var title1 = document.title;
            console.log("方法1 (document.title) 获取的标题是: " + title1);
            // 方法2：使用 $(document).prop('title')
            var title2 = $(document).prop('title');
            console.log("方法2 ($(document).prop('title')) 获取的标题是: " + title2);
            // --- 设置标题 ---
            // 3秒后，用方法1修改标题
            setTimeout(function() {
                document.title = "标题已被 document.title 修改！";
                console.log("3秒后，标题已被修改为: " + document.title);
            }, 3000);
            // 6秒后，用方法2修改标题
            setTimeout(function() {
                $(document).prop('title', '标题已被 jQuery prop() 修改！');
                console.log("6秒后，标题已被修改为: " + $(document).prop('title'));
            }, 6000);
        });
    </script>
</body>
</html>

如何运行这个示例：

  1. 将上述代码保存为一个 .html 文件（test.html）。
  2. 用 Chrome、Firefox 或 Edge 等现代浏览器打开这个文件。
  3. 按 F12 键打开开发者工具。
  4. 点击 "Console" 标签页。
  5. 你会看到控制台依次输出标题信息，并且在 3 秒和 6 秒后,浏览器标签页的标题会随之改变。
jquery 获取网页标题
（图片来源网络，侵删）