<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<meta charset="utf-8" />
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {
                //每对p标签都会用font标签包裹
                //$('div p').wrap('<font color="blue" size="7" face="全新硬笔行书简"></font>');

                //所有的p标签都被一对font标签包裹
                //$('div p').wrapAll('<font color="blue" size="7" face="全新硬笔行书简"></font>');

                //把p标签的文字内容用font包裹起来，但是p标签在外面
                $('div p').wrapInner('<font color="blue" size="7" face="全新硬笔行书简"></font>');
            })
        })
    </script>
</head>
<body>
    <input type="button" name="name" value="btn" id="btn"/>
    <div>
        <p>这是p</p>
        <p>这也是p</p>
    </div>
</body>
</html>

jquery 包裹标签的更多相关文章

  1. jQuery 浮动标签插件，帮助你提升表单用户体验

    浮动标签模式(Float Label Pattern)是最新流行的一种表单输入域的内容提示方式,当用户在输入框输入内容的时候,原先占位符的内容向上移动,显示在输入的内容的上面.这里推荐的这款 jQue ...

  2. jQuery包裹节点用法完整示例

    本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...

  3. jquery实战---标签页效果

    在前面的博客中,小编主要简单的介绍了jquery的一些基本知识,今天这篇博文,小编继续来学习jquery的相关知识,今天我们来学习一个标签页的小例子,相关源码小编已经上传,有需要的小伙伴可以自己去下载 ...

  4. jQuery对标签、类样式、值、文档、DOM对象的操作

    jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...

  5. jQuery操作标签

    jQuery操作标签 样式操作: 对标签的样式进行修改,那么操作样式的方法是什么? 样式类: addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名 ...

  6. jquery教程-Jquery 获取标签个数 size()函数用法

    jquery教程-Jquery 获取标签个数 size()函数用法,size() 方法返回被 jQuery 选择器匹配的元素的数量. 语法 $(selector).size()     jQuery ...

  7. JavaScript和jQuery改变标签内容

    HTML: <div id="mazey">content</div> JavaScript: var mazey=document.getElementB ...

  8. jquery遍历标签中自定义的属性方法

    在开发中我们有时会对html标签添加属性,如何遍历处理 <ul> <li name="li1" sortid="nav_1">aaaaa ...

  9. JQuery查找标签

    JQuery查找标签 一.基本标签 1 id选择器: $("#id(名称)") $("#cent") 2 标签选择器: $("tabName(便签名称 ...

随机推荐

  1. js进阶正则表达式13RegExp对象方法（RegExp对象的方法：compile，test，exec）（子表达式 var reg1=/([a-z]+)\d/）

    js进阶正则表达式13RegExp对象方法(RegExp对象的方法:compile,test,exec)(子表达式 var reg1=/([a-z]+)\d/) 一.总结 1.RegExp对象有三个方 ...

  2. ajax传递list集合

    原文链接:https://blog.csdn.net/qq_37936542/article/details/79277495 一:ajax传递List<String>类型的数据 js代码 ...

  3. [NPM] Use a shorthand syntax for running multiple npm scripts with npm-run-all

    Running multiple scripts in series or in parallel can become very verbose. Using a tool such as npm- ...

  4. [自学AndroidStudio系列]第二篇章:高速上手AS小技巧其一

    事实上看过第一篇的文章的人可能发现了,这个系列实际上是针对,有android开发经验的,之前使用Eclipse的开发人员;所以,避免无谓的口舌,直接进入说重点吧; 关闭项目自己主动打开 AS会自己主动 ...

  5. AndroidClipSquare安卓实现方形头像裁剪

    安卓实现方形头像裁剪 实现思路.界面可见区域为2层View 最顶层的View是显示层,主要绘制半透明边框区域和白色裁剪区域,代码比較easy. 第二层继承ImageView,使用ImageView的M ...

  6. 【BZOJ 1021】[SHOI2008]Debt 循环的债务

    [题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1021 [题意] [题解] 设f[i][j][k]表示前i种面值的钱币; 第一个人当前的 ...

  7. Swagger 专题

    随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染.前后端分离的形态,而且前端和后端在各自的技术道路上越走越远. 前端和后端的唯一联系,变成了API接口:API文档成了前后端 ...

  8. 利用WPF建立自己的3d gis软件（非axhost方式）（三）矢量数据显示控制

    原文:利用WPF建立自己的3d gis软件(非axhost方式)(三)矢量数据显示控制 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bPew 密 ...

  9. [android]完美的解决方案ListView加载网络图片反弹问题

    为什么 先说为什么有照片反弹. 使用convertView对ListView的每一个item优化,item的复用能够有效减少内存的占用.使ListView滑动更为流畅. 但会带来一个问题,当最顶部的i ...

  10. npm与cnpm混用导致的问题

    npm和cnpm混用之后,再用npm升级模块导致如下错误: 解决办法: 删除node_modules文件下的文件后,重新执行npm install