jQuery的replaceWith()函数用法详解

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

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

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

时间: 2024-10-10 01:21:46

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

wp_list_categories函数用法详解

本以为写完新手教程之后,可以不写新手应用方面的文章了的,可今天又有朋友在群里问如何显示每个分类下文章数量这个基础性问题,看来Wordpress中文化还有很长的一段路要走,我们任重而道远啊!好,解决你的问题先:正如标题所说,Wordpress是用wp_list_categories这个函数来显示分类的,其用法是:< ?php wp_list_categories('arguments'); ?>arguments即参数,默认参数设置为: $defaults = array('show_optio

setInterval()函数用法详解

setInterval()函数用法详解:此函数用途相当广泛,在滚动代码或者焦点图片等等效果中都有应用,下面就通过实例简单介绍一下此函数的用法.setInterval()函数可以规定在按照指定的周期来执行一段函数,也就是说每隔一定事件就开始执行一次指定的函数.语法如下: setInterval(code,interval) 此函数具有两个参数,第一个参数规定要执行的函数,第二个参数规定函数两次执行之间的间隔,单位是毫秒(1秒=1000毫秒).代码实例如下: <!DOCTYPE HTML> <

eval()函数用法详解

eval()函数用法详解:此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,下面就介绍一下eval()函数的用法.语法结构: eval(str) 此函数可以接受一个字符串str作为参数,并把此str当做一段javascript代码去执行,如果str执行结果是一个值则返回此值,否则返回undefined.如果参数不是一个字符串,则直接返回该参数,实例如下: eval("var a=1");//声明一个变量a并赋值1. eval("2+3");//执行加运

LayoutInflater的inflate函数用法详解

LayoutInflater的inflate函数用法详解 LayoutInflater作用是将layout的xml布局文件实例化为View类对象. 获取LayoutInflater的方法有如下三种: ? LayoutInflater inflater=(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); View layout = inflater.inflate(R.layout.main, nul

PHP的ob_start函数用法详解[php函数]

用PHP的ob_start();控制您的浏览器cache Output Control 函数可以让你自由控制脚本中数据的输出.它非常地有用,特别是对于:当你想在数据已经输出后,再输出文件头的情况.输出控制函数不对使用 header() 或 setcookie(), 发送的文件头信息产生影响,只对那些类似于 echo() 和 PHP 代码的数据块有作用. 我们先举一个简单的例子,让大家对Output Control有一个大致的印象: Example 1. CODE<?php ob_start();

jQuery Validate插件 reomte用法详解

在用户注册时经常要通过ajax请求判断用户账号是否已注册,最方便的方法便是用jQuery Validate插件 reomte方法 Jquery Validate插件, 调用远程方法验证参数, remote的用法: 在validate的方法上加入remote:"校验方法",例如:remote: "/test/checkAccount.jsp", 这时传进checkAccount.jsp的参数就是account=$("#account").val()

oracle trim函数用法详解

在oracle数据库中,trim一般都是用在删除字符串两边的空格.实际上,trim也可以用来删除字符串两边的指定字符.并且trim指定删除的字符串只能是单个字符Oracle TRIM函数是很常见的函数,下面对Oracle TRIM函数的语法作了详尽的阐述说明,希望可以让您对Oracle TRIM函数有更深的认识. 如果提到Oracle TRIM函数,最简单的功能就是使用它来去除字符串的行首和行尾的空格,这个功能也是大家使用频率最高的一种.然而Oracle TRIM函数其实是具有删除“任意指定”字

jQuery的bind()方法用法详解

bind()方法用法详解: 此方法是使用比较频繁的方法之一,虽然在API手册上有着对方法的介绍,但是由于语言简短,例子不够详细,可能会造成不能够完全准确的掌握bind()方法的使用,下面就结合实例介绍一下此方法的使用. 语法格式: $(selector).bind(type,[data],function(eventObject)) 此方法可以为所有匹配元素的特定事件绑定事件处理函数,例如: <!DOCTYPE html> <html> <head> <meta

(转)C++ replace() 函数用法详解

本文主要针对c++中常用replace函数用法给出样例程序 [cpp] view plaincopy /*用法一: *用str替换指定字符串从起始位置pos开始长度为len的字符 *string& replace (size_t pos, size_t len, const string& str); */ int main() { string line = "[email protected] [email protected] a test string!"; l