jQuery标签替换函数replaceWith()的使用例子

replaceWith简单使用

jQuery中，有一个强大的替换函数replaceWith()，使用非常简单，如：

页面有如下p标签

把所有p标签替换为“##”

$('p').replaceWith('##');

执行后的结果：

替换标签

利用这个replaceWith，我们可以把所有p标签替换为b标签，内容不变：

$('p').each(function(){
    $(this).replaceWith('<b>'+$(this).html()+'</b>');
});

结果

这就替换了！

多语言网站可以利用这个函数轻松完成

如果你开发的是一个多语言的网站，甚至可以利用这个特性，比如，在你需要翻译的文字上加上i标签，然后遍历翻译替换。

假如页面dom结构如下：

我们要把页面中的i标签里的文本给翻译，页面中有i标签的分别是苹果、电脑。于是我们实现需要一个翻译库：

var translate = {
    '苹果' : 'apple',
    '电脑' : 'PC'
};

然后我可以这样执行翻译替换

$('i').each(function(){
    $(this).replaceWith(translate[$(this).html()]);
});

执行后效果：

页面效果：

赞 (0)

相关推荐

  • Jquery replace 字符替换实现代码

    示例:要修改图片的大小: <img id="rptComment_ctl01_Gravatar1" width="60" height="60" src="http://www.jb51.net/avatar.php?gravatar_id=f847fb8954f1750719d3feef3b033718&rating=G&size=60" /> 使用如下语句,将图片属性中的size替换. $(&q

  • jQuery替换节点用法示例(使用replaceWith方法)

    jQuery替换节点用法示例(使用replaceWith方法)

    本文实例讲述了jQuery替换节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/

  • jQuery中replaceAll()方法用法实例

    本文实例讲述了jQuery中replaceAll()方法用法.分享给大家供大家参考.具体分析如下: 此方法用匹配元素去替换指定的内容. replaceAll()方法的作用和replaceWith()方法是完全一样的. 语法结构: 复制代码 代码如下: $(content).replaceAll(selector) 参数列表: 参数 描述 content 用于替换的内容. selector 用于查找所要被替换的元素 实例实例: 复制代码 代码如下: <!DOCTYPE html> <htm

  • jQuery下通过replace字符串替换实现大小图片切换

    核心就是使用replace替换img src的图片路径,从而实现不同尺寸图片的切换. 下面这个动画就是显示了尺寸切换,单击"大图"按钮,则改变图片的src,加载大图,单击"小图"按钮,则又显示小图. replace用法简单讲解: 我其实也是新手,讲得不对望海涵. 字符串.replace(a,b);指的是用b将字符串含有a的部分代替,例如字符串obj="welcome to my website!"; obj.replace("my&qu

  • jquery replace方法去空格

    话不多说,请看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new docum

  • 从jQuery.camelCase()学习string.replace() 函数学习

    功能 camelCase函数的功能就是将形如background-color转化为驼峰表示法:backgroundColor. 此函数在jQuery的data函数,以及涉及到css的诸多函数中都有用到. jQuery的实现 复制代码 代码如下: //正则匹配 rdashAlpha = /-([a-z])/ig, // camelCase替换字符串时的回调函数 fcamelCase = function( all, letter ) { return letter.toUpperCase(); }

  • 浅谈jQuery中replace()方法

    今天在读jquery源码时,发现一个以前自己不曾注意过得问题,就是replece()的第二个参数为函数时的问题,以前只是知道replace()的第二个参数可以为函数,但是不知道该怎么操作,今天看到源码里用到了函数作为replace()的第二个参数时,感觉自己读起来比较吃力,于是准备整理下这个函数... 语法 stringObject.replace( regexp/substr, replacement) 返回值 返回一个新的字符串,是用replacement替换了regexp的第一次匹配或所欲

  • jQuery中replaceWith()方法用法实例

    本文实例讲述了jQuery中replaceWith()方法用法.分享给大家供大家参考.具体分析如下: 此方法将所有匹配的元素替换成指定的HTML或DOM元素. 需要注意的是此方法是追加内容,也就是原来的内容还在. 特别说明: HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染. 文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染. 语法结构: 复制代码 代码如下: $(selector).replaceWith(content) 参数列表:

  • jQuery标签替换函数replaceWith()的使用例子

    jQuery标签替换函数replaceWith()的使用例子

    replaceWith简单使用 jQuery中,有一个强大的替换函数replaceWith(),使用非常简单,如: 页面有如下p标签 把所有p标签替换为"##" $('p').replaceWith('##'); 执行后的结果: 替换标签 利用这个replaceWith,我们可以把所有p标签替换为b标签,内容不变: $('p').each(function(){     $(this).replaceWith('<b>'+$(this).html()+'</b>

  • jQuery AJAX回调函数this指向问题

    如在全局作用域调用一个含this的对象,此时当前对象的this指向的是window.为了让this的指向符合自己的意愿,JavaScript提供了两个方法用以改变this的指向,它们是call和apply,当然也有利用闭包来实现的方法.本文通过一个例子来说明这些问题. 先看一段演示代码,这代码只供演示用,没有实际意义. 复制代码 代码如下: //一个没有实际意义的socket连接对象 var socket = { connect: function(host, port) { alert('Co

  • jQuery里filter()函数与find()函数用法分析

    本文实例讲述了jQuery里filter()函数与find()函数用法.分享给大家供大家参考.具体分析如下: $("div .cont"); 等价于$("div").find(".cont") filter()函数是作用在集合的每一个对象($(这里是什么得到的就是什么))上, find()函数是在每一个对象内部查找匹配表达式的子元素 例子: <div class="cont"><p class="c

  • jQuery中map函数的两种方式

    两种方式: 1.直接jQuery.map //将原数组中每个元素加 4 转换为一个新数组. $.map( [0,1,2], function(n){ return n + 4; }); //结果: [4, 5, 6] //原数组中每个元素扩展为一个包含其本身和其值加 1 的数组,并转换为一个新数组 $.map( [0,1,2], function(n){ return [ n, n + 1 ]; }); //结果: [0, 1, 1, 2, 2, 3] 2.遍历对象.map 例子: <form

  • 详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())

    一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数. 而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明 $.get("data.php",$("#firstName.val()"),function(data){$("#

  • JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法window.onload没有简化写法$(document).r

  • PHP正则替换函数preg_replace和preg_replace_callback使用总结

    在编写PHP模板引擎工具类时,以前常用的一个正则替换函数为 preg_replace(),加上正则修饰符 /e,就能够执行强大的回调函数,实现模板引擎编译(其实就是字符串替换). 详情介绍参考博文:PHP函数preg_replace() 正则替换所有符合条件的字符串 应用举例如下: 复制代码 代码如下: <?php /**  * 模板解析类  */ class Template { public function compile($template) { // if逻辑   $template

  • jQuery教程 $()包装函数来实现数组元素分页效果

    jQuery教程 $()包装函数来实现数组元素分页效果

    最近一周在做中文站搜索礼品widget的需求,这个需求中有一个分页的功能:具体demo可以参见下图: 对应的js应用文件是同一个,页面中后面的offer数据已经埋好了,只是启用了css display:none样式把后面的offer元素隐藏了.现在要求对已存在的页面元素实现上下分页效果,也就是页面元素总集可以通过$(.class)获得,然后来实现分页功能. 按照传统的一般做法,用jQuery可写成如下: 复制代码 代码如下: var total=$(.class).length; //取得需要分

  • jQuery position() 函数详解以及jQuery中position函数的应用

    position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标.该函数只对可见元素有效. 所谓"被定位的元素",就是元素的CSS position属性值为absolute.relative或fixed(只要不是默认的static即可). 该函数返回一个坐标对象,该对象有一个left属性和top属性.属性值均为数字,它们都以像素(px)为单位. 与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offse

  • jQuery中toggle()函数的使用实例

    今天遇到一个有趣的例子,将它记录下来. 一个一级菜单,里边有一个二级菜单,二级菜单是通过锚点来链接页面元素的.想要实现的效果是当点击锚点时,页面链接到相应锚点,同时二级菜单隐藏,再点击一级菜单时,继续执行.. 其中试了很多种方法都不行,最后通过读jquery的toggle函数实现了. //这样写可以 $(".nav").toggle(function(){ $(".content").slideToggle(); }); //这样写不可以 $(".nav&

随机推荐