jQuery教程（九）使用java script（jQuery）實現圓角邊框

當我看到這些實現圓角邊框的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()});