jquery获取form表单下的div

原创

mob649e8157aaee 2024-08-02 13:13:21 ©著作权

文章标签 jQuery 表单 HTML 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8157aaee的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何用 jQuery 获取 Form 表单下的 Div

在Web开发中，常常需要对用户提交的表单进行操作，尤其是在动态显示某些元素时。今天，我们将学习如何使用jQuery获取表单下的div元素。

流程概览

我们可以将整个流程概括为以下几个步骤：

步骤	描述
1	引入 jQuery 库
2	创建 Form 表单
3	在 Form 表单下嵌入 div
4	编写 jQuery 代码
5	测试代码

接下来，我们将详细介绍每一步。

步骤1: 引入 jQuery 库

在我们的 HTML 文件中，引入 jQuery 库。你可以通过CDN来引入。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取Form下的Div</title>
    <!-- 引入jQuery库 -->
    <script src="
</head>
<body>

步骤2: 创建 Form 表单

在 body 标签内创建一个简单的表单，包含一个输入框和一个提交按钮。

<form id="myForm">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name">
    <button type="submit">提交</button>
</form>

步骤3: 在 Form 表单下嵌入 div

在表单内部或下方，添加一个 div。

<div id="infoDiv" style="display:none;">
    <p>这是动态显示的信息。</p>
</div>

步骤4: 编写 jQuery 代码

我们需要编写 jQuery 代码来获取 form 中的 div。这里我们在表单提交事件中展示这个 div。

<script>
$(document).ready(function() {
    // 监听表单提交事件
    $('#myForm').on('submit', function(event) {
        // 阻止默认提交行为
        event.preventDefault(); 

        // 获取表单下的 div
        var infoDiv = $(this).find('#infoDiv'); 
        
        // 显示 div
        infoDiv.show(); 
    });
});
</script>

代码解释：

$(document).ready(function() {...})：确保DOM文档完全加载。
$('#myForm').on('submit', function(event) {...})：注册表单的提交事件。
event.preventDefault();：阻止表单的默认行为（比如页面刷新）。
var infoDiv = $(this).find('#infoDiv');：获取该表单内部的 div。
infoDiv.show();：显示该 div。

步骤5: 测试代码

将所有代码放在一个 HTML 文件中并在浏览器中打开。输入名字后点击提交，验证 div 是否显示。

序列图

下面是一个关于事件处理的序列图，展示了用户提交表单到 div 显示的过程：

sequenceDiagram
    participant User
    participant Form
    participant InfoDiv

    User->>Form: 填写信息并提交
    Form->>Form: 阻止默认提交
    Form->>InfoDiv: 获取并显示