【JQuery】.val()方法和.html()方法的区别探究，延伸HTML中元素（Elements）和表单元素（Form Elements）的区别

一、HTML中元素（Elements）和表单元素（Form Elements）的区别

1.HTML元素（Elements）

HTML元素是HTML文档的基本构建块。每个HTML元素都通过开始标签和结束标签来定义（某些元素是空的，即它们不包含任何内容，因此不需要结束标签，如<img />或<br />）。元素可以包含属性，这些属性提供了有关HTML元素的额外信息。
例如，<p>元素用于定义段落，<h1>到<h6>元素用于定义标题，<a>元素用于定义超链接，<div>和<span>元素则用于布局和样式化内容等。

2.表单元素（Form Elements）

表单元素是HTML元素的一个子集，专门用于在网页上创建表单（Forms），以便用户输入数据。表单元素允许用户输入文本、选择选项、提交数据等。表单元素通常包含在一个<form>元素内部，<form>元素定义了数据如何被发送（例如，通过GET或POST方法发送到服务器）。
常见的表单元素包括：
<input>：用于收集用户输入。根据type属性的不同，它可以表示文本框、密码框、单选按钮、复选框、提交按钮等。
<textarea>：多行文本输入控件，允许用户输入任意数量的文本。
<button>：定义一个可点击的按钮，通常用于提交表单。
<select>：下拉选择菜单，允许用户从多个选项中选择一个或多个选项。
<label>：定义<input>元素的标签，改善用户体验，因为点击标签时也会选中或激活对应的表单元素。 

例如：html文件中

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
//在使用 jQuery 之前，加载jQuery 库。
<p id="text_P" value="text_P_value">这是一段测试的文本</p>
//给<p>标签添加value属性作为对照
<form action="www.baidu.com" method="post">  
  <label for="name" id="label_Name_id" >姓名：</label>  
  <input type="text" id="name" name="name" ><br><br>  
  <label for="email" id="lable_email_id">电子邮件：</label>  
  <input type="email" id="email" name="email"><br><br>  
  <input type="submit" value="提交">  
</form>

 在生成的html页面的姓名框中输入一串字符作为name的value

分别打印text_P、name的val()和html()调用结果
结果如下：

在这个例子中，<form>元素定义了一个表单，<input>元素用于收集用户输入的姓名和电子邮件地址，而<label>元素则用于改善表单的可访问性。最后，一个类型为submit的<input>元素定义了提交按钮，用户点击后会将表单数据发送到指定的URL（在这个例子中是/submit-form）。

二、在jQuery中，.val() 和 .html() 方法都用于操作DOM元素的内容，但它们的应用场景和目的有所不同。

1.val()方法

用途：.val() 方法主要用于获取或设置表单元素（如 <input>, <select>, <textarea> 等）的值。
场景：当你需要读取用户输入到表单字段中的值，或者想要通过编程方式设置这些字段的值时，你会使用 .val()。

2.html()方法

用途：.html() 方法用于获取或设置匹配元素集合中每个元素的HTML内容。
场景：当你需要读取或修改元素内部的HTML结构时，比如添加或移除HTML标签及其内容，你会使用 .html()。

总结：

当操作的是表单元素的值（如输入框、选择框、文本域等）使用 .val() 。
当需要读取或修改元素内部的HTML结构时使用 .html()。