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 相关文章推荐
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
jquery实现倒计时效果
Dec 14 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
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
用PHP制作静态网站的模板框架
2006/10/09 PHP
PHP编码转换
2012/11/05 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
Laravel 5 学习笔记
2015/03/06 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
js设置控件的隐藏与显示的两种方法
2014/08/21 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
JQuery基础语法小结
2015/02/27 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
JS中的多态实例详解
2017/10/15 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
Python中实现的RC4算法
2015/02/14 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
世界遗产的导游词
2015/02/13 职场文书
小学三年级数学教学反思
2016/02/16 职场文书