wrapInner方法不太明白
一下是源代码，我对jquery那一段不太明白，可以讲解一下吗？特别是wrapInner方法，为什么前面放的是#mainNav2 li a呢，我看到例子都是放的标签啊。。。。没学过jquery，可是要用，不好意思。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="imagetoolbar" content="no" /> <title>Animated mainNav Using jQuery | Demo page</title> <link rel="stylesheet" href="style.css" /> <style>/** style used for both examples **/ .mainNav { height: 45px; display: block; }.mainNav ul { list-style: none; padding: 0; margin: 0; }.mainNav ul li { /* width and height of the mainNav items */ float: left; overflow: hidden; position: relative; text-align: center; line-height: 45px; }.mainNav ul li a { /* must be postioned relative */ position: relative; display: block; width: 110px; height: 45px; font-family: Arial; font-size: 11px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; }.mainNav ul li a span { /* all layers will be absolute positioned */ position: absolute; left: 0; width: 110px; }.mainNav ul li a span.out { top: 0px; }.mainNav ul li a span.over, .mainNav ul li a span.bg { /* hide */ top: -45px; }/** 2nd example **/ #mainNav2 { background: #000; }#mainNav2 ul li a { color: #FFF; }#mainNav2 ul li a span.over { background: #FFF; color: #000; }</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script language="javascript"> $(document).ready(function() { /* 2nd example */ $("#mainNav2 li a").wrapInner( '<span class="out"></span>' ); $("#mainNav2 li a").each(function() { $( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this ); }); $("#mainNav2 li a").hover(function() { $(".out", this).stop().animate({'top': '45px'}, 200); // move down - hide $(".over", this).stop().animate({'top': '0px'}, 200); // move down - show }, function() { $(".out", this).stop().animate({'top': '0px'}, 200); // move up - show $(".over", this).stop().animate({'top': '-45px'}, 200); // move up - hide }); }); </script> </head> <body><div id="content"> <div id="mainNav2" class="mainNav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Work</a></li> <li><a href="#">Services</a></li> <li><a href="#">Support</a></li> <li><a href="#">Contacts</a></li> </ul> </div> </div> </body></html>