开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用jquery隐藏和显示表单

使用jQuery隐藏和显示表单可以通过以下步骤实现：

引入jQuery库：在HTML文件中的<head>标签内引入jQuery库，可以通过以下方式引入：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

编写HTML表单：在HTML文件中，编写需要隐藏和显示的表单，例如：

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br><br>
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email"><br><br>
  
  <label for="message">留言：</label>
  <textarea id="message" name="message"></textarea><br><br>
  
  <input type="submit" value="提交">
</form>

使用jQuery隐藏表单：通过jQuery的hide()方法可以隐藏表单，可以在JavaScript代码中使用以下方式隐藏表单：

$(document).ready(function() {
  $('#myForm').hide();
});

使用jQuery显示表单：通过jQuery的show()方法可以显示表单，可以在JavaScript代码中使用以下方式显示表单：

$(document).ready(function() {
  $('#myForm').show();
});

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>隐藏和显示表单</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
  <button id="showForm">显示表单</button>
  <button id="hideForm">隐藏表单</button>
  
  <form id="myForm">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name"><br><br>
    
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email"><br><br>
    
    <label for="message">留言：</label>
    <textarea id="message" name="message"></textarea><br><br>
    
    <input type="submit" value="提交">
  </form>
  
  <script>
    $(document).ready(function() {
      $('#myForm').hide();
      
      $('#showForm').click(function() {
        $('#myForm').show();
      });
      
      $('#hideForm').click(function() {
        $('#myForm').hide();
      });
    });
  </script>
</body>
</html>

以上代码中，通过点击"显示表单"按钮可以显示表单，点击"隐藏表单"按钮可以隐藏表单。

相关搜索:AJAX/JQUERY显示和隐藏按钮 jQuery单击下一步时显示和隐藏表单 JS显示和隐藏表单使用AJAX、JQuery和HTML显示/隐藏数据使用jQuery显示/隐藏分区使用jQuery显示和隐藏嵌套的div 使用JQuery显示和隐藏文章元素使用jQuery显示和隐藏表列使用JQuery根据下拉选择隐藏和显示div 使用JQuery隐藏和显示多个div以及隐藏标题

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Web-第四天 jQuery学习

jQuery是一个JavaScript框架。它兼容CSS3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。

04

jQuery中常用的函数和属性详细解析

$("img").attr({src:"test.jpg",title:"test Image"}); 给某个元素添加属性/值，参数是map

01

JQuery基础

学习jQuery的时候，很快过了一遍，发现好多知识点不清晰。看来还是要写出来加深印象，平时多练习！ jQuery是一个Javascript函数库，轻量级，“写得少，做的多！”，它有以下功能： HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX Utilities（实用工具）很多大公司都在使用jQuery:Google,Microsoft,IBM等。jQuery兼容所有主流浏览器，包括IE6（不失为解决兼容性的一种方法）。

05

前端基础-JQuery (二)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

01

jQuery 常用方法

jQuery 是一个快速、简洁的 JavaScript 框架，封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互

05

与Ajax同样重要的jQuery（1）

jQuery框架 jQuery 1.4 是企业主流版本，从jQuery1.6 开始引入大量新特性。最新版本 2.1.1，这里讲解以1.8.3为主(新版本主要是浏览器兼容问题以及新特性) jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js jquery-1.8.3.js jQuery框架源码，没有被精简，体积较大（主要用来研究 jQuery源码），企业开发时，需要导入 jquery-1.8.3.min.js （精简过） 1.jQuery程序快速入门 window.

06

jq---方法总结

1. 什么是jQuery 在使用jQuery之前，我们必须先了解什么是jQuery，它能够干什么(不然我们为啥要用它)。 jQuery是一个非常流行的快速、小巧、功能强大的开源JavaScript库。就像官方所宣称的那样——"Write less，do more"，它使得我们常用的HTML文档遍历、DOM操作、事件处理、动画效果、Ajax、工具方法等功能代码的实现变得非常简单。更重要的是，它还为我们做了跨浏览器的兼容。绝大多数时候，妈妈再也不用担心我的JS兼容问题了(由于浏览器bug等因素，jQuery也无

02

jQuery中的常用内容总结(一)

jQuery中的常用内容总结(一) 前言不好意思(✿◠‿◠)，由于回家看病以及处理一些其它事情耽搁了，不然这篇博客本该上上周或者上周写的；同时闲谈几句：在这里建议各位开发的童鞋，如果有疾病尽快治疗，不要拖，大病的话甚是~，身体是本钱，如果人的身体健康是一的话，若没有前面的一，后面再多的零也是徒然，同时，建议在开发的时候保持一个好的心态，积极面对需求和技术难点，不要像我一样在难的地方朝一个地方死钻、而且经常性考虑需求之外的需求，这样都是不太好，尽量以"需求"的心态去"开发"，而不是以"开发"的心态做"需求

03

jQuery 入门指南教程

通过jQuery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jQuery对象（集合对象），不能直接调用dom定义的方法。

01

bootstrapValidator 中文API

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

05

jQuery中的常用内容总结(一)

jQuery中的常用内容总结(一) 前言不好意思(✿◠‿◠)，由于回家看病以及处理一些其它事情耽搁了，不然这篇博客本该上上周或者上周写的；同时闲谈几句：在这里建议各位开发的童鞋，如果有疾病尽快治疗，不要拖，大病的话甚是~，身体是本钱，如果人的身体健康是一的话，若没有前面的一，后面再多的零也是徒然，同时，建议在开发的时候保持一个好的心态，积极面对需求和技术难点，不要像我一样在难的地方朝一个地方死钻、而且经常性考虑需求之外的需求，这样都是不太好，尽量以"需求"的心态去"开发"，而不是以"开发"的心态做"需求

09

第51次文章：JQuery高级

上周我们聊了一下jQuery的基础部分，这周我们把jQuery的高级部分学习一下吧！同时也预祝各位小伙伴新年快乐!

03

jQuery操作DOM元素

作为一个后端程序员，也是要和前端页面打交道的。最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求。实现上述两个功能当然可以使用原生js来完成，但在实际开发过程中很少这样做，通常会使用一些别人封装好的js库来辅助我们的工作，jQuery就是这些辅助库中的一员。

04

从零开始学 Web 之 jQuery（二）获取和操作元素的属性

DOM中有很多方式获取元素，比如通过id，通过标签名，通过类名，通过name的值，通过选择器等方式。

04

jQuery选择器、Dom操作、样式、事件处理

1.库和框架的区别？库：就是API函数库，提供API供你调用。库内部已经做了各种底层的封装，以及各种兼容问题的处理，工作中调用库内的API接口就能实现需要的功能，不需要额外的代码来处理函数封装和兼容问题，让代码更简洁，效率更高。库就像是一个工具盒，需要什么工具就从库中调用。使用库的过程就是根据所需的功能，查文档，再调用库内的对应的API接口。框架：提供一套完整的解决方案，你按照方案来操作以实现需求。使用框架的过程就是先查文档，再照着文档写代码，出错了再查文档。 2.jquery 能做什么

03

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

D.closest()获得D所有父元素,含自己（D、B、A）与 D.parents() 对比

02

JQuery

但凡有两个函数完成的功能是相反的，比如一个显示一个隐藏，那么肯定会有第三个函数的效果是前两个函数的和。也就是说两个单词是反义词，那么肯定会有第三个单词，而且都和toggle有关。

02

jQuery Cheat—Sheet（jQuery学习笔记）

jQuery Cheat—Sheet（jQuery学习笔记） Web前端学习笔记之——jQuery学习笔记 ---- 什么是jQuery？ jQuery是一种JavaScript库，实现了常见任务的自动化和复杂任务简单化。 jQuery库为Web脚本编程提供了通用的抽象层，使之适合任何脚本编程情景。 jQuery能满足以下需求：取得文档中的元素、修改页面外观、改变文档内容、响应用户的交互操作、为页面添加动态效果、不刷新加载、简化常见的JavaScript任务。 ---- jQuery版本？

03

JavaWeb18-jquery学习笔记（Java全栈开发）

jquery一.筛选筛选与之前的选择器雷同,筛选提供的都是函数. 1. 过滤 eq(index|-index):获取指定索引的元素.如果是正数,索引从0开始;若是负数,倒着数从1开始. first():第一个 last():最后一个 hasClass(...):判断元素是否含有特定的样式 filter(...):筛选出与指定表达式匹配的元素集合 is(...):判断元素是否符合指定的选择器 has(...):含有特定后代的元素 not(...):删除与指定表达式匹配的元素 slice(start

09

BootStrap框架总结

Bootstrap是最受欢迎的HTML,CSS和JS框架,用于开发响应式布局,移动设备优先的WEB项目.

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭