jQuery学习-DOM节点操作

运行效果如下:


jQuery学习-DOM节点操作_第1张图片

代码: 

 

<html>
	<head>
		<script type="text/javascript" src="jquery-1.9.1.js"></script>
	</head>
	
	<body>
		<form id="userInfo">
			姓名: <input id="userName"  type="text"/>	<br />		
			花名: <input id="otherName"  type="text"/>	<br />		
			<input value="提交" class="button_clicked" type="button"/>			
		</form>					
		<table border="2px" width="60%">
			<tr>
				<th align='center'>姓名</th>
				<th align='center'>花名</th>
			</tr>
		</table>
	</body>

	
</html>

<style type="text/css">
	.button_clicked{
		color:red;
		font-weight:bold;
		font-size:30px;
		border-width:5px;
		background-color:blue;
		width:200px;
		height:80px;
	}	
	.button_normal{
		color:green;
		font-weight:bold;
		font-size:30px;
		border-width:5px;
		background-color:red;
		width:200px;
		height:80px;
	}
</style>

<script type="text/javascript">
	$(
		function(){
			$('input[value=提交]').click(
				function(){
					if($(this).hasClass('button_clicked')){
						$(this).removeClass('button_clicked');
						$(this).addClass('button_normal');
					}else{
						$(this).removeClass('button_normal');
						$(this).addClass('button_clicked');
					}					
					
					if(($('#userName').val() != "") && ($('#otherName').val() != "")){
						var msg = "<th align='center'> <font color='red'>" + $('#userName').val() + "<font></th><th align='center'>" + $('#otherName').val() + "</th>";					
						$('table').append("<tr>" + msg + "</tr>");	
						$('#userName').val('');
						$('#otherName').val('');					
					}else{
						alert('请输入姓名和花名!!!');
					}					
				}
			);						
		}	
	);	
</script>

 

 

 

 

 

你可能感兴趣的:(jquery,css)