JavaScript Tutorial/jQuery/wrap
Содержание
- 1 30. Wrap a new b around all of the paragraphs.
- 2 30. Wrap another tag
- 3 30. wrap(elem): Wrap each matched element with the specified element.
- 4 30. wrap(html): injecting additional structure into a document
- 5 30. Wrap p with div tag
- 6 30. Wrap tag created by document.createElement
- 7 30. Wrap to create and add a border
30. Wrap a new b around all of the paragraphs.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").wrap("<b></b>");
});
</script>
</head>
<body>
<body>
<b>asdf</b>
<p>asdf: </p>
</body>
</html>
30. Wrap another tag
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").wrap("<div>asdf</div>");
});
</script>
</head>
<body>
<body>
<p>a</p><div id="foo">b</div>
</body>
</html>
30. wrap(elem): Wrap each matched element with the specified element.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").wrap(document.createElement("b"));
});
</script>
</head>
<body>
<body>
<b>asdf</b>
<p>asdf: </p>
</body>
</html>
30. wrap(html): injecting additional structure into a document
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").wrap("<b></b>");
});
</script>
</head>
<body>
<body>
<b>asdf</b>
<p>asdf: </p>
</body>
</html>
30. Wrap p with div tag
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("p").wrap("<div></div>");
}
);
</script>
<style type="text/css">
h4, p {
margin: 5px;
}
div {
background: #fedd58;
border: 1px solid #ebcb49;
margin: 3px;
}
</style>
</head>
<body>
<p>
asdf
</p>
</body>
</html>
30. Wrap tag created by document.createElement
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("p").wrapAll(document.createElement("div"));
}
);
</script>
<style type="text/css">
h4, p {
margin: 5px;
}
div {
background: #70d6f0;
border: 3px solid #7ac3d5;
margin: 3px;
}
</style>
</head>
<body>
<p>
asdf
</p>
</body>
</html>
30. Wrap to create and add a border
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").wrap("<div></div>");
});
</script>
<style>
div { border: 2px solid blue; }
</style>
</head>
<body>
<body>
<p>Hello</p>
</body>
</html>