通过例子学习Jquery----2.超级链接提示：
效果：当鼠标移到超级链接时，显示文字提示或图片提示。
代码：
<!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 runat="server">
<script type="text/javascript" src="Resources/jquery-1.4.2.js"></script>
<title>超级链接提示</title>
<style type="text/css">
#reminder
{
position:absolute;
border:1px solid #333;
background:red;
color:#333;
display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function() //文字提示
{
$(".link").mouseover(function(e)
{
var newDiv = "<div id='reminder'>"+ this.title +"<//div>";
$("body").append(newDiv);
$("#reminder")
.css({
"top": e.pageY + "px",
"left": e.pageX + "px"
}).show("fast");
}).mouseout(function(){
$("#reminder").remove();
});
$(".picLink").mouseover(function(e) //图片提示
{
var newDiv="<div id='reminder'>"+"<img src='image/apple_1.jpg' />"+" </div>";
$("body").append(newDiv);
$("#reminder").css(
{
"top": e.pageY+ "px",
"left": e.pageX + "px"
}).show("fast");
}).mouseout(function(){
$("#reminder").remove();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p> <a href="#" class="link" title="文字显示提示">超级链接1</a></p>
<p><a href="#" title="自带的超级链接">自带提示的超级链接</a></p>
<p><a href="#" class="picLink">图片显示提示</a></p>
</div>
</form>
</body>
</html>
此代码中红色部分为关键, 首先了解此代码中涉及到的Jquery语法：
a.mouseover(fn)
在每一个匹配元素的mouseover时间中绑定一个处理函数,mouseover 事件会在鼠标移如对象时触发。
fn:在每一个匹配元素的mouseover 事件中绑定的处理函数
mouseout(fn):事件会在鼠标移出对象时触发
b.append(content)
向每个匹配的元素内部追加内容
c.class(property)
在每一个匹配元素上设定属性。该方法是在匹配的元素上设置大量样式属性的最佳方式。
callback：在动画完成时执行的函数，每个元素执行一次
<p style="display:none">Hello</p>
$("p").show("fast",function(){alert("hello");})
{
$(".link").mouseover(function(e) // 当鼠标移入 超级链接 时 触发事件
{
var newDiv = "<div id='reminder'>"+ this.title +"<//div>"; //创建div元素
$("body").append(newDiv); //将div 元素追加到 body
$("#reminder") //为reminder类添加css 属性
.css({
"top": e.pageY + "px",
"left": e.pageX + "px"
}).show("fast"); //以动画形式展示出来 也就是提示显示
}).mouseout(function(){
$("#reminder").remove(); //鼠标移出后，提示消失
});
图片提示与文字提示基本一样，所不同的是：图片提示时，在创建div元素的时候，需要<img > 标签。
例子介绍完毕，与您共同进步！