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 方法实现返回多个数据的代码
Apr 30 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 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中error_log()函数的使用方法
2015/01/20 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
jquery实现动态添加附件功能
2018/10/23 jQuery
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python 拼接文件路径的方法
2018/10/23 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
python数字类型math库原理解析
2020/03/02 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
python中的unittest框架实例详解
2021/02/05 Python
文秘大学生求职信
2014/02/25 职场文书
青春无悔演讲稿
2014/05/08 职场文书
公司晚会策划方案
2014/05/17 职场文书
继承公证书格式
2015/01/26 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书