在前端开发中，经常需要获取 HTML 元素的值来进行一些操作。而 jQuery 是一个流行的 JavaScript 库，可以简化 DOM 操作，使得获取元素的值变得更加方便。本文将介绍如何使用 jQuery 获得 HTML 元素的值，并提供示例代码。
选择器
在 jQuery 中，选择器是用于选取 HTML 元素的函数。通过选择器，可以获取到元素的值、属性和样式等信息。下面列举几个常见的选择器：
- ID 选择器：以 "#" 开头，选取指定 id 属性的元素；
- 类选择器：以 "." 开头，选取指定 class 属性的元素；
- 元素选择器：选取指定元素名称的所有元素；
- 属性选择器：选取带有指定属性的元素。
在获取元素的值之前，需要先确定选择器的类型和作用范围。
获取元素的值
使用 jQuery 获取元素的值主要有两种方式：.val() 和 .text()。
.val()
.val() 方法用于获取表单元素（如 input、select 和 textarea）的值。它也适用于包含 value 属性的其他元素，例如 button 和 option。以下是 .val() 方法的语法：
-----------------
其中，selector 是用于选取元素的选择器。例如，要获取 id 为 "username" 的 input 元素的值，可以使用以下代码：
--- -------- - ---------------------
需要注意的是，如果要获取多选框或复选框中选中的项的值，应该使用 .map() 方法或 :checked 选择器。例如，要获取 name 为 "hobby" 的多选框中选中的所有值，可以使用以下代码：
--- ------- - ------------------------------------------------
------ --------------
---------.text()
.text() 方法用于获取元素内部文本的值。它会将元素内包含的所有文本（包括子元素的文本）都作为一个字符串返回。以下是 .text() 方法的语法：
------------------
例如，要获取 id 为 "message" 的 div 元素中的文本内容，可以使用以下代码：
--- ------- - ---------------------
需要注意的是，.text() 方法只能获取文本内容，无法获取元素的属性值和样式。
示例代码
下面是一些示例代码，演示如何使用 jQuery 获取元素的值：
---- ---- -- --- ------ ----------- ------------- ----------- ----- ---- ------------------- ------------ ------ --------------- ------------ --------------------------- ------ --------------- ------------ --------------------------- ------ --------------- ------------ -------------- ------------------ ------- ---------------------------
-- -- ----- ----
--- -------- - ---------------------
---------------------- -- -- ----- ----
-- -- --- -------
--- ------- - ---------------------
--------------------- -- -- ------- -------
-- ----------
--- ------- - ------------------------------------------------
------ --------------
---------
--------------------- -- -- ----------总结
本文介绍了如何使用 jQuery 获取 HTML 元素的值，包括 .val() 方法和 .text() 方法。需要根据具体需求选择合适的方法，并注意选择器的作用范围和元素类型。jQuery 的选择器简单易用，可以大大提高开发效率，希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10403