jQuery标签替换函数replaceWith()的使用例子


Posted in Javascript onAugust 28, 2014

replaceWith简单使用

jQuery中,有一个强大的替换函数replaceWith(),使用非常简单,如:

页面有如下p标签

jQuery标签替换函数replaceWith()的使用例子

把所有p标签替换为“##”

$('p').replaceWith('##');

执行后的结果:

 jQuery标签替换函数replaceWith()的使用例子

替换标签

利用这个replaceWith,我们可以把所有p标签替换为b标签,内容不变:

$('p').each(function(){
    $(this).replaceWith('<b>'+$(this).html()+'</b>');
});

结果

jQuery标签替换函数replaceWith()的使用例子

这就替换了!

多语言网站可以利用这个函数轻松完成

如果你开发的是一个多语言的网站,甚至可以利用这个特性,比如,在你需要翻译的文字上加上i标签,然后遍历翻译替换。

假如页面dom结构如下:

jQuery标签替换函数replaceWith()的使用例子

我们要把页面中的i标签里的文本给翻译,页面中有i标签的分别是苹果、电脑。于是我们实现需要一个翻译库:

var translate = {
    '苹果' : 'apple',
    '电脑' : 'PC'
};

然后我可以这样执行翻译替换

$('i').each(function(){
    $(this).replaceWith(translate[$(this).html()]);
});

执行后效果:

jQuery标签替换函数replaceWith()的使用例子

页面效果:

jQuery标签替换函数replaceWith()的使用例子

Javascript 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
vue的mixins属性详解
Mar 14 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
layui实现三级联动效果
Jul 26 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 #Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 #Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 #Javascript
JavaScript实现的in_array函数
Aug 27 #Javascript
JavaScript AJAX之惰性载入函数
Aug 27 #Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 #Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 #Javascript
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
python中xrange和range的区别
2014/05/13 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
python中的tcp示例详解
2018/12/09 Python
python 动态调用函数实例解析
2019/10/21 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
python脚本和网页有何区别
2020/07/02 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
寒假实习自荐信
2014/01/26 职场文书
nginx配置指令之server_name的具体使用
2022/08/14 Servers