<!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. [Compose] 12. Two rules about Funtors

    We learn the formal definition of a functor and look at the laws they obey. Any Functor should follo ...

  2. Android.app.SuperNotCalledException错误

    - ::): FATAL EXCEPTION: main - ::): android.app.SuperNotCalledException: Activity {com.solar/com.sol ...

  3. Linux开发环境搭建与使用系列教程

    00.Linux开发环境搭建与使用1——Linux简史 01.Linux开发环境搭建与使用2——Linux系统(ubuntu)安装方案 02.Linux开发环境搭建与使用3——通过虚拟机安装系统(ub ...

  4. lower_case_table_names（大小写敏感）

    1 简介    在MySQL中,数据库对应数据目录中的目录.数据库中的每个表至少对应数据库目录中的一个文件(也可能是多个,取决于存储引擎).因此,所使用操作系统的大小写敏感性决定了数据库名和表名的大小 ...

  5. 【t075】郁闷的记者

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 你是一个体育报社的记者,你接受到一个艰难的任务:有N支足球队参加足球比赛,现在给你一些比赛的结果,需要 ...

  6. C++网络编程方面的开源项目

    Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的性能,最多可以模拟3万个并发连接去测试网站的负载能力. ...

  7. activiti自己定义流程之整合（五）：启动流程时获取自己定义表单

    流程定义部署之后,自然就是流程定义列表了,但和前一节一样的是,这里也是和之前单独的activiti没什么差别.因此也不多说.我们先看看列表页面以及相应的代码,然后在一步步说明点击启动button时怎样 ...

  8. 安装 Visual Studio，连接中国区 Azure

    中国数据中心 目前,中国区 Azure 有两个数据中心,在位置字段中显示为“中国北部”和“中国东部”. 在 Azure 上创建应用程序的区别 在中国区 Azure 上开发应用程序与在境外 Azure ...

  9. Windows下启动ActiveMq端口被占用的解决办法

    cd /D E:\RuntimeSoft\apache-activemq-5.11.0\binactivemq.bat start结果提示:端口号被占用. Windows下查看端口号被占用开始--运行 ...

  10. 小强的HTML5移动开发之路（32）—— JavaScript回顾7

    BOM模型brower object model(浏览器对象模型),通过浏览器内置的一些对象可以操作浏览器本身. DOM是用来操作页面的,BOM是用来操作浏览器本身的. BOM是没有规范的,但是大部分 ...