前端基础 -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>
目录
相关文章
|
1月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
29 2
|
2月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
40 5
|
13天前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
24 3
|
23天前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$(&quot;p&quot;) 选取所有段落元素,而 $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).hide(); }) 实现点击按钮后隐藏所有段落。
|
1月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
2月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
26 2
|
2月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
2月前
|
缓存 前端开发 数据可视化
前端基础(七)_表单的基本组成与使用
本文详细介绍了HTML表单的基本组成和使用,包括`<form>`标签、`<input>`表单域、`<select>`下拉列表、`<textarea>`多行文本域等元素。文章解释了表单的提交方式(GET和POST)、表单域的各种类型(文本、密码、单选按钮、复选框等)、提交按钮和重置按钮的作用,以及如何通过`<label>`标签提高表单的可访问性。此外,还讨论了表单元素的属性,如`readonly`、`disabled`、`maxlength`等。
27 1
|
2月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
82 1
|
2月前
|
JavaScript
jQuery 选择器
jQuery 选择器
24 3