<!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. lograotate 配置常用配置

    目录 lograotate 配置说明 nginx php-fpm tomcat 配置 各种参数说明 lograotate 配置说明 Linux系统默认安装logrotate工具,它默认的配置文件在: ...

  2. 安装更新时出现一些问题，但我们稍后会重试。如果你继续看到此错误，并且想要搜索 Web 或联系支持人员以获取相关信息，以下信息可能会对你有帮助: (0x80070426)

    安装更新时出现一些问题,但我们稍后会重试.如果你继续看到此错误,并且想要搜索 Web 或联系支持人员以获取相关信息,以下信息可能会对你有帮助: (0x80070426) https://answers ...

  3. python 统计使用技巧

    python 统计使用技巧 # 1.不输入回车获取值 注:需要tty模块配合. fd = sys.stdin.fileno() old_settings = termios.tcgetattr(fd) ...

  4. vsdbg 下载方法 使用下载工具下载后手动安装

    vsdbg国内下载太慢了,这里提供一个使用下载工具下载后,手动安装的处理方法 查看vs build控制台输出: 1>C:\WINDOWS\System32\WindowsPowerShell\v ...

  5. 咕咕咕-HLPP算法

    hlpp(欢乐婆婆)算法总结 突然发现咕了好久(X) emm先大概说一下,hlpp是针对网络流算法的一种复杂度更优的算法,基于预流推进(即模拟) 复杂度上界为 n2根号m 且跑不满 (所以学会了它,可 ...

  6. Vue笔记3

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. body的背景

    body的背景 背景background-color:默认border-box 画布canvas 一块区域 背景background-color的画布的特点:(画布大于等于视口) 最小宽度视口宽度 最 ...

  8. Context都没弄明白，还怎么做Android开发

    转载:https://www.jianshu.com/p/94e0f9ab3f1d Activity mActivity =new Activity() 作为Android开发者,不知道你有没有思考过 ...

  9. AI 图像识别的测试

    随着AI 的浪潮发展,AI 的应用场景越来越广泛,其中计算机视觉更是运用到我们生活中的方方面面.作为一个测试人员,需要紧跟上 AI 的步伐,快速从传统业务测试,转型到 AI 的测试上来.而人脸识别作为 ...

  10. Mybatis使用Mybatis-generator插件及配置（数据库逆向工程）

    Mybatis使用Mybatis-generator插件 首先在POM.xml文件添加架包,我这里用的是SpringBoot,所以用的也是SpringBoot架包,最少要mybatis,generat ...