jQuery基础教程之强大的选择器(表单选择器)

转载 2012年03月31日 14:16:53



今天我们来说说jQuery选择器中的最后一类表单选择器,学完这最后一种选择器之后,接下来我会慢慢地带领大家对jQuery中如何操作DOM进行详细地讲解,同时我自己也在学习中,有好多jQuery操作DOM的函数我自己也没用过,正好借助写jQuery教程的机会,自己也能详细地了解一下jQuery中强大的操作函数。
下面我们来看看jQuery表单选择器的说明:

jQuery中引入了表单选择器,让我们能极其方便地获取到一个表单中的某个或某类型的元素。
详细说明请看下表:

选择器 描述 返回 示例
:input 选取所有<input>、<textarea>、
<select>、<button>元素
集合元素 $(“:input”)选取所有<input>、<textarea>、<select>、<button>元素
:text 选取所有单行文框 集合元素 $(“:text”)选取所有单行文框
:password 选取所有密码框 集合元素 $(“:password”)选取所有密码框
:radio 选取所有单选框 集合元素 $(“:radio”)选取所有的单选框
:checkbox 选取所有复选框 集合元素 $(“:checkbox”)选取所有的复选框
:submit 选取所有提交按钮 集合元素 $(“:submit”)选取所有的提交按钮
:image 选取所有的图像按钮 集合元素 $(“:image”)选取所有的图像按钮
:reset 选取所有重置按钮 集合元素 $(“:reset”)选取所有的重置按钮
:button 选取所有按钮 集合元素 $(“:button”)匹配<input type=”button”><button>
:file 选取所有的上传域 集合元素 $(“:file”)选取所有的上传域
:hidden 选取所有不可见元素 集合元素 $(“:hidden”)选取所有不可见元素(已经在不可见性过滤选择器中讲解过)

下面把这些表单选择器运用到下面的表单中,对表单进行操作:
表单HTML代码如下:

01 <form id="form1" action="#">
02 <input type="button" value="Button"><br>
03 <input type="checkbox" name="c">1
04 <input type="checkbox" name="c">2
05 <input type="checkbox" name="c">3<br>
06 <input type="file"><br>
07 <input type="hidden">
08 <div style="display:none">test</div>
09  
10 <br>
11 <input type="image"><br>
12 <input type="password"><br>
13 <input type="radio" name="a">1
14 <input type="radio" name="a">2<br>
15 <input type="reset"><br>
16 <input type="submit" value="提交"><br>
17 <input type="text"><br>
18 <select>
19 <option>Option</option>
20 </select>
21  
22 <br>
23     <textarea rows="5" cols="20"></textarea><br>
24     <button>Button</button><br>
25 </form>

如果想得到表单内表单元素的个数:jQuery代码如下:

1 $("#form1 :input").length;//16个 注意$("#form1 input").length 是13个

如果想得到表单内单行文本框的个数,代码如下:

1 $("#form1 :text").length;//1个

如果想得到表单内密码框的个数,代码如下:

1 $("#form1 :password").length;//1个

Jquery选择器分类(基本选择器,层次选择器,过滤选择器,表单选择器)

基本选择器 说明:通过元素id、class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test");//选取所有class为...
  • allan492975230
  • allan492975230
  • 2013年08月01日 15:50
  • 1126

10分钟-jQuery表单选择器

1.:input表单选择器如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有标记的表单元素,而且还包括、 和 标记的表单元素,因此,它选择的表单元素是最广...
  • jimo_lonely
  • jimo_lonely
  • 2016年04月01日 23:11
  • 5965

jQuery过滤选择器详解

基本过滤选择器选取第一个元素(:first) //选择第一个div元素. $('#btn1').click(function(){ $('div:first...
  • csujiangyu
  • csujiangyu
  • 2015年08月19日 10:19
  • 5553

jQuery基础教程之强大的选择器(表单选择器)

今天我们来说说jQuery选择器中的最后一类表单选择器,学完这最后一种选择器之后,接下来我会慢慢地带领大家对jQuery中如何操作DOM进行详细地讲解,同时我自己也在学习中,有好多jQuery操作DO...
  • cpf506497746
  • cpf506497746
  • 2012年09月18日 21:22
  • 201

JQuery节点,表单选择器基础文档

  • 2015年08月01日 11:39
  • 744KB
  • 下载

jQuery基础教程之强大的选择器(层次选择器)

无论何时,我们都要记住的一点就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。 而JQuery选择器又具有这样的特点: 隐式迭代 $(“选择器”).css(“backgrou...
  • wql19881207
  • wql19881207
  • 2012年03月31日 13:52
  • 1939

jQuery基础教程之+层次选择器

隐式迭代 $(“选择器”).css(“background-color”,”red”)则是为这组元素中每个元素的样式都加上红色背景。jQuery会自动迭代每个元素,这就免去了我们编写代码遍历每个元素...
  • zhoulianglg
  • zhoulianglg
  • 2011年10月10日 17:49
  • 480

jQuery快速入门基础教程之选择器(一)

问题:我怎么才能收到你们公众号平台的推送文章呢? 答案:只需要点击标题下面的蓝色字【web前端开发】关注即可。 01、jQuery元素选择器 jQuery的基本设...
  • snsHL9db69ccu1aIKl9r
  • snsHL9db69ccu1aIKl9r
  • 2017年12月07日 00:00
  • 77

《jQuery基础教程》--选择器

1.jQuery目前的最新版支持CSS3的选择器,可以参考CSS3的选择器的使用方法。 2.jQuery遍历DOM树的方法: 2.1 filter方法。 可以利用例如: $('a').filt...
  • robert8803
  • robert8803
  • 2013年01月06日 11:12
  • 676

A_jquery+select框图片选择器点击图片给表单select框赋值Java实用源码整理learns

  • 2016年08月24日 16:43
  • 485KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery基础教程之强大的选择器(表单选择器)
举报原因:
原因补充:

(最多只允许输入30个字)