您的位置：首页 > Web前端 > JQuery

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

2010-09-19 16:35 656 查看

源码：

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航