前端基础 -JQuery之 表单选择器

简介: 前端基础 -JQuery之 表单选择器

JQuery之 表单选择器

关键字:

  • :input 只要是form的子标签 就会被选中
  • input 直选中标签为input的元素

效果图:

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>09-表单选择器.html</title>
    <!--   引入jQuery -->
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script src="../js/assist.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <script type="text/javascript">
      $(function() {
        $("#btn1").click(function() {
          alert($(":input").length);
        })
      });
    </script>
  </head>
  <body>
    <input type="button" value="选取所有的表单子元素" id="btn1" /><br />
    <form id="form1" action="#">
      <input type="button" value="Button" /><br/>
      <input type="checkbox" name="c" />1<input type="checkbox" name="c" />2<input type="checkbox" name="c" />3<br/>
      <input type="file" /><br/>
      <input type="hidden" /><br/>
      <input type="image" src="1.jpg" /><br/>
      <input type="password" /><br/>
      <input type="radio" name="a" />1<input type="radio" name="a" />2<br/>
      <input type="reset" /><br/>
      <input type="submit" value="提交" /><br/>
      <input type="text" /><br/>
      <select>
        <option>Option</option>
      </select><br/>
      <textarea rows="5" cols="20"></textarea><br/>
      <button>Button</button><br/>
    </form>
    <div></div>
  </body>
</html>
目录
相关文章
|
2月前
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
94 6
|
3月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
21 0
|
3月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
15 0
|
17天前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
17天前
|
前端开发
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)
|
22天前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
43 13
|
16天前
|
JavaScript 索引
jQuery的选择器有几种?
jQuery的选择器有几种?
27 1
|
16天前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
33 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
22天前
|
存储 JavaScript 前端开发
听说在 Vue 3 中实现动态表单很难?作为一个前端开发者,表示一切都是小意思!!
听说在 Vue 3 中实现动态表单很难?作为一个前端开发者,表示一切都是小意思!!
|
2月前
|
存储 JSON 开发框架
循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储
循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储
下一篇
云函数