wrapInner步骤不太明白-JavaSript-爱易网页

wrapInner步骤不太明白

日期：2014-05-16　浏览次数：20362 次

wrapInner方法不太明白
一下是源代码，我对jquery那一段不太明白，可以讲解一下吗？特别是wrapInner方法，为什么前面放的是#mainNav2 li a呢，我看到例子都是放的标签啊。。。。没学过jquery，可是要用，不好意思。。。

HTML code


<!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>

------解决方案--------------------
http://w3schools.com/jquery/jquery_selectors.asp自己看看吧。。

------解决方案--------------------
楼主通读下jquery的api吧，很多问题都能看api解决的

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

wrapInner步骤不太明白

相关资料更多>

推荐阅读更多>