replaceWith，替换元素

replaceWith() 方法将选择的元素的内容替换为其他内容。

我们先在先看一个实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.51texiao.cn/" />

<title>无标题</title>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

       $("button").click(function(){

           $("p").replaceWith("<b>hello</b>");

           //将p元素里面的内容替换为"<b>hello</b>"

       });

    });

</script>

</head>

<body>

    <p>1111111111111111111111</p>

    <button>click</button>

</body>

</body>

</html>

可能很多朋友看不明白，下面我来一一介绍。

jQuery中，有一个强大的替换函数replaceWith()，使用非常简单，如：

页面有如下p标签

<body>

    <p>哈哈</p>

    <p>哈哈</p>

    <p>哈哈</p>

    <p>哈哈</p>

    <button>click</button>

</body>

把所有p标签替换为“##”

<script type="text/javascript">

    $(document).ready(function(){

       $("button").click(function(){

           $("p").replaceWith("##");

           //将p元素替换成##"

       });

    });

</script>

执行后的结果：

替换标签

利用这个replaceWith，我们可以把所有p标签替换为b标签，内容不变：

 $("button").click(function(){

          $('p').each(function(){

            $(this).replaceWith('<b>'+$(this).html()+'</b>')

          })

       });

结果

这就替换了！

多语言网站可以利用这个函数轻松完成

如果你开发的是一个多语言的网站，甚至可以利用这个特性，比如，在你需要翻译的文字上加上i标签，然后遍历翻译替换。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.51texiao.cn/" />

<title>无标题</title>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

      var translate={

        '苹果':'apple',

        '电脑':'PC'

      };

       $("button").click(function(){

          $('i').each(function(){

            $(this).replaceWith(translate[$(this).html()]);

          })

       });

    });

</script>

</head>

<body>

    <p><i>苹果</i></p>

    <p><i>电脑</i></p>

        <button>click</button>

</body>

</body>

</html>

replaceWith和replaceAll

相同点：他们二个都可以进行，查找替换

不同点：写法不同，反正我是没有发现，他们二个有什么功能上的不同。

jQuery的replaceWith()函数用法详解的更多相关文章

  1. SQL中CONVERT()函数用法详解

    SQL中CONVERT函数格式: CONVERT(data_type,expression[,style]) 参数说明: expression 是任何有效的 Microsoft® SQL Server ...

  2. php中setcookie函数用法详解(转)

    php中setcookie函数用法详解:        php手册中对setcookie函数讲解的不是很清楚,下面是我做的一些整理,欢迎提出意见.        语法:        bool set ...

  3. eval()函数用法详解

    eval()函数用法详解:此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,下面就介绍一下eval()函数的用法.语法结构: eval(str) 此函数可以接受一个字符串str作为参数, ...

  4. 转载 LayoutInflater的inflate函数用法详解

    http://www.open-open.com/lib/view/open1328837587484.html LayoutInflater的inflate函数用法详解 LayoutInflater ...

  5. delphi中Application.MessageBox函数用法详解

    delphi中Application.MessageBox函数用法详解 Application.MessageBox是TApplication的成员函数,声明如下:functionTApplicati ...

  6. C语言对文件的操作函数用法详解2

    fopen(打开文件) 相关函数 open,fclose 表头文件 #include<stdio.h> 定义函数 FILE * fopen(const char * path,const  ...

  7. C语言对文件的操作函数用法详解1

    在ANSIC中,对文件的操作分为两种方式,即: 流式文件操作 I/O文件操作 一.流式文件操作 这种方式的文件操作有一个重要的结构FILE,FILE在stdio.h中定义如下: typedef str ...

  8. python开发笔记之zip()函数用法详解

    今天分享一篇关于python下的zip()函数用法. zip()是Python的一个内建函数,它接受一系列可迭代的对象作为参数,将对象中对应的元素按顺序组合成一个tuple,每个tuple中包含的是原 ...

  9. thinkPHP内置字符串截取msubstr函数用法详解

    作者:陈达辉 字体:[增加 减小] 类型:转载 时间:2016-11-15 我要评论 这篇文章主要介绍了thinkPHP内置字符串截取函数用法,结合实例形式分析了thinkPHP内置的字符串截取函数功 ...

随机推荐

  1. paramiko-ssh-sftp实例

    import paramiko transport = paramiko.Transport(('192.168.71.136', 22)) transport.connect(username='r ...

  2. -bash: fork: retry: 没有子进程

    今天遇到一个问题 -bash: fork: retry: 没有子进程 解决方法 设置各linux 用户的最大进程数,下面我把某linux用户的最大进程数设为10000个:   ulimit -u 10 ...

  3. O048、掌握 cinder-scheduler 调度逻辑

    参考https://www.cnblogs.com/CloudMan6/p/5589707.html   上一节我们详细讨论了cinder-api 和 cinder-volume ,今天讨论另一个重要 ...

  4. XVS 操作

    1. xvs安装   rpm -i  ***.rpm 2.获取license root@ubuntu:/usr/local/xvs# ./xvs -L .Host ID: 16b3d720584704 ...

  5. day06 Python class基础篇

    一.目录 1.类与对象的概述 2.封装 3.继承 4.多态 5.类的成员 6.类与类之间的关系 7.私有 二. 内容讲解 一.类与对象的概述 类是对一系列具有相同属性的事物的抽象,相同于设计图纸,而对 ...

  6. 1 sql server 中cursor的简介

    1.游标的分类 游标共有3类:API服务器游标.Transaction-SQL游标和API客户端游标. 2 API服务器cursor共有如下几种 静态游标的完整结果集将打开游标时建立的结果集存储在临时 ...

  7. element-ui Cascader 级联选择器 点击label选中

    通过修改label的样式解决: 注意:el-cascader-panel 是直接挂载在body上的,所以需要全局设置 .el-cascader-panel .el-radio{ width: 100% ...

  8. 非JAVA WEB项目提供Http接口调用实现

    package com.monitor.app.utils; import com.alibaba.fastjson.JSON; import com.google.gson.Gson; import ...

  9. Ubuntu下编译boost for Android

    下载https://github.com/moritz-wundke/Boost-for-Android 解压后进入目录 运行 ./build-android.sh $(NDK_ROOT) NDK_R ...

  10. 如何使用ProcessOn制作思维导图

    新建一张思维导图之后你是不是有点茫然? 不是因为脑海里没思路,而是不知道怎么把脑海里的思路呈现出来?看到一个孤零零的中心主题和看起来有些简单的页面一时间有点无所适从? 很多人觉得思维导图好看但学起来难 ...