<!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. eclipse maven项目如何将所有的jar包复制到lib目录下？

      1.情景展示 我们知道,maven项目的jar包并不存在于项目当中,项目所需的jar包都保存在本地仓库中,如果本地仓库没有,会从配置的中央仓库下载,如果中央仓库也没有就会报错: 如上图所示,我想将 ...

  2. （十八）golang--defer关键字

    在函数中,程序员经常需要创建资源(比如,数据库连接,文件句柄,锁等),为了在函数执行完毕后,及时释放资源,go设计者提供defer(延时机制) 用defer申明的语句不会立即执行,而是被存入到defe ...

  3. MYSQL5.6免安装版在windows下的使用

    一.去MYSQL官网下载MYSQL免安装版,由于我的系统是64位的,所以就下载了64位的Mysql版本 http://cdn.mysql.com//Downloads/MySQL-5.6/mysql- ...

  4. 论文阅读: v-charge项目: 电动车的自动泊车和充电

    Abstract AVP服务会缓和电动车现有两个缺点: 有限的行驶范围和很长的充电时间. v-charge用相机和超声波在GPS-denied的区域全自动形式. 这篇paper叙述了下述几方面的优势: ...

  5. 【前端知识体系-JS相关】深入理解JavaScript原型（继承）和原型链

    1. Javascript继承 1.1 原型链继承 function Parent() { this.name = 'zhangsan'; this.children = ['A', 'B', 'C' ...

  6. JVM的参数以及作用详解

    -XX:+PrintCommandLineFlags   打印出JVM运行时的各种的各项配置参数 -verbose:gc   发生GC时,打印出GC日志-XX:+printGC 发生GC时,打印出GC ...

  7. ArcGIS随机数生成

    arcgis python 随机数 语法用法一例: //--------------------------------------------- //定义函数getnums  返回一个随机数(0,5 ...

  8. The connection string name is missing for the MySqlSiteMapProvider

    在ASP.NET-WebForm程序中,添加SiteMapPath控件时出现问题,如下图所示: 解决办法:找到上图源文件指向的machine.config配置文件,将siteMap节点注释即可.

  9. curl命令查看时间信息

    参考:https://blog.csdn.net/jackyzhousales/article/details/82799494 示例:curl www.baidu.com -w "time ...

  10. Spring Boot MVC 使用 JSP 作为模板

    Spring Boot 默认使用 Thymeleaf 作为模板引擎,直接在 template 目录中存放 JSP 文件并不能正常访问,需要在 main 目录下新建一个文件夹来存放 JSP 文件,而且需 ...