Jquery tutorial (9) using Java Script (jquery) to implement a rounded border

When I see these htmlSource codeI found this is suitable for writing a jquery tutorial-using the wrap (), prepend (), and append () functions.

Here is the original htmlCode, We will start from here:

<DivClass="Dialog"> <DivClass="HD"> <DivClass="C"> </Div> <DivClass="BD"> <DivClass="C"> <DivClass="S"> <Main content goes here> </div> <DivClass="Ft"> <DivClass="C"> </Div>
 

How can we use jquery to streamline this code?

First, we need a "Hook", a special HTML element, an ID, or an object name-to tell jquery's processing target.

Now we have changed it to the following:

<Div class = "roundbox"> <main content goes here> </div> next, we use jquery to add the remaining code:

 
$(Document).Ready(Function(){$("Div. roundbox").Wrap('<Div class = "dialog">'+'<Div class = "BD">'+'<Div class = "C">'+'<Div class = "S">'+'</Div>'+'</Div>'+'</Div>' +
 

 '</Div>'  ) ; } ) ;
 
 
 
Where are other Div tags? 
 
 
When you carefully observe the code, you will find that they all go to the JS Code. When the wrap function is executed, they will be nested inside the "hook Div.
 
 
A careful audience will find that I have missed some code. This is because the wrap () function in jquery requires that DIV labels must be strictly symmetric and nested to work.
 
 
Specifically, I removed the following two parts:
 
 
<DivClass="HD"> <DivClass="C"> </Div> <DivClass="Ft"> <DivClass="C"> </Div>
 
 
Integration of adding and preset 
 
 
In the next step, we will use the prepend and append functions to add these two pieces of code to the DIV tag with the dialog Object Name, and use the "chained" method.
 
$('Div. Dialog').Prepend('<Div class = "HD">'+'<Div class = "C"> </div>'+'</Div>').Append('<Div class = "ft">'+'<Div class = "C"> </div>'+'</Div>');
 
 
Example and code 
 
 
I have placed a demo page on the Internet for you to view. We recommend that you take a look at the source code of the page to understand the freshness and convenience that jquery brings to the page code.
 
 
These codes are from an article by schillmania. I personally recommend you download a zip package containing dotted images, which is very exquisite.
 
 
Do not use the rounded border of the image 
 
 
There are many ways to achieve rounded border-some methods do not even require images.
 
On the jquery website, there is a plug-in used to create a border with no rounded corners. Although not suitable for everyone (or allProgram), But it is worth learning.
 
 
Let's take a look at its pretty code (in use ):
 
 
$(Document).Bind("Load", Function(){$("# Box1").Corner()});