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 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
jQuery中:enabled选择器用法实例
Jan 04 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 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
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
Django rest framework实现分页的示例
2018/05/24 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
python机器人运动范围问题的解答
2019/04/29 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
tensorflow 变长序列存储实例
2020/01/20 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
python Selenium 库的使用技巧
2020/10/16 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
财务与信息服务专业推荐信
2013/11/28 职场文书
探亲邀请信范文
2014/01/30 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
大学生活动总结模板
2014/07/02 职场文书
庆七一主持词
2015/06/29 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
Go timer如何调度
2021/06/09 Golang