jQuery表单选择器

本文记录WEB前端学习过程中遇到的jQuery表单选择器~

表单类型选择器:

  • :input
  • :text
  • :password
  • :radio
  • :checkbox
  • :submit
  • :image
  • :reset
  • :button
  • :file
  • :hidden

表单属性选择器:

  • :enabled:可用;
  • :disabled:不可用(disabled=“disabled”);
  • :checked:选中(radio或者checkbox等);
  • :selected:选择(select中的option等)。

示例代码:

<html>
	<head>
		<meta charset="UTF-8">
		<title>表单选择器</title>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$(":input").css("background-color","pink");
				});
				$("#btn2").click(function(){
					$(":text").css("background-color","pink");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="选择所有input元素" />
		<input type="button" id="btn2" value="选择文本框" />
		<br/>
		<form>
			<input type="text" /><br />
			<input type="checkbox" /><br />
			<input type="radio" /><br />
			<input type="image" /><br />
			<input type="file" /><br />
			<input type="submit" />
			<input type="reset" /><br />
			<input type="password" /><br />
			<input type="button" /><br />
			<select><option/></select><br />
			<textarea></textarea><br />
			<button></button>
		</form>
	</body>
</html>

标签: none