<!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程序 cpu占用过高分析

    linux终端下用 top命令看到cpu占用超过100%.之所以超过100%.说明cpu是多核.默认top显示的是cpu加起来的使用率,运行top后按大键盘1看看,可以显示每个cpu的使用率,top里 ...

  2. （三十四）golang--接口

    golang的多态特性主要体现在接口上: 主要优势:高内聚低耦合: package main import ( "fmt" ) type usb interface { start ...

  3. KVM virsh console

    (1) 查看正在运行的虚拟机 root@kvm:~# virsh list Id Name State ------------------------------------------------ ...

  4. 简单的ALV显示例子

    废话不多说,直接上傻瓜代码.归根结底,就是要将显示的字段一行一行的放入fieldcat的表里. "定义ALV数据变量 DATA: IT_FIELDCAT TYPE SLIS_T_FIELDC ...

  5. 一款常用的截图工具（能够截gif动图）

    这款工具用来截程序的演示GIF图片,灰常方便. 直接上Github地址: https://github.com/NickeManarin/ScreenToGif

  6. Docker中如何调试剖析.net core 的程序。

    前言 现在.net core跨平台了,相信大部分人都把core的程序部署在了linux环境中,或者部署在了docker容器中,与之对应的,之前都是部署在windows环境中,在win中,我们可以用wi ...

  7. Flask补充--threading.local对象

    目录 Local 局部变量 全局变量 使用threading.local() 自定义threading.local 函数版 面向对象版 通过setattr和getattr实现 每个对象有自己的存储空间 ...

  8. 前端开发CSS3——使用方式和选择器

    CSS是Cascading Style Sheets(层叠样式表)的简写,用于修饰文档的语言,可以修饰HTML.XML.SVN.每个语言都有每个语法的规则:CSS声明.CSS声明块.CSS选择器.CS ...

  9. opencv::分水岭图像分割

    分水岭分割方法原理 (3种) - 基于浸泡理论的分水岭分割方法 (距离) - 基于连通图的方法 - 基于距离变换的方法 图像形态学操作: - 腐蚀与膨胀 - 开闭操作 分水岭算法运用 - 分割粘连对象 ...

  10. CTF必备技能丨Linux Pwn入门教程——ROP技术（上）

    Linux Pwn入门教程系列分享如约而至,本套课程是作者依据i春秋Pwn入门课程中的技术分类,并结合近几年赛事中出现的题目和文章整理出一份相对完整的Linux Pwn教程. 教程仅针对i386/am ...