锋利Jquery第十三天 ----Jquery 表单选择器
锋利Jquery第十三天 ----Jquery 表单选择器
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单选择器</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//表单选择器
//:input 选取所有的<input>\<textarea>\<select>\<button> 元素
示例
查找所有的input元素
HTML 代码:
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
jQuery 代码:
$(":input")
结果:
[ <input type="text" />, <input type="checkbox" />, <input type="radio" />, <input type="image" />, <input type="file" />, <input type="submit" />, <input type="reset" />, <input type="password" />, <input type="button" /> ]
//:text 选取所有的单行文本框
:text
匹配所有的单行文本框
返回值Array<Element>
示例
查找所有文本框
HTML 代码:
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
</form>
jQuery 代码:
$(":text")
结果:
[ <input type="text" /> ]
//:password 选取所有的密码框
[ <input type="password" /> ]
//:radio 选取所有的单选框
$(":radio")
[ <input type="radio" /> ]
//:checkbox 选取所有的多选框
$(":checkbox")
[ <input type="checkbox" /> ]
//:submit 选取所有的提交按钮
$(":submit")
[ <input type="submit" /> ]
//:image 选取所有的图像按钮
[ <input type="image" /> ]
//:reset 选取所有的重置按钮
[ <input type="reset" /> ]
//:button 选取所有按钮
:button
匹配所有按钮
返回值Array<Element>
示例
查找所有按钮.
HTML 代码:
<form>
<input type="submit" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
jQuery 代码:
$(":button")
结果:
[ <input type="button" />,<button></button> ]
//:file 选取所有的上传域
[ <input type="file" /> ]
//:hidden 选取所有的不可见元素
:hidden
匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到
返回值Array<Element>
示例
查找所有不可见的 tr 元素
HTML 代码:
<table>
<tr style="display:none">
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
</table>
jQuery 代码:
$("tr:hidden")
结果:
[ <tr style="display:none"><td>Value 1</td></tr> ]
//如果想获得表单内表单的个数
$("#form1 :input").length; // 注意和 $("#form1 input").length 的区别
//如果想获得表单内 表单的单行文本框的个数
$("#form1 :text").length
//如果想获得表单内 密码框的个数
$("#form1 :password").length
});
</script>
</head>
<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" src="image/submit.png" /><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></textarea><br/>
<button>Button</button><br/>
</form>
</body>
</html>
浙公网安备 33010602011771号