今天早上复习知识点的时候,回顾到这个this易错点时,感觉有点意思,所以拿出来和大家交流讨论。当时人好困,所以思考得不是特别全面。
在我们学习C#的时候,我们就知道了thi指的当前实例,在Winfrom中,我们明白了Application.Exit();和this.Close();的区别,也知道了this的方便之处,但是在Javascript和Dom我们又见识到this,今天拿JQuery中的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日