最近在学jQuery,于是买了本《锋利的jQuery》想系统的学一下，省得网上学的只鳞片爪的没有一个系统的结构。不过买了后才发现这本书果然如网上评价的一般：错误很多。买书，还是买国外的经典版比较好，省得看的时候被硌着眼。
前不久把 CSS Mastery啃完了，心痒难耐想逐步美化下自己的页面，顺便练练手。从图片做起，给图片加了个边框，做了圆角然后弄了个阴影，完事后觉得效果还是不甚明显，于是琢磨着给图片加个悬浮标题。结合正在学的jQuery搞了一个：Demo
1、功能
将图片img的相关属性提取出来显示为悬浮标题。提取的规则：
1、若图片有title属性，提取title属性并显示。
2、若无title属性，提取alt属性并显示。
3、若无title属性，也无alt属性，提取图片名并显示，如aa.jpg bb.png cc.gif dd.bmp ee.jpeg等。
ps:我这儿未考虑图片的src不是以后缀名结尾的形式。
2、实现
用的jQuery实现的，当然其中涉及到css,然后就是在获取图片名称时用到了正则表达式。
来看一下核心代码。注释看Demo里的源码
$(window).load(function() {
$("img").each(function() {
$("img:not([title])").each(function() {
var img_src=$(this).attr("src");
var img_name=img_src.match(/[^/]+.(jpg|png|jpeg|gif|bmp)/ig);
if($(this).attr("alt") !=”) $(this).attr("title", $(this).attr("alt"))
else $(this).attr("title", img_name);
});
var $img=$(this);
$(this).wrap("<span class=’hover_image’ style=’width:"+$img.width()+"px’></span>");
$(this).parent(".hover_image").hover(function(){
$(this).append("<div class=’hover_title ‘ style=’width:"+$img.width()*0.5+"px;left:"
+($img.offset().left-$img.parent().offset().left)+"px’>"
+$img.attr("title")+"</div>");
$img.next().show();},
function(){$img.next().fadeOut("slow").remove();});
});
});