jquery练习之超链接提示效果

这是第一篇博文~~记录一个jquery练习的小例子----超链接提示效果

这是html部分

<p><a href="#" class="tooltip" title="这是我的超链接提示1.">我的文字提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">我的文字提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a></p>

这是js部分

<script>
     $(function(){

         $('a.tooltip').mouseover(function(e){
             this.myTitle = this.title;//将title里的内容赋值给自己定义的myTitle变量里
             this.title='';
             var tooltip='<div id="tooltip">'+this.myTitle+'</div>';
             $('body').append(tooltip);
             $('#tooltip').css({
                 top:e.pageY+'px',
                 left:e.pageX+'px'
             }).show('fast');
             
         })
         .mouseout(
             function(){
                 this.title = this.myTitle;
                 $('#tooltip').remove();
             }
         )
        .mousemove(function(e){   //鼠标跟随
            $("#tooltip").css({
                 top:(e.pageY+10)+'px',
                 left:(e.pageX+10)+'px'
            })
        });
     })  
</script>

主要想说的是  this.myTitle = this.title;

myTitle是自定义的变量

this.myTitle = this.title  
就是将title里的内容赋值给自己定义的myTitle变量里




对象是自包含的数据集合，包含在对象里的数据可以通过两种形式访问--属性和方法
属性是隶属于某个特定对象的变量
方法是只有某个特定对象才能调用的函数
对象就是由一些属性和方法组合在一起而构成的一个数据实体