jq中常用的表单选择器

原创 2018-11-10 20:16:07 4
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>表单选择器</title>
		<script type="text/javascript" src="../jquery-3.3.1.min.js"></script>
		<script>
			// 表单选择器
			// 语法:
			// $(':enabled')所有激活的input元素(可以使用的input元素)
			// $(':disabled')所有禁用的input元素(不可以使用的input元素)
			 // $(':selected')所有被选取的元素,针对于select元素
			 // $(':checked')所有被选中的input元素
			$(document).ready(function(){
				$(':enabled').css('background','pink')
				$(':disabled').css('background','red')
				$(':selected').css('background','#0ff')
				$(':checked').parent().css('color','red')
				console.log($(':checked').parent())
			})
		</script>
	</head>
	<body>
		<label >1</label><input type="text"><br>
		<label >2</label><input type="text" disabled ><br>
		<label >3</label><input type="text"><br>
		<label >4</label><input type="text"><br>
		<select name="">
			<option value="">摩羯座</option>
			<option value="" selected>射手座</option>
			<option value="">白羊座</option>
			<option value="">金牛座</option>
		</select>
		<hr>
		<label for=""><input type="checkbox" name="item">游泳</label>
		<label for=""><input type="checkbox" name="item" checked>健身</label>
		<label for=""><input type="checkbox" name="item">下棋</label>
		<label for=""><input type="checkbox" name="item">唱歌</label>
	</body>
</html>


批改老师:灭绝师太批改时间:2018-11-11 09:27:02
老师总结:代码测试的比较全面,可以试着自己找点案例写写看

发布手记

热门词条