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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
脚本收藏iframe
Jul 21 Javascript
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
js数组操作常用方法
May 08 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
用vue设计一个日历表
Dec 03 Vue.js
JS实现简单九宫格抽奖
Jun 28 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
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
php 如何获取数组第一个值
2013/08/06 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
Python常用算法学习基础教程
2017/04/13 Python
Django 限制访问频率的思路详解
2019/12/24 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
美国在线工具商店:Acme Tools
2018/06/26 全球购物
应届生财务管理求职信
2013/11/06 职场文书
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
行政总经理岗位职责
2013/12/05 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL