Heim > Artikel > Web-Frontend > Anwendungsbeispiele der Methode wrapInner() in jQuery
Anwendungsbeispiele der Methode wrapInner() in jQuery
- 巴扎黑Original
- 2017-06-24 14:13:211067Durchsuche
In diesem Artikel wird hauptsächlich die Verwendung der Methode „wrapInner()“ in jQuery vorgestellt. Er analysiert die Funktion und Definition der Methode „wrapInner()“ und zeigt anhand von Beispielen, wie man passende Elemente umschließt dazu
Das Beispiel in diesem Artikel beschreibt die Verwendung der Methode wrapInner() in jQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:
Diese Methode verwendet den angegebenen HTML-Inhalt oder das angegebene HTML-Element, um den passenden Elementinhalt zu umschließen.
Syntax 1:
Verwenden Sie das angegebene DOM-Element, um den Inhalt des passenden Elements zu umschließen.
Der Code lautet wie folgt:
$(selector).wrapInner(elem)
Parameterliste:
| Parameter |
Beschreibung |
| elem td>DOM-Element, das zum Umschließen des Ziels verwendet wird. |
Beispiel:
Der Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<head>
<title>脚本之家</title>
<style type="text/css">
p
{
width:200px;
height:200px;
border:1px solid blue;
}
p
{
width:150px;
height:150px;
border:1px solid red;
}
</style>
<script type="text/
javascript
" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(
document
).ready(function(){
$("button").click(function(){
$("p").wrapInner(document.createElement("p"));
});
});
</script>
</head>
<body>
<p>这是p的内容，将会被包裹</p>
<p>这是p的内容，将会被包裹</p>
<button>用p包裹每个段落</button>
</body>
</html>Syntax 2:
Verwenden Sie Funktion gibt das Element zurück, das zum Umschließen des Inhalts des übereinstimmenden Elements verwendet wird.
Der Code lautet wie folgt:
$(selector).wrapInner(function)
Parameterliste:
| Parameter |
Beschreibung |
| function td>Gibt eine Funktion zurück, die zum Umbrechen des Inhalts des übereinstimmenden Elements verwendet wird . |
实例:
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<head>
<title>脚本之家</title>
<style type="text/css">
p
{
width:200px;
height:200px;
border:1px solid blue;
}
p
{
width:150px;
height:150px;
border:1px solid red;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").wrapInner(function(){
return "<p></p>"
});
});
});
</script>
</head>
<body>
<p>这是p的内容，将会被包裹</p>
<p>这是p的内容，将会被包裹</p>
<button>用p包裹每个段落</button>
</body>
</html>语法三:
用html标记代码包裹匹配元素的内容。
代码如下:
$(selector).wrapInner(html)
参数列表:
实例:
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<head>
<title>脚本之家</title>
<style type="text/css">
p
{
width:200px;
height:200px;
border:1px solid blue;
}
p
{
width:150px;
height:150px;
border:1px solid red;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").wrapInner("<p></p>");
});
});
</script>
</head>
<body>
<p>这是p的内容，将会被包裹</p>
<p>这是p的内容，将会被包裹</p>
<button>用p包裹每个段落</button>
</body>
</html>Das obige ist der detaillierte Inhalt vonAnwendungsbeispiele der Methode wrapInner() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!