suchen

Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erläuterung der Anwendungsbeispiele der Methode wrapAll() in jQuery

Ausführliche Erläuterung der Anwendungsbeispiele der Methode wrapAll() in jQuery

巴扎黑
巴扎黑Original
2017-06-24 14:04:201129Durchsuche

Dieser Artikel stellt hauptsächlich die Verwendung der Methode „wrapAll()“ in jQuery vor. Er analysiert die Funktion, Definition und Verwendungsfähigkeiten passender Elemente anhand von Beispielen.

In diesem Artikel werden die Beispiele erläutert wie man die Methode wrapAll() in jQuery verwendet. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Diese Methode umschließt alle übereinstimmenden Elemente mit einem einzigen Element.
Obwohl diese Methode ähnliche Funktionen wie die Methode wrap() hat, gibt es große Unterschiede. Die Methode wrap() gleicht jedes übereinstimmende Element einmal ab.

Syntax 1:

Umschließen Sie das passende Element mit dem angegebenen DOM-Element.

Der Code lautet wie folgt:

$(selector).wrapAll(elem)

Parameterliste:

Beschreibung
Parameter
参数 描述
elem 用于包裹目标的DOM元素。
elem Wird für das DOM-Element verwendet, das das Ziel umschließt.

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;
       
margin-top
:10px;
    }
</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").wrapAll(document.getElementById("content"));
        });
    });
</script>
</head>
<body>
    <p>我是个段落</p>
    <p>我是个段落</p>
    <p id="content"></p>
    <button>用p包裹每个段落</button>
</body>
</html>

Syntax 2:

Wrap the match mit HTML-Tag-Codeelementen.

Der Code lautet wie folgt:

$(selector).wrapAll(html)

Parameterliste:

参数 描述
elem 用于包裹目标的DOM元素。

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">
    .content
   {
        width:200px;
        height:200px;
        border:1px solid blue;
    }
</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").wrapAll("<p class=&#39;content&#39;></p>");
        });
    });
</script>
</head>
<body>
   <p>这是个段落</p>
   <p>这是个段落</p>
   <button>用p包裹每个段落</button>
</body>
</html>


Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Anwendungsbeispiele der Methode wrapAll() in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Verwendung der jQuery.wrapAll()-FunktionNächster Artikel：Detaillierte Erläuterung der Verwendung der jQuery.wrapAll()-Funktion

In Verbindung stehende Artikel

Mehr sehen