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. nginx部署vue前端，刷新出现404或者500错误的解决方案

    在nginx配置文件的server下加上 try_files $uri $uri/ /index.html; 不加的话是404,路径错误是500,这里的路径只要照着/index.html就行,不用加上 ...

  2. Codeforces 1237F. Balanced Domino Placements

    传送门 很妙的题 首先先考虑一个简化的问题,现在有一行格子让你填 你要么填一格 要么填两格 有的格子不让你填 问你填了 $a$ 个一格和填了 $b$ 个两格有多少种方案 那么显然先只考虑放两格的方案, ...

  3. [多平台]pymo – 手机上的 GalGame 引擎

    [多平台]pymo – 手机上的 GalGame 引擎 介绍下这个能在手机上玩移植 GalGame 的游戏引擎,不知道有多少人听过呢?相信如果有喜欢在手机上玩 GalGame 的同学肯定听过类似的东西 ...

  4. 安装jenkins时出现 No such plugin: cloudbees-folder的解决办法

    今天安装了一下jenkins,在初始化安装插件时出现" No such plugin: cloudbees-folder"错误,根据网上的教程: 1.打开链接"http: ...

  5. 在Windows平台上运行Tomcat

    从之前的学习中知道,可以调用Bootstrap类将Toomcat作为一个独立的应用程序来运行,在Windows平台上,可以调用startup.bat批处理文件来启动Tomcat,或运行shutdown ...

  6. 【原创】大叔经验分享（73）scala akka actor

    import java.util.concurrent.{ExecutorService, Executors, TimeUnit} import akka.actor.{Actor, ActorSy ...

  7. 服务端相关知识学习（四）之Zookeeper启动过程

    在上一篇,我们了解了zookeeper最基本的配置,也从中了解一些配置的作用,那么这篇文章中,我们将介绍Zookeeper的启动过程,我们在了解启动过程的时候还要回过头看看上一篇中各个配置参数在启动时 ...

  8. shiro学习（五、springboot+shiro+mybatis+thymeleaf）

    入门shiro(感觉成功了)首先感谢狂神,然后我就一本正经的复制代码了 项目结构 运行效果 数据库 <dependencies> <!-- thymeleaf-shiro整合包 -- ...

  9. 高德地图API-设置考勤范围

    <template> <div class="page-setting-setgps"> <!--head--> <div class=& ...

  10. ES6入门四：对象字面量扩展与字符串模板字面量

    简洁属性与简洁方法 计算属性名与[[prototype]] super对象(暂时保留解析) 模板字面量(模板字符串) 一.简洁属性与简洁方法 ES6中为了不断优化代码,减低代码的耦合度在语法上下了很大 ...