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.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").wrap(""); }); </script> </head> <body> <body> asdf
asdf:
</body>
</html></source>
30. Wrap another tag
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){$("p").wrap("
asdf
");
}); </script> </head> <body> <body>
a
b
</body>
</html></source>
30. wrap(elem): Wrap each matched element with the specified element.
<source lang="javascript">
<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> asdf
asdf:
</body>
</html></source>
30. wrap(html): injecting additional structure into a document
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").wrap(""); }); </script> </head> <body> <body> asdf
asdf:
</body>
</html></source>
30. Wrap p with div tag
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript">
$(document).ready(
function() {$("p").wrap("");
}
);
</script> <style type="text/css">
h4, p {
margin: 5px;
} div {
background: #fedd58; border: 1px solid #ebcb49; margin: 3px;
}
</style> </head> <body>
asdf
</body>
</html></source>
30. Wrap tag created by document.createElement
<source lang="javascript">
<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>
asdf
</body>
</html></source>
30. Wrap to create and add a border
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){$("p").wrap("");
}); </script> <style> div { border: 2px solid blue; } </style> </head> <body> <body>
Hello
</body>
</html></source>