你懂这个this吗?

     今天早上复习知识点的时候，回顾到这个this易错点时，感觉有点意思，所以拿出来和大家交流讨论。当时人好困，所以思考得不是特别全面。
     在我们学习C#的时候，我们就知道了thi指的当前实例，在Winfrom中，我们明白了Application.Exit();和this.Close();的区别，也知道了this的方便之处，但是在Javascript和Dom我们又见识到this，今天拿JQuery中的this来分析讨论一下。
     具体需要实现的功能是实现照片列表展示，当鼠标移到哪张图片上，就显示当前位置的大图。
     先完成最简单的四张照片展示:

        $(function () {
            //json数据，json数据包括照片名字、照片路径、照片时间等信息
            var json = [{ "name": "照片1", "url": "images/1.jpg", "time": "Fri"},
            { "name": "照片2", "url": "images/2.jpg", "time": "Sun"},
            { "name": "照片3", "url": "images/3.jpg", "time": "Mon"},
            { "name": "照片4", "url": "images/4.jpg", "time": "Sun"}
            ];
            //动态生成照片列表展示的图片——小照片
            $.each(json, function () {
                //注意点一：此时this指的是数组中的每一项，this是一个json对象
                //小图片的长宽、小图片的路径、小图片之间的间距
                var $sImg = $("<img width='100px' height='100px'/>");
                $sImg.attr("src", this.url);
                $sImg.css("margin-left", "20px");
                //使用自定义属性记录照片时间
                //自定义时间属性
                $sImg.attr("time", this.time);
                //添加到div中
                $("#d1").append($sImg);

     之后就是实现当鼠标移动到那张图片，显示哪张图片的大图和详细信息：

                //注册事件
                $sImg.hover(function (e) {
                    //注意点二：此时this指的是当前function中的小图对象，this是一个dom对象
                    //鼠标移动到的地方，生成大图和详细信息
                    var $div = $("<div id='list'></div>");
                    $("body").append($div);
                    $div.css("left", e.pageX + "px").css("top", e.pageY + "px");

                    //动态生成对应的大图
                    var $bigImg = $("<img width='180px' height='180px'/>");
                    $bigImg.attr("src", $(this).attr("src"));
                    $div.append($bigImg);

                    //加上详细信息——时间
                    var $p = $("<p>时间：" + $(this).attr('time') + "</p>");
                    $div.append($p);
                }, function () {
                    //当鼠标离开当前图片位置时，移除大图
                    var $img = $("#list");
                    //判断是否添加了大图，再删除
                    if ($img.length > 0) {
                        $img.remove();
                    }
                });

     最后就是完善一些样式，包括动态div的样式设置，别忘了第一行代码的引用jquery：

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <style type="text/css">
        #list
        {
            position: absolute;
            width: 180px;
            height: 240px;
            border: 1px solid pink;
        }
    </style>

     两个注意点的this，第一个是$.each方法中的this，指的是遍历json数据时，一个json对象，注意json对象无法转换成jquery对象。但是第二个this，是hover中的dom对象，加上$(this)可以转换成jquery对象。
     也许这两个地方的this很简单，不过还是需要注意点的。
     午间发帖有点困，总结知识点，复习自己的知识体系。
     最后祝大家中秋节快乐。吃月饼去吧。

     附上代码完整实现功能

     备注：写于2013年9月18日