最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery 表单选择器使用说明详解
时间：2013-08-10 编辑：简简单单 来源：一聚教程网
为了使用户能够更加灵活的操作表单，jQuery中专门加入了表单选择器。利用这个选择器，能及其方便的获取到表单的某个或某类型的元素
| 选择器 | 描述 | 返回 |
| :input | 选取所有的、<textarea>、<select>、 | 集合元素 |
| :text | 选取所有的单行文本框 | 集合元素 |
| :password | 选取所有的密码框 | 集合元素 |
| :radio | 选取所有的单选框 | 集合元素 |
| :checkbox | 选取所有的多选框 | 集合元素 |
| :submit | 选取所有的提交按钮 | 集合元素 |
| :image | 选取所有的图像按钮 | 集合元素 |
| :reset | 选取所有的重置按钮 | 集合元素 |
| :button | 选取所有的按钮 | 集合元素 |
| :file | 选取所有的上传域 | 集合元素 |
| :hidden | 选取所有的不可见元素 | 集合元素 |
jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。下面通过表格进行一一介绍。
1.基本选择器
|
选择器
|
描 述
|
返 回
|
示 例
|
|
#id
|
匹配给定的id
|
单个元素
|
$(“header”)
|
|
.class
|
匹配给定的类名
|
集合元素
|
$(“.test”)
|
|
E
|
匹配给定的标签名
|
集合元素
|
$(“div”)
|
|
*
|
匹配所有元素
|
集合元素
|
$(“*’)
|
|
E, .class, E…
|
匹配给定的集合
|
集合元素
|
$(“span, .tips”)
|
2.层次选择器
|
选择器
|
描 述
|
返 回
|
示 例
|
|
$(“ancestor descendant”)
|
匹配ancestor里的所有
descendant(后代)元素 |
集合元素
|
$(“body div”)
|
|
$(“parent>child”)
|
匹配parent下的所有
child(子)元素 |
集合元素
|
$(“div>span”)
|
|
$(“prev+next”)
|
匹配紧接在prev后的
next元素 |
集合元素
|
$(“.error+span”)
|
|
$(“prev~siblings”)
|
匹配prev后的所有
siblings元素 |
集合元素
|
$(“span~a”)
|
3.过滤选择器
3.1 基本过滤选择器
|
选择器
|
描 述
|
返 回
|
示 例
|
|
:first
|
匹配第一个元素
|
单个元素
|
$(“div:first”)
|
|
:last
|
匹配最后一个元素
|
单个元素
|
$(“span:last”)
|
|
:even
|
匹配索引是偶数的元素
索引从0开始 |
集合元素
|
$(“li:even”)
|
|
: odd
|
匹配索引是奇数的元素
索引从0开始 |
集合元素
|
$(“li:odd”)
|
|
:eq(index)
|
匹配索引等于index的元
素(索引从0开始) |
单个元素
|
$(“input:eq(2)”)
|
|
:gt(index)
|
匹配索引大于index的元
素(索引从0开始) |
集合元素
|
$(“input:gt(1)”)
|
|
:lt(index)
|
匹配索引小于index的元
素(索引从0开始) |
集合元素
|
$(“input:lt(5)”)
|
|
:header
|
匹配所有h1,h2…等
标题元素 |
集合元素
|
$(“:header”)
|
|
:animated
|
匹配所有正在执行
动画的元素 |
集合元素
|
$(“div:animated”)
|
3.2 内容过滤选择器
|
选择器
|
描 述
|
返 回
|
示 例
|
|
:contains(text)
|
匹配含有文本内容text
的元素 |
集合元素
|
$(“p:contains(今天)”)
|
|
:empty
|
匹配不含子元素或
文本元素的空元素 |
集合元素
|
$(“p:empty”)
|
|
:has(selector)
|
匹配包含selector元素
的元素 |
集合元素
|
$(“div:has(span)”)
|
|
:parent
|
匹配含有子元素或文本
的元素 |
集合元素
|
$(“div:parent”)
|
3.3 可见性过滤选择器
|
选择器
|
描 述
|
返 回
|
示 例
|
|
:hidden
|
匹配所有不可见
的元素 |
集合元素
|
$(“:hidden”)
|
|
:visible
|
匹配所有可见元素
|
集合元素
|
$(“:visible”)
|
3.4 属性过滤选择器
|
选择器
|
描 述
|
返 回
|
示 例
|
|
[attr]
|
匹配拥有此属性
的元素 |
集合元素
|
$(“img[alt]“)
|
|
[attr=value]
|
匹配属性值为value
的元素 |
集合元素
|
$(“a[title=test]“)
|
|
[attr!=value]
|
匹配属性值不等于
value的元素 |
集合元素
|
$(“a[title!=test]“)
|
|
[attr^=value]
|
匹配属性值以value
开头的元素 |
集合元素
|
$(“img[alt^=welcome]“)
|
|
[attr$=value]
|
匹配属性值以value
结尾的元素 |
集合元素
|
$(“img[alt$=last]“)
|
|
[attr*=vlaue]
|
匹配属性值中含有
value的元素 |
集合元素
|
$(“div[title*=test]“)
|
|
[attr1][attr2]…
|
通过多个属性
进行匹配 |
集合元素
|
$(“div[id][title*=test]“)
|
3.5 子元素过滤选择器
|
选择器
|
描 述
|
返 回
|
示 例
|
|
:nth-child
|
匹配每个父元素下的
第index个子元素 索引从1开始 |
集合元素
|
$(“div:nth-child(2)”)
|
|
:first-child
|
匹配每个父元素的
第一个子元素 |
集合元素
|
$(“div:first-child”)
|
|
:last-child
|
匹配每个父元素的
最后一个子元素 |
集合元素
|
$(“div:last-child”)
|
|
: only-child
|
某元素是它父元素中
的唯一的子元素 则匹配它 |
集合元素
|
$(“div:only-child”)
|
3.6 表单对象属性过滤选择器
|
选择器
|
描 述
|
返 回
|
示 例
|
|
:enabled
|
匹配所有可用元素
|
集合元素
|
$(“form :enabled”)
|
|
:disabled
|
匹配所有不可用
的元素 |
集合元素
|
$(“form :disabled”)
|
|
:checked
|
匹配所有被选中的元素
(含单选框，复选框) |
集合元素
|
$(“input:checked”)
|
|
:selected
|
匹配所有被选中的
选项元素 |
集合元素
|
$(“select :selected”)
|
4.表单选择器
|
选择器
|
描 述
|
返 回
|
示 例
|
|
:input
|
匹配所有input, textarea,
select, button元素 |
集合元素
|
$(“input”)
|
|
:text
|
匹配所有文本框
|
集合元素
|
$(“:text”)
|
|
:password
|
匹配所有密码框
|
集合元素
|
$(“:password”)
|
|
:radio
|
匹配所有单选框
|
集合元素
|
$(“:radio”)
|
|
:checkbox
|
匹配所有所有多选框
|
集合元素
|
$(“:checkbox”)
|
|
:submit
|
匹配所有提交按钮
|
集合元素
|
$(“:submit”)
|
|
:image
|
匹配所有图像按钮
|
集合元素
|
$(“:image”)
|
|
:reset
|
匹配所有重置按钮
|
集合元素
|
$(“:reset”)
|
|
:button
|
匹配所有按钮
|
集合元素
|
$(“:button”)
|
|
:file
|
匹配所有上传域
|
集合元素
|
$(“:file”)
|
简单举个例子：
如果一个HTML代码如下所示：
| 代码如下 | 复制代码 |
表单选择器的用法：
$(‘#form1 :input’) 可以选取表单内表单元素的个数
$(‘#form1 :text’) 可以选取表单内单行文本框的个数
$(‘#form1 :passowrd’) 可以选取表单内密码框的个数
上面说了这么多下面我们来看一个jquery表单选择器实例
| 代码如下 | 复制代码 |
|
|
|
-
下一个： jQuery的选择器(三) 过滤选择器
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31