个人信息数据统计

Original 2018-11-18 23:24:57 424
abstract:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-3
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
	$(document).ready(function(){
		$('input[type=text]').css('background','pink');
		$(':selected').css('color','red');
		$('input[checked]').parent().css('color','red');
		var a=$('input[type]')

	})
</script>
<div style="background-color: #ccc;text-align: center;">
<p style="font-size: 20px;color: red;font-weight: bold">个人信息数据统计</p>
<from>
	您的姓名:<input type="text"></from><br><br>
	您的年龄:<input type="text" name=""><br><br>
	您的性别:
	<select>
		<option>男</option>
		<option selected>女</option>
	</select>
	<p>您的爱好:</p><label><input type="checkbox" name="" checked>游泳</label>
	<label><input type="checkbox" name="" >打球</label>
	<label><input type="checkbox" name="" checked>编程</label>
	<label><input type="checkbox" name="">游戏</label><br><br>
	<input type="button" value="提交" id="bt">
</from>
<div>
</body>
</html>

JQuery的选择器

1,属性选择器

$('input[type=text]').css('background','pink');

匹配了type元素值为text的特定元素的css样式背景颜色改为pink;

2,表单选择器

$('input[checked]').parent().css('color','red');

匹配了特定的复合按钮被选取颜色改为红色,需要加parent()匹配含有子元素或者文本的元素,才能生效目标

<label><input type="checkbox" name="" checked>编程</label>

复合按钮是在input设置type的值为checkbox,在input标签中加入checked使得该目标为复合按钮的初始值

3,下拉框表单

<select>
	<option>男</option>
	<option selected>女</option>
</select>

select为下拉框表单标签,option为表单内容标签,在option标签中加如selected元素则默认该目标为表单初始值

$(':selected').css('color','red');

匹配下拉框初始的css样式,颜色设置为red

Correcting teacher:灭绝师太Correction time:2018-11-19 09:19:31
Teacher's summary:完成的不错,这样学习又便于记住知识点,继续保持

Release Notes

Popular Entries