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. Centos7 系统启动docker报错 inotify add watch failed

    环境说明: 最近新装的系统启动docker报错,之前没有遇到过.(之前都是系统直接启动,新装机器无报错的情况) 当时排查了很久没找到问题在哪,观察报错信息如下: 提示表文件失败,没有这个文件或者目录. ...

  2. 【其他】BootCDN

    BootCDN 稳定.快速.免费的前端开源项目 CDN 加速服务 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务,致力于为 Bootstrap.jQuery.Angular. ...

  3. 使用JavaFX开发桌面程序（一）

    使用JavaFX开发桌面程序 注:我也是JAVA FX的初学者之一,自己在学习的时候踩了许多的坑,中文英文的资料查了不少,但是觉得FX技术和其他热门技术相比,教程还是太少了.这里就尽量做一点微小的贡献 ...

  4. mqtt协议实现 java服务端推送功能（三）项目中给多个用户推送功能

    接着上一篇说,上一篇的TOPIC是写死的,然而在实际项目中要给不同用户 也就是不同的topic进行推送 所以要写活 package com.fh.controller.information.push ...

  5. 分布式之协调服务Zookeeper专题第一讲

    写在前面: 再谈架构演进: 1.单体架构->tomcat(war) 演进:水平拆分(服务拆分,(用户服务,订单服务,商品服务)) 涉及问题:1).服务通信(webservice) 2).三态问题 ...

  6. win10编译maskrcnn benchmark

    步骤 1. 按照官网的Option1安装步骤安装 https://github.com/facebookresearch/maskrcnn-benchmark/blob/master/INSTALL. ...

  7. deep_learning_凹凸函数

    什么是凸函数及如何判断一个函数是否是凸函数 t元j 一.什么是凸函数 对于一元函数f(xf(x),如果对于任意tϵ[0,1]tϵ[0,1]均满足:f(tx1+(1−t)x2)≤tf(x1)+(1−t) ...

  8. 基于UDS的BootLoader

    bootloader程序架构略有简化的bootloader图 这张图和恒润教程中的BootLoader流程大体是一致的. 疑问点 Q:图中的烧写顺序是34-36-34-36-34-36-37,但另一些 ...

  9. python面向编程：阶段练习

    1.所有程序都因该使用面向对象来设计吗?为什么? 不是,面向对象编程优点是扩展性高,对程序员来说不需要关心具体的步骤,只需要调用对象功能,缺点是:程序的复杂度变高,整体的可控性比较低! 2.什么是对象 ...

  10. [ZOJ 3063] Draw Something Cheat

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4706 思路:字符串是一个集合(由0到多个A~Z字符组成),我们可以假 ...