• 包裹节点


    包裹节点

     
    语法格式 参数说明 功能描述
    wrap(html) html参数为字符串代码,用于生成元素并包裹所选元素 把所有选择的元素用其他字符串代码包裹起来
    wrap(elem) elem参数用于包装所选元素的DOM元素 把所有选择的元素用其他DOM元素包装起来
    wrap(fn) fn参数为包裹结构的一个函数 把所有选择的元素用function函数返回的代码包裹起来
    unwrap() 无参数 移除所选元素的父元素或包裹标记
    wrapAll(html) html参数为字符串代码,用于生成元素兵包裹所选元素 把所有选择的元素用单个元素包裹起来
    wrapAll(elem) elem参数用于包装所选元素的DOM元素 把所有选择的元素用单个DOM元素包裹起来
    wrapInner(html) html参数为字符串代码,用于生成元素并包裹所选元素 把所遇选择的元素的子内容(包括文本节点)用字符串代码包裹起来
    wrapInner(elem) elem参数用于包装所选元素的DOM元素 把所有选择的元素的子内容(包括文本节点)用DOM元素包裹起来
    wrapInner(fn) fn参数为包裹结构的一个函数 把所有选择的元素的子内容(包括文本节点)用function函数返回的代码包裹起来

     

     

     

     

     

     

     

     

     

     

     

     

     

    在上述表格中,  wrap(html)    wrapInner(html)  方法较为常用,前者包裹外部元素,后者包裹内部元素的文本字符。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
     5 <title>jQ包裹节点</title>
     6 <style>
     7     body{font-style: 12px;}
     8     p{background-color: #eee;padding: 5px;width: 200px;}
     9 </style>
    10 <script type="text/javascript" src="jquery-1.8.3.js"></script>
    11 <script>
    12     $(function(){
    13         $("p").wrap("<b></b>");        //所有段落标记字体加粗
    14         $("span").wrapInner("<i></i>");        //所有段落中的span标记斜体
    15     });
    16 </script>
    17 </head>
    18 <body>
    19     <p>最喜爱的体育运动:<span>羽毛球</span></p>
    20     <p>最爱看哪类型图书:<span>网络、技术(纯忽悠,分明是玄幻小说)</span></p>
    21 </body>
    22 </html>
    View Code

    结果如下图所示:

    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    JavaScript中对事件简单的理解
    正则表达式 RE模块
    模块
    面向对象进阶
    元类详细解释
    四.面向对象和函数补充
    四.函数
    Python的基础知识:
    五层协议及tcp三次握手四次挥手
    nginx常见错误
  • 原文地址:https://www.cnblogs.com/baixc/p/3387721.html
Copyright © 2020-2023  润新知