jQuery 获取内容

jQuery - 获取内容和属性

jQuery 简化了访问存储在 HTML 元素中的信息，例如它们的文本内容、内部 HTML 结构、表单字段值和属性值。

理解 DOM 操作

操作文档对象模型 (DOM) 是 jQuery 的核心优势。DOM 是浏览器内部表示 HTML 页面的方式，它以树形结构组织。

| | 什么是 DOM？ DOM 代表文档对象模型 (Document Object Model)。它是 HTML 和 XML 文档的编程接口。它将页面结构表示为一个对象树，允许程序（如 JavaScript 和 jQuery）动态访问和更新文档的内容、结构和样式。 | | --- | --- |

jQuery 提供了简洁的方法来导航这个树结构并与其中的元素交互，包括检索数据。

获取内容：text()、html() 和 val()

用于检索内容的三个基本方法是：

• text(): 返回所有匹配元素的组合文本内容，不包含任何 HTML 标签。可以将其视为获取 ‘可见’ 文本。
• html(): 返回第一个匹配元素的HTML 内容 (innerHTML)，包含任何 HTML 标签。
• val(): 返回第一个匹配元素的当前值，通常用于表单元素，如 <input>、<textarea> 和 <select>。

示例：获取文本和 HTML 内容

// HTML 代码： <div id='contentDiv'><p>This is a **paragraph**.</p></div>

$(() => {
  $('#getTextButton').on('click', () => {
    // 获取: "This is a paragraph."
    const textContent = $('#contentDiv').text();
    alert('Text Content: ' + textContent);
  });

  $('#getHtmlButton').on('click', () => {
    // 获取: "<p>This is a **paragraph**.</p>"
    const htmlContent = $('#contentDiv').html();
    alert('HTML Content: ' + htmlContent);
  });
});

示例：获取输入字段的值

// HTML 代码： <input type="text" id="nameInput" value="Default Name">

$(() => {
  $('#getValueButton').on('click', () => {
    // 获取输入字段中当前输入的文本
    const inputValue = $('#nameInput').val();
    alert('Input Value: ' + inputValue);
  });
});

获取属性：attr() 和 prop()

jQuery 提供了方法来读取元素属性（如 href、src、id、class）和属性值（如 checked、disabled、selectedIndex）。

attr(): 用于获取 HTML 属性的值。它检索的是在 HTML 中定义的值。

示例：获取链接的 href 属性

// HTML 代码： <a id="myLink" href="https://jquery.com" target="_blank">jQuery Website</a>

$(() => {
  $('#getHrefButton').on('click', () => {
    const linkUrl = $('#myLink').attr('href');
    alert('Link Href: ' + linkUrl); // 显示: https://jquery.com

    const linkTarget = $('#myLink').attr('target');
    alert('Link Target: ' + linkTarget); // 显示: _blank
  });
});

prop(): 用于获取 DOM 属性的值。这对于布尔属性/属性尤其重要，例如 checked、selected 或 disabled。prop() 反映元素的当前状态。

示例：检查复选框是否被选中

// HTML 代码： <input type="checkbox" id="agreeCheckbox" checked> Agree to terms

$(() => {
  $('#getCheckedStateButton').on('click', () => {
    // 对于布尔状态使用 prop()
    const isChecked = $('#agreeCheckbox').prop('checked');
    alert('Is checkbox checked? ' + isChecked); // 显示: true (如果未选中则为 false)

    // 在不同浏览器/版本中，这里使用 attr('checked') 可能不可靠
    // const attrChecked = $('#agreeCheckbox').attr('checked');
    // console.log('Attribute checked:', attrChecked); // 可能显示 "checked" 或 undefined，不适合表示状态
  });
});

**关键区别：**对于 HTML 中定义的属性（如 id、class、href、src），使用 attr()。对于反映当前状态的属性，尤其是布尔属性（checked、disabled、selected、readOnly），使用 prop()。

下一章将介绍如何使用 text()、html()、val()、attr() 和 prop() 等方法来设置或更改内容和属性。

jQuery HTML/CSS 参考

要获得 DOM 操作和 CSS 交互所有 jQuery 方法的完整指南，请查阅官方 jQuery 文档。