15 Days of jQuery(Day 5)-懒人用Jquery生成的HTML

这个让我们轻松的纪念日已经到来–我恨我在计算机前已经花了48个小时，我希望能够有另外一个jQuery来结束我的噩梦，并且让我上网更快。

当我一边“在用Jquery方法编写”和一边“进行复杂的文件上传”，我已经筋疲力尽。然而这两种操作的代码是一种较浅的，它只不过是你才刚刚开始解决的一些简单问题。

所以下来我开始介绍：

尽管我在我的网站用所有的CSS样式表去进行表格设计（也许这要花费两年半的时间或者更多），我已经用了很多我能找到的在这方面的信息。回到2004年5月(古代史)A list a part有一篇《关于创建阴影的伟大教程(洋葱皮投影)》可以应用到任何图片,无论尺寸多大.

那片文章的应经不能再评论了,但还是有些人希望能够再出篇教程.

问题

一些css工程师用一些”不相干”的标记,就是为了使背景图片能够应用到每一个元素上.例如:

这里是A list a part用到的代码:

   <div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<img src="object.gif" alt="The object casting a shadow" />
</div>
</div>
</div>

所有这些divs充当一个给图片添加投影效果的”钩子”.这不见得好,我们可以把源代码精简成这样:

   <img src="object.gif" class="dropshadow" alt="The object casting a shadow" />

按着这个思路…

目标

在这里,我要想你展示如何用jQuery轻而易举的将多于的标记从你的源代码中剔除.运用这个方法,让你的代码更加干净(更重要的是)将使以后变换布局容易的多.

解

这里,看看jQuery是如何击退这个问题的.

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

图片就可以保持这样了:

   <img src="object.gif" class="dropshadow" alt="The object casting a shadow" />

仔细看看

$(document).ready() 是jQuery版的window.onload()

$(“img.dropshadow”) 告诉jQuery找到带有class=“dropshadow”的图片,如果你想用一个id你可以这样: $(“img#dropshadow”)wrap() (wrap() tells jQuery to use the DOM (Document Object Method Model) to wrap the images with the class=”dropshadow” in the html inside the parenthesis. )

最后的结果

傻乎乎的图片,但是和original Onion Skinned Drop Shadows用的是一样的.

   <!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="jquery.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.ploughdeep.com/onionskin/360.html">orignial article</a>:</p>
<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:</p>
     <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>

jQuery和其它解决方法的比较

jQuery的网站上有一个到Ajaxian网站的链接,那里有用另外一个javascrip库创建的Onion Skin Drop Shadow ,我相信他的代码复杂程度和代码量现在看来自不待言.我宁愿使用jQuery.(怎么?你猜到了..)

平心而论,没有一个库是对于每一个工作或每一段代码都是合适的.本教程不是为了证明jQuery是一切javascrip类库中的老大. 试试Prototype, Scriptaculous, YUI, Rico, Behaviour, Moo.fx 和 the dozens 或者其它的.如果你找到了一个你用起来比较顺手的,那就去用它吧.

jQuery对于我来说只是一个工具.我只是希望这个教程能够提供给你更多使用它的方法.

有关jQuery的工具

jQuery用难以置信的简单来操作DOM. 你应该花些时间看看jQuery能用来做什么,用下append(), prepend(), before(), after(), html(), and remove().

来自jQuery Docs

wrap(String html)

把所有匹配的元素用其他元素的结构化标记包装起来。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。

这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。

当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包装完成之后再行添加。

示例:

   $("p").wrap("<div class='wrap'></div>");

HTML

   <p>Test Paragraph.</p>

结果

   <div class='wrap'><p>Test Paragraph.</p></div>

玄机博客

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。