前沿视频教室————最好的CSS和Web设计与开发的视频教程

在Web前端开发中，Javascript的作用越来重要了，关键的原因在于它可以为访问者提供更好的用户体验。

在众多的Javascript框架中，jQeury无疑是一个超级明星。它到底能给我们带来什么？我在这里用最近我自己的一小例子，说明一下jQeury的作用。希望对初学者有所启发！

案例简述

在我们的这个网站（前沿视频教室）的页面右侧栏上部，是所有视频教程的目录，这个目录分为两级。刚开始建立这个网站时，由于内容不多，因此我们把所有的一级类别以及二级都列出来，这样读者选择起来更方便一些。然而随着内容的不断增加，这个菜单列表越来越长，因此我们希望把它变短一些，方法当然就是要把二级类别隐藏起来，在需要的时候，再把二级类别列表打开。

读者可以试验一下页面右侧上部的菜单，就是我们希望的效果。本文的主要目的，就是希望说明用jQeury来实现上述功能是多么的简便，下面开始具体讲解。

实现基本功能

首先编写一个二级菜单的HTML，非常简单，基本模式如下：

<ul>
	<li><a href="#">People's Republic of China</a>
	        <ul>
		 	<li><a href="#">Beijing</a></li>
		 	<li><a href="#">Shanghai</a></li>
		 	<li><a href="#">Tianjin</a></li>
		</ul>	
	<li><a href="#">United States of America</a>
	       <ul>
			……
	       </ul>	
</ul>

上述代码就是用两了级的ul列表。下面就需要实现对二级菜单的动态隐藏和打开，代码同样非常简单，首先需要到jQeury的网站下载js文件，引入网页中。在网页的head部分，加入如下代码：

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>  
<script type="text/javascript">
$(function(){ 
    $("ul>li>a").mouseover( function(){ $(this).next().toggle(300);  } );
});
</script>

可以看到，首先把jQuery库引入，接下来真正实现效果的语句只有一句。我们逐个介绍一下各个部分的含义。

这个语句的外层为：

$(function(){
   ……
});

它的含义是省略号位置的语句会在页面装载完成后执行。在这里，要执行的语句就是：

    $("ul>li>a").mouseover( function(){ $(this).next().toggle(300);  } );

其中前面的“$(”ul>li>a”)”，表示的是选中网页上的某些元素，可以看到”ul>li>a”是CSS中的“子选择器”，它将选中一级菜单中的a元素。

其后的 “.mouseover” 表示“鼠标经过”事件，既当鼠标经过上面选中的那些元素时，将会执行它后面括号中的制定的函数语句。在这里，这个函数内容是：

     $(this).next().toggle(300);

其中 “$(this)” 的含义是，选中了鼠标经过的这个元素，“.next()” 的意思是 “$(this)” 这个元素后面的一个元素，看一下HTML代码可以知道，a元素后面是二级的ul元素，再接下来“.toggle(300)”的含义是如果这个ul元素处于打开状态则关闭它，如果处于关闭状态则打开它，括号中的300表示用300毫秒的时间，以动画的方式打开或关闭ul元素。

原理就是这么简单，只要会使用css，能够选中网页上都某些特定元素，然后在对他进行某些特定操作，就可以实现丰富的效果了。

点击这里下载本案例源文件。

不止于此

jQuery的能力还远不止于此，更为强大的是，它所具有的扩展功能，也就是它的“插件”机制。因为一个代码库，毕竟是有限的，不可能满足所有要求，而有了插件机制，就完全不同了。

例如，对于上面这个简单的案例，我们会发现她存在一个小问题：对鼠标的进入特别敏感。有的时候访问者在浏览网页的时候，鼠标可能不经意的时候经过了某个一级菜单项，这时就会立即打开对应的二级菜单，实际上访问者可能并不想打开它。如果菜单项比较多，经常在不经意间，菜单开开合合，对读者是一种干扰，那么能否让这些一级菜单对鼠标经过的事件反映的迟钝一些呢？也就是当鼠标确实进入一个一级菜单项稍微停顿一下，再打开二级菜单，如果很快就离开了，那么就不打开这个菜单了。

如果我们要自己写代码实现这个功能，100行代码是不能少的，而且要对Javascript很熟悉才可以。而使用jQeury就不同了，虽然jQuery本身不具备这个功能，但是已经有人意识到了这个问题，一位学心理学出身的美国程序员 Brian Cherne 就为此编写了一个jQeury的插件，网址是： http://cherne.net/brian/resources/jquery.hoverIntent.html

这个插件就可以完美地解决这个问题，他会分析鼠标进入目标区域以后的行为，判断是偶然进入，还是确实希望进入这个区域，这样比如当鼠标快速滑过目标区域时，是不会触发鼠标经过事件的，从而避免不经意间的触发。

使用这个插件也非常简单，把这个插件对应的js文件引入网页，然后使用这个插件中定义的 “.hoverIntent”来代替原本jQeury中的“.mouseover”事件，就可以了。当然，为了调整敏感度，你也可以设置一些参数，这些参数的默认值都是经过Brian Cherne本人反复试验过的，通常使用它提供的默认值就可以了。

大家可以试验一下本网页右侧的视频教程类别菜单，当你的鼠标快速滑过一级分类时，并不会引起任何反应，只有当你鼠标在目标区域停留稍长的时间之后，二级菜单才会打开。

虽然这是一个很小的例子，但是他确实充分地体现了jQeury的强大。

点击这里下载本案例源文件。

总结与提高

通过上面这个非常简单的案例，我们可以非常清楚地看到jQeury之所以能够成为超级明星，确实是实至名归。对我们大多数学习者来说，可以认识到几点：

1：真正把CSS学明白，这一点非常重要，做Javascript的开发，无论是不是使用框架，或者无论使用哪种框架，CSS都是必须要学的非常扎实的基础。

2：把Javascript的基础学明白，比如对于事件的理解，对于DOM的操作等等，只有你把这些理解清楚了，在加上jQeury这把倚天剑，才能所向无敌。

3：善于寻找插件，jQeury有很多非常好用的小插件，用上以后，很简单就可以解决大问题，不断培养自己寻找解决方法的能力，是很必要的。

这篇文章发表于 2008年11月04日 星期二 2:23 pm，并被分类于网页设计杂谈。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论，或者在您自己的网站中引用 (Trackback) 它。