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控制iframe滚动的代码
Apr 10 Javascript
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
让JavaScript代码更加精简的方法技巧
Jun 01 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
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
smarty简单分页的实现方法
2014/10/27 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
python调用cmd命令行制作刷博器
2014/01/13 Python
Python 实现链表实例代码
2017/04/07 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
Django框架验证码用法实例分析
2019/05/10 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
如何通过python计算圆周率PI
2020/11/11 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
心理学专业毕业生推荐信范文
2013/11/21 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
邀请函范文
2015/02/02 职场文书
员工担保书范本
2015/09/22 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python