锋利的jquery

今天用jquery写了一个标签提示功能的小程序,发现jquery真是叫锋利

<!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>

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
    var x= 100;
    var y= 100;
    $("a.a1")
    //鼠标移入
    .mouseover(function(e){
    //添加一个属性暂存title,可以随意添加啊,好棒
    this.temp= this.title;
    //创建div元素
    var div1= "<div id='div1'>"+this.title+"</div>";
    $("body").append(div1);
    //设置div的x,y坐标
    $("#div1")
        .css(
            {
            "top":(e.clientY+y)+"px",
            "left":(e.clientX+x)+"px"
            }
            ).show("fast");
        this.title="";
    })//注意,千万注意这个地方不要习惯性的加一个分号!上次因为这个小小的分号调试了好久。为什么,因为对"a.a1"对象的事件没有结束啊,如果加上分号下面的事件就没有主人了

    //鼠标移出
    .mouseout(function(){
    //再次添加上,以备下一次鼠标滑入时提供注释。
    this.title= this.temp;
    $("#div1").remove();
    })

    //鼠标移动
    .mousemove(function(e){
        $("#div1")
            .css({
            "top":(e.pageY+y)+"px",
            "left":(e.pageY+x)+"px"
            })
    });


});

</script>

</head>

<body>

<p><a href="#" class="a1"  title="这是用jQuery的超链接">标签1</a></p>
<p><a href="#"   title="这是不用jQuery的超链接">标签2</a></p>
<!--可以看看两个超链接的提示时间,就可以发现jquery真的很锋利!-->

</body>
</html>
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值