jQuery实现简单的导航按钮焦点背景更换（代替css hover）以及弹出子菜单 我的第一篇博文

    这是我的第一篇博文，我对计算机网络和web编程开发感兴趣，有时也试着写一点java，目前在上大学，知识学习刚刚起步。以后打算经常写一些自己遇到的问题和知识，记录的同时接受指点，不仅日后方便查阅，也有个获得探讨和学习的环境。

 

    不久前开始接触jQuery，我用jQuery在简单的网页导航条上代替了javascript和css hover进行背景的更换和弹出子菜单，是一个简单的入门。

 

     以前在简单的导航条中经常应用css hover伪类制造鼠标焦点的背景变换：

a:link { color:#C0C0C0; font-size:12px;font-family:微软雅黑;text-decoration:none;}
a:hover{ color:#66CCFF; font-size:12px;font-family:微软雅黑;text-decoration:none;}

    这样可以实现简单的颜色背景替换，或者下面一样加入图片，实现起来很方便但也有一些缺点，比如标签的兼容性(IE6不支持a之外的标签使用hover)：

div {
	background:url(/images/img1.jpg) repeat-X right top;
}
div a:hover{
	
	background:url(/images/img2.jpg) repeat-X right top;}

如果使用其他标签带hover，就不得不面对兼容性的问题：

.menu ul li:hover,.menu ul li.funchover{//使用js定义funchover方法
	background:url(/images/img2.jpg) repeat-X right top;
}

同时注意到使用此类伪类还有一个重要的顺序问题，即link、  visited 、hover、 active四个伪类必须保持严格的顺序，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后。

a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

另外之前用过加filter滤镜，链接中文字一起被过滤，效果不佳，不建议使用：

.demo a:hover{
	filter:alpha(opacity=100,finishopacity=80,style=1);
	background:url(/images/img2.jpg) repeat-X right top;}

 

后来常用的是用javascript的onmouseover onmouseout事件代替实现此类效果，以确保兼容和简便。如：

js部分：

function over(id){
	var getsrc=document.getElementById(id);
	getsrc.src="images/menu_hover_"+id+".png";
}
function out(id){
	var getsrc=document.getElementById(id);
	getsrc.src="images/menu_"+id+".png";
}

HTML部分：

 <img src="images/menu_05.png" id="05" οnmοuseοver="over('05')" οnmοuseοut="out('05')"/>

今天试了用jQuery来写，jQuery的封装很强大，选择器也很实用，使用很方便：

 

$("#menu img").mouseover(function(){
		$(this).attr("src","images/menu_hover_"+$(this).attr("id")+".png");
	})
	$("#menu img").mouseout(function(){
		$(this).attr("src","images/menu_"+$(this).attr("id")+".png");
	})

同时加入了一个子菜单，用jQuery的slideUp() slideDown()实现渐显和渐隐：

 $("#07").click(function(){
	  if($("#submenu_sub_07").is(":hidden")){
 		 $("#submenu_sub_07").slideDown("slow");
	  }else{
		 $("#submenu_sub_07").slideUp(); 
	  }//也可用fadeIn()和fadeOut()渐隐渐显
  })

HTML部分：

 <div id="submenu_sub_07"  style="display:none;" >
     <!--
      子菜单
      -->
   </div>

 

    相比使用javascript的原生方法更改display属性更加美观了。这是实现效果（图片原素材来源于网络）:

 

  fadeIn()和fadeOut()，slideDown()和slideUp() ，使用方法大致一样，有两个可选参数，一为动作持续的时间，单位为毫秒，也可使用预定义的字符串"slow","normal","fast"；另一参数为动作完毕后进行调用的回调函数。

  有弹出动作的部分在样式中应该使用position:absolute;进行定位（父级使用relative），以免对下方元素产生下沉。例如文中的弹出菜单位置：

#submenu {	
	position:absolute;	
	height:125px;
	width:980px;
}

 

 

想到很久以前犯过的一个菜鸟问题，在javascript中用getElementById()获取元素并更改图片地址，试图这样写：

var target=document.getElementById(id).src;	target="images/pic0.png";

 

写完后检查发现不起作用，然后开始“霰弹枪”的查错，包括各处标签语法一一核对不得解决，最后发现竟然是如此低级的错误：getElementById(id).src获得的已不是对象，而是字符串，再对此target赋值，原对象当然不受影响。。应该这样写：

var target=document.getElementById(id);	target.src="images/pic0.png";

或者直接：

document.getElementById(id).src="images/pic0.png";

这是改变对象属性的问题，获取的是id=id的这一个对象，而src为对象属性，获取只能得到属性值。

    有了写博的想法，谨在这第一篇博文中纪念这低级错误，当作日后的当头警钟。

    新手起步，欢迎批评指正～