表单选择器
在基本选择器，层次选择器，过滤选择器之后，是表单选择器，也是最后的一个了、
表单选择器能极其方便地获取到表单的某个或某类型的元素
:input --- 选取所有的input, textarea, select, button元素---返回集合元素---$(":input")选取所有的input, textarea, select, button元素
:text --- 选取所有的单行文本框---返回集合元素---$(":text")选取所有的单行文本框
:password---选取所有的密码框---返回集合元素---$(":password")选取所有的密码框---返回集合元素---$(":password")选取所有的密码框
:radio---选取所有的单选框---返回集合元素---$(":radio")选取所有的单选框
:checkbox---选取所有的多选框---返回集合元素---$(":checkbox")选取所有的复选框
:submit---选取所有的提交按钮---返回集合元素---$(":submit")选取所有的提交按钮
:image---选取所有的图像按钮---返回集合元素---$(":image")
:reset---选取所有的重置按钮---返回集合元素---$(":reset")
:button---选取所有的按钮---返回集合元素---$(":button")
:file---选取所有的上传域---返回集合元素---$(":file")
:hidden---选取所有不可见的元素---返回集合元素---$
练习：
得到表单元素的个数：
$("#form1 :input").length
得到表单内单行文本框的个数：
$("#form1:text").length
得到表单内密码框的个数
$("#form1 :password").length
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
var $alltext = $("#form1 :text");
var $allpassword= $("#form1 :password");
var $allradio= $("#form1 :radio");
var $allcheckbox= $("#form1 :checkbox");
var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");
$("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
.append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
.append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
.append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
.append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
.append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
.append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
.append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
.append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
.append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
.append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
.append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
.append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
.css("color", "red")
$("form").submit(function () { return false; }); // return false;不能提交.
});
//]]>
</script>
<body>
<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" /><div style="display:none">test</div><br/>
<input type="image" /><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>
相关推荐
jQuery 支持多种 CSS 选择器，如 ID 选择器 (#id)，类选择器 (.class)，元素选择器 (element)，以及组合选择器（例如，$(":input") 选取所有表单输入元素）。 - **ID 选择器**: 使用 `$("#myID")` 来选取具有特定 ...
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这份笔记旨在深入理解jQuery的核心概念，通过实例代码来加强理解和应用。 1. **jQuery选择器**:...
《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源，由知名讲师韩顺平的课程实录整理而成，旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...
7. **子元素和表单选择器** - `$('input[type="text"]')`: 选择所有类型为文本的输入元素。 - `$('form input:checked')`: 选择表单内的已选中复选框或单选按钮。 - `$('select option:selected')`: 选择下拉列表...
以下是对JQuery学习笔记的详细解析： 首先，JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异，导致开发跨浏览器的网页应用变得复杂。为了统一这些...
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
**jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分，旨在帮助开发者从初级到高级...
#### 三、表单选择器 jQuery 还提供了一系列用于选择表单元素的方法： 1. `:input` 选择所有的输入、文本区域、按钮和选择框 2. `:text` 选择所有的文本框 3. `:password` 选择所有的密码框 4. `:radio` 选择所有...
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记，以HTML页面的形式呈现，方便阅读和...
jQuery的核心特性是其选择器，它允许开发者通过CSS样式的语法轻松选取HTML元素。 1. **元素引用**： jQuery通过`$()`函数来选取元素，支持多种方式，包括id、class、元素名以及层级关系和DOM或XPath条件。返回的...
### JQuery学习笔记详解 在本篇学习笔记中，我们将详细探讨JQuery的选择器以及一些基本用法，并结合具体的代码示例来深入理解JQuery的工作原理。 #### 选择器 1. **选择特定元素** - `$('#selected-plays > li:...
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这个笔记主要涵盖了我在尚硅谷学习jQuery过程中所学到的关键知识点，包括基本概念、选择器、DOM...
4. **表单选择器**：用于根据表单元素的属性进行选择，如`$(“input:checked”)`选择所有被选中的输入元素。 【jQuery对象存在的判断】 可以使用`length`属性来检查jQuery对象是否存在元素，例如： ```javascript ...
### jQuery学习笔记详解 #### 一、jQuery简介 jQuery是一个流行的JavaScript库，旨在简化Web开发者在客户端处理HTML文档和操作DOM的方式。通过提供简洁、易读的API，jQuery极大地降低了编写复杂的JavaScript代码所...
本资源"jQuery基于citypicker四级联动菜单选择器代码.zip"提供了一个实现城市选择器功能的jQuery插件，适用于网页表单，尤其是需要用户输入详细地址的场景。 首先，我们来理解一下什么是四级联动菜单。在网页设计中...
### jQuery-1.3.2 学习笔记 #### 一、概述 jQuery 是一个快速、简洁的 JavaScript 库，使用户能更方便地处理 HTML 文档、选择 DOM 元素、制作动画效果，并为应用程序添加 AJAX 交互。版本 1.3.2 在 2009 年 2 月...
jQuery 社区提供了大量插件，如：轮播图插件（Bootstrap Carousel）、表单验证（validate）、日期时间选择器（datetimepicker）等，极大地扩展了jQuery的功能。 8. **链式操作（Chaining）** jQuery 对象返回的是...
在深入探讨jQuery选择器之前，我们首先需要理解jQuery是什么。jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画以及Ajax交互。它的核心特性之一就是强大的选择器系统，使得开发者...