详情可见尚硅谷
一、动态添加、删除行
思路:
- 给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> </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>