javaweb练习

最新推荐文章于 2023-07-04 19:18:10 发布

无所事事的小窝

最新推荐文章于 2023-07-04 19:18:10 发布

阅读量116

点赞数 1

分类专栏： JavaWeb 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/zy3256/article/details/127714125

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

详情可见尚硅谷

一、动态添加、删除行

思路：

给submit添加按钮绑定事件
获取添加内容，创建行标签
给a标签绑定删除事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
	//删除行放法  
		var del = function(){
			var $tr = $(this).parent().parent();    //找a标签的父元素的父元素 tr标签
			var $name= $tr.find("td:first").text(); //找到tr标签来找name  ，这样删除的提示信息比较直观
			if(confirm("真的要删除"+$name+"吗？")===true){  //confirm函数会返回一个值，如果点击是 返回true 反之 则为 false
				$tr.remove();
				return false;
			}
			else{
				return false;
			}
		}
		$("#addEmpButton").click(function(){
			//添加功能
			var name = $("#empName").val();    //找到添加信息
			var email = $("#email").val();
			var salary = $("#salary").val();
			var $trObj = $("<tr>" +
					"<td>"+name+"</td>" +
					"<td>"+email+"</td>" +
					"<td>"+salary+"</td>" +
					"<td><a href=\"deleteEmp?id=001\">Delete</a></td>" +  
					"</tr>");    //deleteEmp?id=001   这是个未知的地址，为了有可以点击的效果
			$trObj.appendTo("#employeeTable"); //显示到界面上 
		});

		$("a").live("click",del);  			  //后添加上去的数据的删除没有作用，但是通过live绑定删除事件就可以了

	})
	
	
</script>
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="deleteEmp?id=001">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>
</html>

二、图片跟随（需要熟悉了解事件对象的应用）

给小的图片绑定事件
如果事件是鼠标移入移出分别是大图片显现与不显现
鼠标在小图片上移动，给大图片坐标，通过event.pageX 以及event.pageY 获得

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	body {
		text-align: center;
	}
	#small {
		margin-top: 150px;
	}
	#showBig {
		position: absolute;
		display: none;
	}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		$("#small").bind("mouseover mouseout mousemove",function(event){    //给小的图片绑定鼠标移入 移出 在小的图片中移动的效果
			if(event.type==="mouseover"){
				$("#showBig").show();										//如果鼠标移入（表示移入那一瞬间）大的图片显示出来
			}else if(event.type==="mouseout"){
				$("#showBig").hide();                                       //如果鼠标移出那一瞬间，小的图片隐藏起来
			}else{
				$("#showBig").offset({										//给大的图片一个坐标
					left:event.pageX+10,									
					/**事件对象有坐标，pageX 表示横坐标，为什么要加一个很小的数呢，
					因为首先图片适中在右下方，如果鼠标从左上往右下移动的时候，鼠标有那么一瞬间只在大的图片上，不在小的图片上，
					那么大的图片隐藏，在那一瞬间，鼠标又落在小的图片上，此时大的图片显现，如此反反复复，会造成图片一闪一闪的现象
					*/
					top:event.pageY+10
				});
			}
		})
	});
</script>
</head>
<body>

	<img id="small" src="img/small.jpg" />
	
	<div id="showBig">
		<img src="img/big.jpg">
	</div>

</body>
</html>

三、品牌展示

初始状态，大于5且不是最后一个的品牌隐藏
给按钮绑定事件，如果是隐藏的就展开，是展开的就隐藏，就是toggle 事件
判断当前是什么状态，通过 .is(“hidden”) 来判断

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 12px;
	text-align: center;
}

a {
	color: #04D;
	text-decoration: none;
}

a:hover {
	color: #F50;
	text-decoration: underline;
}

.SubCategoryBox {
	width: 600px;
	margin: 0 auto;
	text-align: center;
	margin-top: 40px;
}

.SubCategoryBox ul {
	list-style: none;
}

.SubCategoryBox ul li {
	display: block;
	float: left;
	width: 200px;
	line-height: 20px;
}

.showmore , .showless{
	clear: both;
	text-align: center;
	padding-top: 10px;
}

.showmore a , .showless a{
	display: block;
	width: 120px;
	margin: 0 auto;
	line-height: 24px;
	border: 1px solid #AAA;
}

.showmore a span {
	padding-left: 15px;
	background: url(img/down.gif) no-repeat 0 0;
}

.showless a span {
	padding-left: 15px;
	background: url(img/up.gif) no-repeat 0 0;
}

.promoted a {
	color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function() {

			// 基本初始状态
			$("li:gt(5):not(:last)").hide();
			// 给功能的按钮绑定单击事件
			$("div div a").click(function () {
				// 让某些品牌，显示，或隐藏
				var category = $("li:gt(5):not(:last)");
				category.toggle();
				// 判断 品牌，当前是否可见
				var $promoptedCategory = $("li:contains('索尼')");
				if (category.is(":hidden")) {
					// 品牌隐藏的状态 ：1 显示全部品牌    == 角标向下 showmore
					$("div div a span").text("显示全部品牌");

					$("div div").removeClass();
					$("div div").addClass("showmore");
					// 去掉高亮
					$promoptedCategory.removeClass("promoted");
				} else {

					$("div div a span").text("显示精简品牌");

					$("div div").removeClass();
					$("div div").addClass("showless");
					$promoptedCategory.addClass("promoted");
				}
				return false;
			});
	});
</script>
</head>
<body>
	<div class="SubCategoryBox">
		<ul>
			<li><a href="#">佳能</a><i>(30440) </i></li>
			<li><a href="#">索尼</a><i>(27220) </i></li>
			<li><a href="#">三星</a><i>(20808) </i></li>
			<li><a href="#">尼康</a><i>(17821) </i></li>
			<li><a href="#">松下</a><i>(12289) </i></li>
			<li><a href="#">卡西欧</a><i>(8242) </i></li>
			<li><a href="#">富士</a><i>(14894) </i></li>
			<li><a href="#">柯达</a><i>(9520) </i></li>
			<li><a href="#">宾得</a><i>(2195) </i></li>
			<li><a href="#">理光</a><i>(4114) </i></li>
			<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
			<li><a href="#">明基</a><i>(1466) </i></li>
			<li><a href="#">爱国者</a><i>(3091) </i></li>
			<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
		</ul>
		<div class="showmore">
			<a href="more.html"><span>显示全部品牌</span></a>
		</div>
	</div>
</body>
</html>