<!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. 改善java程序的151个建议

    <编写高质量代码-改善java程序的151个建议> --秦小波 第一章.开发中通用的方法和准则 1.不要在常量和变量中出现易混淆的字母 long a=0l; --> long a=0 ...

  2. ubuntu 安装rocketmq

    RocketMQ环境要求 ) 64bit OS,linux/Unix/Max ) 64bit JDK 1.8+ ) Maven 3.2.x ) Git 一.下载并构建 git clone https: ...

  3. Erlang语言基础总结

    1.=操作符(模式匹配) 当看到一个表达式像X = 123时,它的意思看似“将整数123赋予变量X”,但这种解读是不 正确的.=不是一个赋值操作符,它实际上是一个模式匹配操作符.与其他函数式编程语言一 ...

  4. 【转】在cmd/bat脚本中获取当前脚本文件所在目录

    一.关于cd的/d参数 关于cd 的/d参数,在cmd中敲入cd /?可以看到/d参数的解释如下: 使用 /D 命令行开关,除了改变驱动器的当前目录之外,还可改变当前驱动器.这句话不太好理解,我做个试 ...

  5. 使用jstack排查多线程死锁、阻塞

    问题: 针对线上多线程死锁.阻塞,跑着跑着就卡住了 查看线上线程池的状态 jstack用于生成java虚拟机当前时刻的线程快照. 线程快照是当前java虚拟机内每一条线程正在执行的方法堆栈的集合,生成 ...

  6. 禁用，移除 WPF window窗体系统操作SystemMenu

    public static class SystemMenuManager { [DllImport("user32.dll", EntryPoint = "GetSys ...

  7. C# 委托补充01

    上一篇文章写了委托的最基本的一些东西,本篇咱们扯扯委托其他的东西. 示例1插件编程 根据对委托的理解,委托可以把一个方法当作参数进行传递,利用这个特性我们可以使用委托,实现插件编程. public d ...

  8. 重温CLR（十八） 运行时序列化

    序列化是将对象或对象图转换成字节流的过程,反序列化是将字节流转换回对象图的过程.在对象和字节流之间转换是很有用的机制. 1 应用程序的状态(对象图)可轻松保存到磁盘文件或数据库中,并在应用程序下次运行 ...

  9. Python - 元组 - 第九天

    Python 元组 Python 的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可.例如: >&g ...

  10. webpack4 plugins 篇

    demo 代码点此,篇幅有限,仅介绍几个常用的. start 什么是 plugins ? While loaders are used to transform certain types of mo ...