zoukankan      html  css  js  c++  java
  • 包裹节点

    包裹节点

     
    语法格式 参数说明 功能描述
    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

    结果如下图所示:

    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    批处理(bat)的一些记录
    在 Docker 中已运行的 container 如何修改 run 时的 env
    Linux 的一些命令记录
    Javascript aop(面向切面编程)之around(环绕)
    dojo Provider(script、xhr、iframe)源码解析
    dojo/request模块整体架构解析
    require、module、exports dojo中的三个特殊模块标识
    CSS垂直居中总结
    Javascript图片裁切
    CSS Font知识整理总结
  • 原文地址:https://www.cnblogs.com/baixc/p/3387721.html
Copyright © 2011-2022 走看看