《15天jQuery入门教程》第五天：让jQuery生成HTML代码

　　周末的烈士纪念日即将结束 - 我已经离开电脑长达48个小时，现在我想再发布一个在线jQuery入门教程。

　　我非常想写关于“以jQuery的方式在在同一页面无刷新编辑内容”和“多文件上传的魔力”的文章(译者注：其实就是利用AJAX技术的话题)，但是关于这两个主题的代码有一些难度，现在开始我还是应该还是做一些相对简单的教程。

　　让我们开始吧!

　　在CSS的帮助下，我们的网站已经从用表格布局的困境中解脱出来(到现在也快两年多了)，我想现在可以找到关于这个主题的所有信息。

　　追溯到2004年的五月(远古时代)的A List Apart (译者注：网站名)，其中有一篇题为 great tutorial on creating drop shadows (Onion Skinned Drop Shadows) (译者注：《关于创建阴影效果的教程(洋葱皮阴影效果)》)，针对任意大小图片处理的文章。

　　这篇文章当时的评论可能已经无法获得，但他们中的一些和作者在教程的一开始就产生了强烈的共鸣。　　

　　问题

　　一些CSS技术需要“多余的”标记，因为目前每个元素只能作用一个背景图片。

　　例如：

　　下面是A List Apart教程中用的html代码：　　

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

　　所有这些div元素作为背景图片的钩子，从而实现了阴影效果。

　　但如果我们能将源代码缩减成下面这样不是更好吗：　　

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

　　为了实现这个目标，我们开始...

　　目标

　　我将为你展示运用jQuery从html源代码中移除多余标记是多么简单的事情，使用这种方法能让你的代码更干净简洁(更重要的是)将使得未来改变布局更加易于实现。

　　解决方案

　　下面介绍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找出从所有img元素中筛选类名为dropshadow的元素，如果你希望用id号来代替，那么代码将变成这样$("img#dropshadow")。

　　wrap()告诉jQuery使用DOM(文件对象模型)创建挂号内的html代码包围类名为dropshadow的img元素。

　　最终的结果

　　html中仅仅是img元素，但其效果和原版的洋葱皮阴影效果完全相同：

　　jQuery Drop Shadow Example(jQuery阴影效果演示)

　　比较jQuery方案和其他方案

　　从jQuery站点我们可以找到一个到Ajaxian站点的链接，这是又一个javascript库，用于实现洋葱皮阴影效果。我认为其大量的代码和代码的复杂性可以说明一切，个人来说，我更喜欢jQuery的简单。(你已经猜到了，是吧，呵呵?)

　　公平点说，没有一个库能够完美的实现每一项工作，这个教程也并非用以说明jQuery是真正万能的javascript库。

　　试试Prototype,Scriptaculous,YUI,Rico,Behaviour,Moo.fx以及很多其他的库。你会找到适合于自己的，然后决定用他。

　　jQuery是对我来讲是一个很好的工具，我希望这篇教程向你展示了其更加有用的方面。

　　相关的jQuery工具

　　jQuery允许你及其方便地通过客户端浏览器来生成html代码。

　　你应该花点时间看看在jQuery中如何使用 append(), prepend(), before(), after(), html(), remove()等方法。

　　Meatier Tutorials On the Way

　　因为一些困难，今天我只提及了一两点内容。但这也不错，因为即使概念很简单，这些在你的设计和编程过程中很多情况下都能用到，很实用。

　　除此之外，不考虑阅读教程的人很多是初学者的问题，发布这篇教程的时候，我正在佛罗里达州的阳光海滩上，脚上还沾满了沙子。

　　不过请放心，在《15天jQuery入门》即将结束的时候，你将看到一些更高级的应用教程，范例和代码。