<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

div{

    width:100px;

    height:100px;

    background-color:#CCFFFF;

    border:#FF0000 solid 2px;

}

</style>

<script language="javascript" src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<script language="javascript">

    // 用text()或html()实现

    // $(function(){

    //     $('div').eq(0).click(function(){

    //         $('div').eq(0).text("11");

    //         $('div').eq(1).text("");

    //     });

    //     $('div').eq(1).click(function(){

    //         $('div').eq(0).text("");

    //         $('div').eq(1).text("22");

    //     });

    // });

    //用replaceWith()实现

    function initClick(){

        $('div').eq(0).click(function(){

            $('div').eq(0).replaceWith('<div>11</div>');

            $('div').eq(1).replaceWith('<div></div>');

            initClick();

        });

        $('div').eq(1).click(function(){

            $('div').eq(0).replaceWith('<div></div>');

            $('div').eq(1).replaceWith('<div>22</div>');

            initClick();

        });

    }

    $(function(){

        $('div').eq(0).click(function(){

            $('div').eq(0).replaceWith('<div>11</div>');

            $('div').eq(1).replaceWith('<div></div>');

            initClick();

        });

        $('div').eq(1).click(function(){

            $('div').eq(0).replaceWith('<div></div>');

            $('div').eq(1).replaceWith('<div>22</div>');

            initClick();

        });

    });

</script>

</head>

<body>

<div></div>

<div></div>

</body>

</html>

使用jQuery的replaceWith()方法要注意的地方的更多相关文章

  1. 避免使用jQuery的html方法来替换标签，而是使用replaceWith方法

    tblCostSplit.html内容: <nobr title="">只想显示里面内容,去掉nobr标签</nobr> <nobr title=&q ...

  2. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

  3. jQuery HTML CSS 方法

    jQuery HTML / CSS 方法 下面的表格列出了所有用于处理 HTML 和 CSS 的 jQuery 方法. 下面的方法适用于 HTML 和 XML 文档.除了:html() 方法. 方法 ...

  4. 原生JS替代jQuery的各种方法汇总

    前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...

  5. jQuery的replaceWith()函数用法详解

    replaceWith,替换元素 replaceWith() 方法将选择的元素的内容替换为其他内容. 我们先在先看一个实例 <!DOCTYPE html> <html> < ...

  6. JavaScript和jQuery中的方法整理

    一.属性操作 // JavaScript: Dom.hasAttribute('attrName'); //是否有指定属性 Dom.hasAttributes(); //是否有属性 Dom.getAt ...

  7. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  8. jquery.on()超级方法

    $.on()方法是jquery1.7之后的一个超级方法,将事件绑定和事件委托整合到一个函数中去,支持绑定多个事件,并且可以绑定自定义事件.使用起来很方便. demo传送门 事件委托 首先说一下事件委托 ...

  9. 重写jquery的ajax方法

    //首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...

随机推荐

  1. redis命令之 ----Set（集合）

    SADD SADD key member [member ...] 将一个或多个 member 元素加入到集合 key 当中,已经存在于集合的 member 元素将被忽略. 假如 key 不存在,则创 ...

  2. Eureka配置

    介绍 SpringCloud是一个完整的微服务治理框架,包括服务发现和注册,服务网关,熔断,限流,负载均衡和链路跟踪等组件. SpringCloud-Eureka主要提供服务注册和发现功能.本文提供了 ...

  3. A Pattern Language for Parallel Programming

    The pattern language is organized into four design spaces.  Generally one starts at the top in the F ...

  4. Devexpress treelist两张表父子节点设置、筛选、分页、排序、页面跳转demo

    效果图 网上查了很多例子自己结合和修改了一下.最下方的分页跳转是dev的datapager控件.控件的属性事件自己研究一下. 代码如下 public partial class MMDefinitio ...

  5. OpenCV.Net基于傅里叶变换进行文本的旋转校正

    本文描述一种利用OpenCV及傅里叶变换识别图片中文本旋转角度并自动校正的方法,由于对C#比较熟,因此本文将使用OpenCVSharp. 文章参考了http://johnhany.net/2013/1 ...

  6. win10自动休眠解决方法

    win10使用外接显示器时,总是过2分钟自动睡眠. 这是系统无人值守时睡眠时间的设定,默认是两分钟. 解决方法: 1.运行注册表管理器,win+r ,输入regedit.exe 2.定位到HKEY_L ...

  7. python中pip添加国内镜像源后显著加速下载

    python中pip添加国内镜像源后显著加速下载 更换pip源到国内镜像,很多国外的库下载非常慢,添加国内镜像后安装下载速度提升非常明显(亲测有些可以由几十kb加速到几MB) pip国内的一些镜像阿里 ...

  8. 别忘了在使用MES系统之前，还有关键一步！

    如果你是不熟悉工业自动化领域的专业人士,又或者是从IT或其他背景进入到操作技术(OT)领域的相关人士,那么我相信你不会后悔读到这篇文章. 我们都想做到智能化生产,想将MES系统,APS系统应用到生产过 ...

  9. Oracle client 安装、配置

     一.安装 链接: https://pan.baidu.com/s/1Yph6hiNkCJsApAzu_Vx2ew 提取码: r9ye 二.配置 1.控制面板\所有控制面板项\管理工具\数据源(ODB ...

  10. 9. [mmc subsystem] host（第三章）——sdhci-pltfm说明

    一.sdhci-pltfm说明 sdhci-pltfm并不是实际某个host的driver. sdhci-pltfm是指在sdhci core的基础上,提供了统一对sdhci_host的必要属性进行解 ...