jQuery:是一种客户端的技术，它的诞生的理由是：write less,do more(写更少的代码，做更多的事情). 

因此，我们可以借助jQuery来实现一些很酷炫的效果，相比于javaScript来说，同样的效果，但是很简单的代码。jQuery中的核心知识点就是选择器的使用，选择器的内容我会在之后的博客中总结，希望大家去看下，学好了选择我器，相当于完全掌握了jQuery。 

这篇博文是实现怎么通过jQuery实现我们在购物网站中常见的：当鼠标经过了图片数，图片会放大进行预览大图。接下来我就粘贴主要代码了哈：首先是$(function(){})中的代码 

复制代码代码如下:

var x = 5; 

var y = 15; 

$("table tr td img").mousemove(function(e) { 

$("#imageTip").attr("src", this.src)//设置提示图片的路径 

.css({ 

"top" : (e.pageY + y) + "px", 

"left" : (e.pageX + x) + "px" 

}).show(3000);//显示图片 

}); 

$("table tr td img").mouseout(function(){ 

$("#imageTip").hide();//隐藏图片 

}); 

接下来页面布局代码： 

复制代码代码如下:

<table border="1px"> 

<tr> 

<th>选项</th> 

<th>海报</th> 

<th>名称</th> 

</tr> 

<tr id="0"> 

<td><input type="checkbox" id="Checkbox1" value="0"></td> 

<td><img src="images/xiao01.jpg" alt=""></td> 

<td>杨幂</td> 

</tr> 

<tr id="1"> 

<td><input type="checkbox" id="Checkbox2" value="1"></td> 

<td><img src="images/xiao02.jpg" alt=""></td> 

<td>林萧</td> 

</tr> 

<tr id="0"> 

<td><input type="checkbox" id="Checkbox3" value="2"></td> 

<td><img src="images/xiao03.jpg" alt=""></td> 

<td>宫洺</td> 

</tr> 

</table> 

<table> 

<tr> 

<td style="text-align: left;height: 20px"><span><input 

type="checkbox" id="checkAll">全选</span> <span><input 

id="btnDel" type="button" value="删除"> </span> 

</td> 

</tr> 

</table> 

<img alt="" src="images/xiao01.jpg" class="clsImg" id="imageTip"> 

这里大家只要注意左后一行代码的写法。上面只是表格的布局。 

接下来是css: 

复制代码代码如下:

body { 

font-size: 12px; 

} 

table tr td img { 

border: soild 1px #666; 

width: 240px; 

height: 240px; 

padding: 3px; 

cursor: hand; 

} 

.clsImg { 

position: absolute; 

border: 1px #ccc solid; 

width: 400px; 

height: 400px; 

display: none; 

}