大家在平时浏览网页的时候，无不对网页中的特效情有独钟，那这些特效是这样制作出来的呢？
现在我就为大家介绍一门技术来实现那网页中看似不可思议的事情，它就是受到大多数编程人员青睐的jQuery，它至今已有6岁了，说起它应该是一门成熟的技术了。那jQuery到底是什么呢？其实说简单点，Jquery是就一个Javascript的函数库，封装大量的JS操作。它所强调的理念就是“写的少，做的多”，其独特的选择器、链式的DOM操作方式、事件绑定机制、封装完善的Ajax都是其他JavaScript库望尘莫及的，值得特别强调的是它出色的浏览器兼容性，它解放了程序员不在考虑浏览器的兼容问题。
说了这么多了，现在带大家来瞧瞧jQuery的基本使用方式吧！（需要导入jQuery，百度一下、你懂的）
Jquery的核心语法是：$();
1. 引入jquery的函数库。<script type=”text/javascript” src=”路径”></script>
2. 编写jquery的固定语法格式。
<script type=”text/javascript”> //此段代码，表示页面在加载的时候，自动调用的代码。 $(function(){ //这里写Jquery的代码 }); </script>
这里是一个简单的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(function(){ //每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二 //个函数。随后的每次点击都重复对这两个函数的轮番调用。可以使用unbind("click")来删除 $(".title").toggle(function(){ $("ul").hide(300); $(this).parent().children("ul").slideDown(500); },function(){ $(this).parent().children("ul").slideUp(500); }).mouseover(function(){ $(this).stop().animate({paddingLeft:"45px"},200); }).mouseout(function(){ $(this).stop().animate({paddingLeft:"20px"},200); }); $("li").mouseover(function(){ $(this).addClass("highlight"); }).mouseout(function(){ $(this).removeClass("highlight"); }); }); </script> <style type="text/css"> #menu{ background:url(img/bg-body.gif) repeat-y; height:540px; width:220px; padding:100px 0px 0px 30px; font-size:12px; color:#999999; } .title{ background:url(img/bg-menu-item-green.gif) no-repeat; height:33px; padding:10px 0px 0px 20px; margin-left:10px; width:180px; color:#FFFFFF; cursor:pointer; font-family:Arial, Helvetica, sans-serif; font-stretch:wider; font-size:14; } ul{ list-style:none; padding:0px; display:none; } ul li{ padding:5px 0px 0px 50px; cursor:pointer; } .highlight{ color:#FFFFFF; } </style> </head> <body> <div id="menu"> <div> <div class="title">题目1</div> <ul> <li>111111</li> <li>222222</li> <li>333333</li> </ul> </div> <div> <div class="title">题目2</div> <ul> <li>aaaaaa</li> <li>bbbbbb</li> <li>cccccc</li> </ul> </div> <div> <div class="title">题目3</div> <ul> <li>!!!!!!</li> <li>@@@@@@</li> <li>######</li> </ul> </div> <div> <div class="title">题目4</div> <ul> <li>111111</li> <li>222222</li> <li>333333</li> </ul> </div> <div> <div class="title">题目5</div> <ul> <li>aaaaaa</li> <li>bbbbbb</li> <li>cccccc</li> </ul> </div> <div> <div class="title">题目6</div> <ul> <li>!!!!!!</li> <li>@@@@@@</li> <li>######</li> </ul> </div> </div> </body> </html>