Exemples d'utilisation de la méthode wrapInner() dans jQuery-js tutoriel-php.cn

Exemples d'utilisation de la méthode wrapInner() dans jQuery

巴扎黑

Libérer： 2017-06-24 14:13:21

original

1103 Les gens l'ont consulté

Cet article présente principalement l'utilisation de la méthode wrapInner() dans jQuery. Il analyse la fonction et la définition de la méthode wrapInner() et les compétences d'utilisation pour envelopper les éléments correspondants avec des exemples. à cela

L'exemple de cet article décrit l'utilisation de la méthode wrapInner() dans jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Cette méthode utilise le contenu ou l'élément HTML spécifié pour envelopper le contenu de l'élément correspondant.

Syntaxe 1 :

Utilisez l'élément DOM spécifié pour envelopper le contenu de l'élément correspondant.

Le code est le suivant :

$(selector).wrapInner(elem)

Liste des paramètres :

Paramètre

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

Description

elem td>Élément DOM utilisé pour envelopper 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;
   }
   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>

Copier après la connexion

Syntaxe 2 :

Utiliser Fonction renvoie l'élément utilisé pour envelopper le contenu de l'élément correspondant.

Le code est le suivant :

$(selector).wrapInner(function)

Liste des paramètres :

< span style="font-size:12px;word-wrap: break-word">Paramètre

参数	描述
function	返回用于包裹匹配元素内容的函数。

Description<🎜>

fonction<🎜>< td width="500" style="bordure inférieure : rgb(227 237 245) 1px solide ; bordure gauche : rgb(227 237 245) 1px solide ; rembourrage inférieur : 4 px ; rembourrage gauche : 4 px ; rembourrage droit : 4px ; mot -wrap : mot de rupture ; taille de police : 14 px ; débordement : caché ; bordure supérieure : rgb(227 237 245) 1px solide ; span style= "font-size:12px;word-wrap: break-word">Renvoie une fonction utilisée pour envelopper le contenu de l'élément correspondant . <🎜><🎜>

实例:

代码如下:

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

Copier après la connexion

语法三:

用html标记代码包裹匹配元素的内容。

代码如下:

$(selector).wrapInner(html)

参数列表:

参数	描述
html	用于包裹匹配元素内容的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>

Copier après la connexion

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!