<!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. [Typescript] Generics using TypeScript

    In this lesson we cover the key reason why programming languages need generics. We then show how use ...

  2. Android百日程序：GridView实现相冊效果

    本章使用GridView控件来做一个相冊效果. 图片效果例如以下: 响应点击事件,点击的时候提示是当前第几章图片.从左到右,从上到下. 点击了第一张图片,显示了1. 步骤: 一 新建项目,然后把图片资 ...

  3. [SCSS] Organize SCSS into Multiple Files with Partials

    Tired of dealing with monolithic CSS files? Are requests for multiple CSS files hurting your perform ...

  4. React Native 开发环境安装和配置使用报错: -bash: react-native: command not found

    [React  Native 开发环境安装和配置:-bash: react-native: command not found 报错: 前提是安装homebrew,node.js ,npm ,watc ...

  5. 【codeforces 758B】Blown Garland

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  6. [React Native] Writing Platform-Specific Components for iOS and Android in React Native

    Learn to write components that render differently on iOS and Android, but present the same API. Firs ...

  7. Bootstrap3简单好用，轻松实现手机适配

    个人官网http://FansUnion.cn,前端使用Bootstrap框架.大部分的样式,轻松就实现了. 只是呢,关于导航条,被无数网友吐槽了.      通过手机访问时,导航条把屏幕给完全占居了 ...

  8. WPF实现射线效果动画

    原文:WPF实现射线效果动画 最近的一个项目中有个需求是:从一个点向其它多个点发出射线,要求这些射线同时发出,同时到达. 我就想到了用WPF的动画来实现.WPF中有Line类用于绘制直线,但这个类中好 ...

  9. BZOJ 4264 小c找朋友 - hash

    传送门 题目大意: 给定一张无向图,求满足以下条件的点对 (x,y) 数目:对任意点 z (z!=x,y),边 (x,z) 和 (y,z) 同时存在或同时不存在. 题目分析: 首先要分析的出如果xy满 ...

  10. 【a803】营救

    Time Limit: 10 second Memory Limit: 2 MB 问题描述 铁达尼号遇险了!它发出了求救信号.距离最近的哥伦比亚号收到了讯息,时间就是生命,必须尽快赶到那里.通过侦测, ...