学步园

当我看到这些实现圆角边框的HTML源代码的时候，我发现这很适合用来写一篇jQuery教程–使用wrap()、prepend()、append() 函数。

这里是原先的HTML代码，我们将从这里开始：

<div class="dialog"> 
  <div class="hd"> 
    <div class="c"></div> 
  </div> 
  <div class="bd"> 
    <div class="c"> 
      <div class="s"> 
        <main 
          content goes here > 
      </div> 
    </div> 
  </div> 
  <div class="ft"> 
    <div class="c"></div> 
  </div> 
</div>

现在我们怎么使用jQuery来精简这段代码呢？

首先，我们需要一个“钩子”，一个特殊的HTML元素，或者一个id，或者一个对象名–来告诉jQuery处理的目标。

现在我们改成了这个样子：

<div class=“roundbox”> <main content goes here > </div> 下一步，我们使用jQuery来将剩下的代码添加进去：

$(document).ready(function(){ $("div.roundbox") .wrap('<div 
class="dialog">'+ 
'<div class="bd">'+ 
'<div class="c">'+ 
'<div class="s">'+ 
'</div>'+ 
'</div>'+ 
'</div>'+ 

'</div>'); });

其他Div标记去哪里了？ 
仔细观察代码，你就会发现它们都跑到了js代码里面，在wrap函数执行时它们将嵌套在“钩子Div”的内部。 
细心的观众会发现我漏掉了部分代码。这是因为jQuery中的wrap()函数要求div标签必须严格对称嵌套才能工作。 
具体的，我去掉了下面两个部分： 
<div class="hd"><div class="c"></div></div> 
<div class="ft"><div class="c"></div></div>
添加和预置一体化 
下一步我们将会通过prepend和append函数将这两段代码添加进带有dialog对象名的div标记内部，并且使用“连锁”方法。 
$('div.dialog').prepend('<div class="hd">'+ 
'<div class="c"></div>'+ 
'</div>')
.append('<div class="ft">'+ 
'<div class="c"></div>'+ 
'</div>');
示例及代码 
我已经在网上放置了一个演示页面供大家查看。建议你看一下页面的源代码，体会jQuery给页面代码带来的清爽和便捷。 
这些代码来自 Schillmania的一篇文章，个人推荐大家下载包含点缀图片的zip打包，非常精美。 
不使用图片的圆角边框 
有很多方法可以实现圆角边框–有些方法甚至不需要图片。 
在jQuery的网站上有一个用来制作无图圆角边框的插件。虽然不是适合所有人（或者说所有程序），但也值得学习。 
看看它的漂亮代码吧（使用时）： 
$(document).bind("load", function(){ 
$("#box1").corner()
});