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
相同点:他们二个都可以进行,查找替换
不同点:写法不同,反正我是没有发现,他们二个有什么功能上的不同。
jQuery的replaceWith()函数用法详解的更多相关文章
- SQL中CONVERT()函数用法详解
SQL中CONVERT函数格式: CONVERT(data_type,expression[,style]) 参数说明: expression 是任何有效的 Microsoft® SQL Server ...
- php中setcookie函数用法详解(转)
php中setcookie函数用法详解: php手册中对setcookie函数讲解的不是很清楚,下面是我做的一些整理,欢迎提出意见. 语法: bool set ...
- eval()函数用法详解
eval()函数用法详解:此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,下面就介绍一下eval()函数的用法.语法结构: eval(str) 此函数可以接受一个字符串str作为参数, ...
- 转载 LayoutInflater的inflate函数用法详解
http://www.open-open.com/lib/view/open1328837587484.html LayoutInflater的inflate函数用法详解 LayoutInflater ...
- delphi中Application.MessageBox函数用法详解
delphi中Application.MessageBox函数用法详解 Application.MessageBox是TApplication的成员函数,声明如下:functionTApplicati ...
- C语言对文件的操作函数用法详解2
fopen(打开文件) 相关函数 open,fclose 表头文件 #include<stdio.h> 定义函数 FILE * fopen(const char * path,const ...
- C语言对文件的操作函数用法详解1
在ANSIC中,对文件的操作分为两种方式,即: 流式文件操作 I/O文件操作 一.流式文件操作 这种方式的文件操作有一个重要的结构FILE,FILE在stdio.h中定义如下: typedef str ...
- python开发笔记之zip()函数用法详解
今天分享一篇关于python下的zip()函数用法. zip()是Python的一个内建函数,它接受一系列可迭代的对象作为参数,将对象中对应的元素按顺序组合成一个tuple,每个tuple中包含的是原 ...
- thinkPHP内置字符串截取msubstr函数用法详解
作者:陈达辉 字体:[增加 减小] 类型:转载 时间:2016-11-15 我要评论 这篇文章主要介绍了thinkPHP内置字符串截取函数用法,结合实例形式分析了thinkPHP内置的字符串截取函数功 ...
随机推荐
- Centos7 系统启动docker报错 inotify add watch failed
环境说明: 最近新装的系统启动docker报错,之前没有遇到过.(之前都是系统直接启动,新装机器无报错的情况) 当时排查了很久没找到问题在哪,观察报错信息如下: 提示表文件失败,没有这个文件或者目录. ...
- 【其他】BootCDN
BootCDN 稳定.快速.免费的前端开源项目 CDN 加速服务 是 Bootstrap 中文网支持并维护的前端开源项目免费 CDN 服务,致力于为 Bootstrap.jQuery.Angular. ...
- 使用JavaFX开发桌面程序(一)
使用JavaFX开发桌面程序 注:我也是JAVA FX的初学者之一,自己在学习的时候踩了许多的坑,中文英文的资料查了不少,但是觉得FX技术和其他热门技术相比,教程还是太少了.这里就尽量做一点微小的贡献 ...
- mqtt协议实现 java服务端推送功能(三)项目中给多个用户推送功能
接着上一篇说,上一篇的TOPIC是写死的,然而在实际项目中要给不同用户 也就是不同的topic进行推送 所以要写活 package com.fh.controller.information.push ...
- 分布式之协调服务Zookeeper专题第一讲
写在前面: 再谈架构演进: 1.单体架构->tomcat(war) 演进:水平拆分(服务拆分,(用户服务,订单服务,商品服务)) 涉及问题:1).服务通信(webservice) 2).三态问题 ...
- win10编译maskrcnn benchmark
步骤 1. 按照官网的Option1安装步骤安装 https://github.com/facebookresearch/maskrcnn-benchmark/blob/master/INSTALL. ...
- deep_learning_凹凸函数
什么是凸函数及如何判断一个函数是否是凸函数 t元j 一.什么是凸函数 对于一元函数f(xf(x),如果对于任意tϵ[0,1]tϵ[0,1]均满足:f(tx1+(1−t)x2)≤tf(x1)+(1−t) ...
- 基于UDS的BootLoader
bootloader程序架构略有简化的bootloader图 这张图和恒润教程中的BootLoader流程大体是一致的. 疑问点 Q:图中的烧写顺序是34-36-34-36-34-36-37,但另一些 ...
- python面向编程:阶段练习
1.所有程序都因该使用面向对象来设计吗?为什么? 不是,面向对象编程优点是扩展性高,对程序员来说不需要关心具体的步骤,只需要调用对象功能,缺点是:程序的复杂度变高,整体的可控性比较低! 2.什么是对象 ...
- [ZOJ 3063] Draw Something Cheat
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4706 思路:字符串是一个集合(由0到多个A~Z字符组成),我们可以假 ...