<!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 基础系列：异常

    Java 中的异常(Exception)又称为例外,是一个在程序执行期间发生的事件,它中断正在执行的程序的正常指令流.为了能够及时有效地处理程序中的运行错误,必须使用异常类. 1. 异常类型 Thro ...

  2. 小明工具箱<Excel 插件><VSTO 插件>

    当前版本:1.0.42.7118(更新日期:2019年6月28日) 下载地址:点击下载 功能和简介: 本程序为 Excel 2010 版本以上的插件,含以下功能: 拆分工作簿:将一个或多个工作簿中的每 ...

  3. OpenCV 相机标定 findChessboardCorners() 与 cornerSubPix() 函数

    OpenCV 官方文档 findChessboardCorners():Finds the positions of internal corners of the chessboard. bool ...

  4. 一段完整的创建表格的SQL代码

    一段完整的创建表格的SQL代码 使用SQL语句创建一张表,不仅可以可以快速熟悉SQL语句,还可以从这看出一个人对该技能点的熟悉程度. 这里先说明几点: PRIMARY KEY:主键,一张表中只允许有一 ...

  5. SpringBoot-@ControllerAdvice 拦截异常并统一处理

    SpringBoot是为了简化Spring应用的创建.运行.调试.部署等一系列问题而诞生的产物, 自动装配的特性让我们可以更好的关注业务本身而不是外部的XML配置,我们只需遵循规范,引入相关的依赖就可 ...

  6. EF CodeFirst 使用T4模板

    实用等级:★★★★★ 首先,定义一个接口,代表一个领域实体.在定义一个实体集成这个接口,面向接口编程的各种好处就不提了. /// <summary> /// 代表一个领域实体 /// &l ...

  7. python3 用户名和密码三次错误

    一.需求 1)密码输错超过三次进行锁定: 2)如果用户名在锁定文件中提示错误: 二.流程图 三.代码 # Aduthor:CCIP-Ma import sys f=open("passwor ...

  8. Java自学-集合框架 Collection

    Java集合框架 Collection Collection是一个接口 步骤 1 : Collection Collection是 Set List Queue和 Deque的接口 Queue: 先进 ...

  9. 洛谷 p1541乌龟棋

    洛谷 p1541乌龟棋 题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行NN个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第NN格是终点,游戏 ...

  10. JPA笔记4 ManyToMany

    package many_to_many; import java.util.HashSet; import java.util.Set; import javax.persistence.Entit ...