Maison > Article > interface Web > Explication détaillée des exemples d'utilisation de la méthode wrapAll() dans jQuery

Explication détaillée des exemples d'utilisation de la méthode wrapAll() dans jQuery

巴扎黑original: 2017-06-24 14:04:201125parcourir

Cet article présente principalement l'utilisation de la méthode wrapAll() dans jQuery. Il analyse la fonction, la définition et les compétences d'utilisation des éléments correspondants avec des exemples. Les amis dans le besoin peuvent se référer à

Cet article explique les exemples Apprendre. comment utiliser la méthode wrapAll() dans jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Cette méthode enveloppe tous les éléments correspondants avec un seul élément.
Bien que cette méthode ait des fonctions similaires à la méthode wrap(), il existe de grandes différences. La méthode wrap() correspondra une fois à chaque élément correspondant.

Syntaxe 1 :

Enveloppez l'élément correspondant avec l'élément DOM spécifié.

Le code est le suivant :

$(selector).wrapAll(elem)

Liste des paramètres :

Description

Paramètres

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

elem

Utilisé pour l'élément DOM qui enveloppe la cible.

Exemple :

Le code est le suivant :

<!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>

Syntaxe 2 :

Envelopper la correspondance avec des éléments de code de balise html.

Le code est le suivant :

$(selector).wrapAll(html)

Liste des paramètres :

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

Exemple :

Le code est le suivant :

<!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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'utilisation de la fonction jQuery.wrapAll()Article suivant：Explication détaillée de l'utilisation de la fonction jQuery.wrapAll()

Articles Liés

Voir plus