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 相关文章推荐
Jquery 绑定时间实现代码
May 03 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
Jquery ajax基础教程
Nov 20 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
JS实现查找数组中对象的属性值是否存在示例
May 24 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
详解Node.js如何处理ES6模块
May 15 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
destoon数据库表说明汇总
2014/07/15 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
vue内置指令详解
2018/04/03 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
python 输出上个月的月末日期实例
2018/04/11 Python
Python 函数返回值的示例代码
2019/03/11 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
职工运动会感言
2014/02/07 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
库房管理员岗位职责
2015/02/12 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
会议新闻稿
2015/07/17 职场文书
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏
Fluentd搭建日志收集服务
2022/09/23 Servers