04-JQuery学习之表单选择器 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05-表单选择器</title>
	</head>
	<body>
		<form id='myform' name="myform" method="post">
			<input type="hidden" name="uno" value="9999" disabled="disabled" />
			姓名:<input type="text" id="uname" name="uname" /><br />
			密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
			年龄:<input type="radio" name="uage" value="0" checked="checked" />小屁孩
			<input type="radio" name="uage" value="1" />你懂得 <br />
			爱好:<input type="checkbox" name="ufav" value="篮球" />篮球
			<input type="checkbox" name="ufav" value="爬床" />爬床
			<input type="checkbox" name="ufav" value="代码" />代码<br />
			来自:<select id="ufrom" name="ufrom">
				<option value="-1" selected="selected">请选择</option>
				<option value="0">北京</option>
				<option value="1">上海</option>
			</select><br />
			简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
			头像:<input type="file" /><br />
			<input type="image" src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20" />
			<button type="submit" onclick="return checkForm();">提交</button>
			<button type="reset">重置</button>

		</form>
	</body>
	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var inputs = $(':input');
		console.log(inputs);
		
		// function checkForm() {
		// 	// 获取 所有的表单元素
		// 	$(":input").each(function() {
		// 		// console.log($(this)[0]);
		// 		console.log($(this)[0].tagName);
		// 	})
		// 	console.log("------+++++++++++++++++++++--------")
		// 	// 获取 text
		// 	console.log("text-->" + $(":text").length); // 1
		// 	// 获取 password
		// 	console.log("password-->" + $(":password").length); // 1
		// 	// 获取radio
		// 	console.log("radio-->" + $(":radio").length); // 2
		// 	// 获取checkbox
		// 	console.log("checkbox-->" + $(":checkbox").length); // 3
		// 	// 获取file
		// 	console.log("file-->" + $(":file").length); // 1
		// 	// 获取按钮
		// 	console.log("button-->" + $(":button").length); // 2
		// 	// 获取submit按钮
		// 	console.log("submit-->" + $(":submit").length); // 1
		// 	// 获取image按钮
		// 	console.log("image-->" + $(":image").length); // 1
		// 	// 获取reset按钮
		// 	console.log("reset-->" + $(":reset").length); // 1
		// 	return false;
		// }
	</script>
	<!-- 
		表单选择器		:input
		文本框选择器		:text
		密码框选择器		:password
		单选按钮选择器	:ridao
		多选按钮选择器	:checkbox
		提交按钮选择器	:submit
		图像按钮选择器	:image
		重置按钮选择器	:reset
		文件域选择器		:file
		按钮选择器		:button
			
	 -->
</html>
posted @ 2021-03-29 21:04  雪漠阳光  阅读(80)  评论(0)  编辑  收藏  举报