导读:经常在淘宝上选择商品时移到商品上会出现商品大图预览的效果，好吧今天哥们一起来看下这个使用jQuery如何实现。
案例需求：
1、页面上添加表格，用于显示多项信息。
2、如果选中表格中的复选框，点击“删除”则会删除选中项，如果选中“全选”再点击删除则会将表格中的数据全部删除。
3、将鼠标移到表格中的小图片中会显示大图，移开则隐藏大图。
全部代码如下：
<!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>
<title></title>
<!--功能实现：1、页面表格隔行变色2、如果选中表格中某行的复选框并单击下面的删除按钮
那么会将其删除，如果选中”全选“复选框后，再次单击删除将会把全部数据删除3、如果将鼠标移到
表格中某行的小图片上将会在图片的右侧显示与之相对应的大图片。用以实现预览效果-->
<style type="text/css">
table{font-size:20px;}
table tr td{border:solid 1px #666;margin:0 auto;}
.clsImg{display:none;width:200px;height:200px;position:absolute;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 实现隔行变色
$("table tr th").css("background", "red");
//全选复选框单击事件
$("#checkAll").click(function () {
if (this.checked) { //如果自己被选中则将所有的input选中
$("table tr td input[type='checkbox']").attr("checked", true); //将选中的checkbox的checked设为true
}
else {
$("table tr td input[type='checkbox']").attr("checked", false); //若未选中则将所有的checkbox设为false
}
});
//删除按钮单击事件
$("#btnDel").click(function () {
// var inputLength = $("table tr td:checked:not('#checkAll')").length; //获取除去全选复选框外所有选中项
// if (inputLength!=0) { //如果有选中项
alert("删除开始");
$("table tr td input[type=checkbox]:not('#checkAll')").each(function (index) { //遍历除全选复选框外的所有行
if (this.checked) { //如果有选中则删除
$("table tr[);
}
});
// }
});
//鼠标移上去时事件
$("table tr td img").mouseover(function (e) {
$("#imgTip").attr("src", this.src);
$("#imgTip").css("display", "block");
$("#imgTip").css("left", e.pageX).css("top", e.pageY);
});
//鼠标移出去时事件
$("table tr td img").mouseout(function () {
$("#imgTip").hide(); //移出去时隐藏图片
})
})
</script>
</head>
<body>
<table >
<tr><th>选项</th><th>编号</th><th>职员</th><th>姓名</th><th>性别</th><th>工资</th></tr>
<tr />
</body>
</html>
刚学的jQuery希望大牛不要见怪，有错误及考虑不周多多拍砖。