关于jQuery自动生成html代码的方法--wrap用法

来源:互联网 发布:black韩剧 知乎 编辑:程序博客网 时间:2024/05/16 04:03

源码:

 

<!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>
 <title>Onion Skin DropShadwo with jQuery</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 <style>
  .wrap0, .wrap1, .wrap2, .wrap3 {
    display:inline-table;
    /* /*/display:block;/**/
    }
  .wrap0 {
    float:left;
    background:url(shadow.gif) right bottom no-repeat;
    }
  .wrap1 {
    background:url(shadow180.gif) no-repeat;
    }
  .wrap2 {
    background:url(corner_bl.gif) -18px 100% no-repeat;
    }
  .wrap3 {
 padding:10px 14px 14px 10px;
    background:url(corner_tr.gif) 100% -18px no-repeat;
    }
    body { background: #fff;}
 </style>
 <script src="js/jquery-1.4.2.js" type="text/javascript"></script>

 <script>
  $(document).ready(function(){
  $("img.dropshadow")
  .wrap("<div class='wrap0'><div class='wrap1'><div class='wrap2'>" +
  "<div class='wrap3'></div></div></div></div>");
  });
 </script>
 </head>

 <body>
 <h1>Onion Skinned - With jQuery</h1>

 <p>First, the old-school, multiple divs hard coded into the html as seen on the <a href="http://www.p ></a>
 <div class="wrap0">
 <div class="wrap1">
    <div class="wrap2">
     <div class="wrap3">
      <img src="ball.jpg" alt="The object casting a shadow" />
     </div>
    </div>
 </div>
 </div>

 <p style="clear:both;">And now, the jQuery method, which uses javascript to wrap the image at runtime
       <img src="ball.jpg" class = "dropshadow" alt="The object casting a shadow" />
       <p>View the source of this page and you'll see the huge difference in markup!</p>
 </body>
 </html>

 

wrap可以自动生成包含指定Class的页面。。。

如本例将在:   <img src="ball.jpg" class = "dropshadow" alt="The object casting a shadow" /> 外面生成三个层。

三个层如下:

div class='wrap0'><div class='wrap1'><div class='wrap2'>  
  <div class='wrap3'>

 

</div></div></div></div>