Maison > Article > interface Web > Exemples d'utilisation de la méthode wrapInner() dans jQuery
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 |
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>
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 :
Paramètre |
Description |
fonction td>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>
语法三:
用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>
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!