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 动态生成方法的例子
Jul 22 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
JavaScript的Module模式编程深入分析
Aug 13 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
angular+webpack2实战例子
May 23 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
Javascript模拟实现new原理解析
Mar 03 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独立Session数据库存储操作类分享
2014/06/11 PHP
浅谈php自定义错误日志
2015/02/13 PHP
分享10段PHP常用代码
2015/11/11 PHP
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
Angular 2.0+ 的数据绑定的实现示例
2017/08/09 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
Python聊天室程序(基础版)
2018/04/01 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
python 实现字符串下标的输出功能
2020/02/13 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
小学毕业感言150字
2014/02/05 职场文书
大学生就业求职信
2014/06/12 职场文书
社区服务活动小结
2014/07/08 职场文书
小学生安全责任书
2014/07/25 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
组工干部演讲稿
2014/09/02 职场文书
合同范本之电脑出租
2019/08/13 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android