jQuery选择器—表单选择器

最新推荐文章于 2022-08-10 10:08:43 发布

端木奇影

最新推荐文章于 2022-08-10 10:08:43 发布

阅读量513

点赞数

分类专栏： jQuery 文章标签： jquery 表单选择器

本文链接：https://blog.csdn.net/qq_33756795/article/details/51317881

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery1.12.3.js"></script>
		<script type="text/javascript" src="stromae1.js"></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" /><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>

jQuery代码如下：

$(function()
{
	//表单选择器：通过该选择器，能够及其方便的获取到表单的某个或某类型元素。
	alert($("#form1 :input").length);	//获取所有<input>、<textarea>、<select>和<button>个数(通过alert弹出来显示被勾选的元素个数)
	alert($("#form1 :text").length);		//获取所有单行文本框(通过alert弹出来显示被勾选的元素个数)
	alert($("#form1 :password").length);	//获取所有的密码框(通过alert弹出来显示被勾选的元素个数)
	alert($("#form1 :radio").length);	//获取所有的单选框(通过alert弹出来显示被勾选的元素个数)
	alert($("#form1 :checkbox").length);	//获取所有的多选框(通过alert弹出来显示被勾选的元素个数)
	alert($("#form1 :submit").length);	//获取所有的提交按钮(通过alert弹出来显示被勾选的元素个数)
	alert($("#form1 :image").length);	//获取所有的图像按钮(通过alert弹出来显示被勾选的元素个数)
	alert($("#form1 :reset").length);	//获取所有的重置按钮(通过alert弹出来显示被勾选的元素个数)
	alert($("#form1 :button").length);	//获取所有的按钮(通过alert弹出来显示被勾选的元素个数)
	alert($("#form1 :file").length);	//获取所有的上传域(通过alert弹出来显示被勾选的元素个数)	
	alert($("#form1 :hidden").length);	//获取所有的不可见元素(通过alert弹出来显示被勾选的元素个数)
})