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. B2C电商平台开发心得（asp.net+bootstrap）

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 html.css.javascript的,专为 web 应用设计,包含了移动设备优先的样式, 其响应式 ...

  2. JavaScript例子1-给网页中所有<p>元素添加onclick事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. js多语言切换demo

    网站为了国际化的需要,会使用到语言包,案例如下图. 这次尝试用js来打语言包,用到了插件 jquery.i18n.properties ,很明显,使用这个插件需要先加载jquery. 代码布局结构   ...

  4. Tomcat面试题汇总

    详见:Tomcat 面试题汇总:https://blog.csdn.net/qq_25934401/article/details/81536958 1.Tomcat的缺省端口是多少,怎么修改? to ...

  5. php三种排序算法

    1. <?php /** * 快速排序不费空间也节省时间 */ $arr=array(5,1,8,2,6,4,9,3,7); // $arr=array(1,2,3,4,5,6,7,8,9); ...

  6. JavaWeb【JSTL】

    根据JSTL标签所提供的功能,可以将其分为5个类别. 核心标签 格式化标签 SQL 标签 XML 标签 JSTL 函数 使用方式 1.下载包 地址:http://archive.apache.org/ ...

  7. Delphi 画笔

    樊伟胜

  8. 2.LVS的三种工作模式_NAT模式

    1.LVS的三种工作模式 1)VS/NAT模式(Network address translation) 2)VS/TUN模式(tunneling) 3)DR模式(Direct routing) 1. ...

  9. cubase 使用冻结功能 节省电脑资源

  10. axios 请求多个接口

    axios.all([ axios.get('https://api.github.com/xxx/1'), axios.get('https://api.github.com/xxx/2') ]) ...