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 Cookie 直接浏览网站分网址
Dec 08 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
Javascript之datagrid查询详解
Sep 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
php 日期时间处理函数小结
2009/12/18 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
php语法检查的方法总结
2019/01/21 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
基于JS实现限时抢购倒计时间表代码
2017/05/09 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
Python的Urllib库的基本使用教程
2015/04/30 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
大学新闻系求职信
2014/06/03 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android