jQuery replaceWith replaceAll end的用法

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta charset="UTF-8">

<title>b index</title>

<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>

</head>

<body style="margin:150px;">

    <div id="div001">div001</div>

    <div id="div002">div002</div>

    <div id="div003">div003</div>

    <p><span>Hello</span>,how are you?</p>

    <div>

        <button id="btn001">click me to replaceWith new paragraph</button>

        <button id="btn002">click me to replaceWith div003</button>

        <button id="btn003">click me to replaceWith all div with pibib</button>

        <button id="btn004">click me to paragraph replaceAll div001 </button>

        <button id="btn005">click me to paragraph replaceAll div001 use end </button>

        <button id="btn006">click me to use end </button>

    </div>

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" src="b/js/bootstrap.js"></script>

    <script type="text/javascript" src="js/index028.js"></script>

</body>

</html>
$(function() {

    $('#btn001').click(btn001Click);

    $('#btn002').click(btn002Click);

    $('#btn003').click(btn003Click);

    $('#btn004').click(btn004Click);

    $('#btn005').click(btn005Click);

    $('#btn006').click(btn006Click);

});

function btn001Click() {

    // '<p>asdf'这样的写法竟然也可以；

    $('#div001').replaceWith('<p>asdf');

}

function btn002Click() {

    $('#div001').replaceWith($('#div003'));

}

function btn003Click() {

    // '<p><i><b><i><b>asdf'这样的写法，jQuery自己封口；

    // 还能把错误的</ul>给删除掉；

    $('div').replaceWith('<p><i><b></b></ul><i><b>asdf');

}

function btn004Click() {

    // 在这里面"<p>thisispa"竟然是无效的；必须自己封口；

    var res = $("<p>this is pa</p>").replaceAll($('#div001'));

    console.log(res);

    // 不需要添加回去；

    // $('#div002').before(res);

}

function btn005Click() {

    // 用不用end()都会给替换掉；

    var res = $("<p>this is use end</p>").replaceAll($('#div002')).end();

    console.log(res);

}

function btn006Click() {

    // obj2得到的竟然是[document]对象

    var obj2 = $('p').end();

    // obj得到的是[p]对象

    var obj = $("p").find("span").end();

    console.log(obj);

}

jQuery replaceWith replaceAll end的用法的更多相关文章

  1. jquery之replaceAll(),replaceWith()方法详解

    一:replaceAll() replaceAll()函数用于使用当前匹配元素替换掉所有的目标元素. 该函数属于jQuery对象(实例). 语法 jQuery 1.2 新增该函数. jQueryObj ...

  2. jquery中关于append()的用法笔记---append()节点移动与复制之说

    jquery中关于append()的用法笔记---append()节点移动与复制之说 今天看一本关于jquery的基础教程,看到其中一段代码关于append()的一行,总是百思不得其解.于是查了查官方 ...

  3. jquery操作HTML5 的data-*的用法实例分享

    .mm{width:256px; height:200px;} .mm[data-name='张含韵']{background:url(http://image.zhangxinxu.com/imag ...

  4. jQuery event,冒泡,默认事件用法

    jQuery event,冒泡,默认事件用法 <%@ page language="java" import="java.util.*" pageEnco ...

  5. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  6. jquery中的$.fn的用法

    JQuery里的原型prototype分析       http://www.nowamagic.net/librarys/veda/detail/653 jquery中的$.fn的用法       ...

  7. jQuery each和js forEach用法比较

    本文实例分析了jQuery each和js forEach用法.分享给大家供大家参考,具体如下: 对于遍历数组的元素,js代码和jquery都有类似的方法,js用的是forEach而jquery用的是 ...

  8. js中return false; jquery中需要这样写：return false(); Jquery 中循环 each的用法 for循环

    js中return false; jquery中需要这样写:return false(); Jquery 中循环 each的用法 $(".progressName").each(f ...

  9. 【jQuery】praseFloat()方法的用法及注意事项

    [jQuery]praseFloat()方法的用法及注意事项 praseFloat():  用于解析一个字符串,并返回一个浮点数 语法:                praseFloat(strin ...

随机推荐

  1. 前端复制功能的若干 -- document.execCommand()

    最近涨停科技公司实习,由于backend基础太弱...强行前端了一把..搞了两周才搞下页面里copy的功能,期间有些琐碎,恐忘,记录在此. 目前copy主流有四种方式:ZeroClipboard,Cl ...

  2. PS2键盘 + LCD12864 实验

    本实验是通过LCD12864来显示键盘上被按下的按键,实验比较简单,在LCD12864固定的DDRAM地址上显示,缺点就是不能保存上一次被按的内容,后者会覆盖掉前面,所以屏上仅有一个字符显示.保存上一 ...

  3. office web apps部署（二）

    1.安装composer 参考 http://docs.phpcomposer.com/00-intro.md 根据系统选择安装方式 修改php.ini   去掉extension=php_opens ...

  4. 在win10环境下安装eclipse mars版本

    1下载eclipse软件.下载地址:http://www.eclipse.org/downloads/ 不要下载.exe文件.直接下载安装包,下载对应的安装包,我下载的是这个Eclipse IDE f ...

  5. location下的属性集锦

    location.protocol="http:"//即,协议 location.hostname="zhidao.baidu.com"//即,主机域名

  6. mustache.js使用基本（二）sections

    作者:zccst 本文记录基本使用二,主要讲sections. {{#person}} {{/person}} 1,当person是null, undefined, false, 0, NaN, &q ...

  7. 3、手把手教你Extjs5(三)MVVM特性的简单说明

    下面我们来看一下自动生成的代码中的MVVM架构的关系.Main是一个可视的控件,MainController是这个控件的控制类,MainModel是这个控件的模型类. 在上面的图片中,左边是Main. ...

  8. LPC1788系统时钟初始化

    #ifndef __SYS_H_ #define __SYS_H_ #include "common.h" #define SystemCoreClock  120000000  ...

  9. FZU 2095 水面高度

    一共六种情况.手算即可. #include<cstdio> #include<cstring> #include<cmath> int T; double a,b, ...

  10. RDA5820收音机芯片驱动

    RDA5820 是北京锐迪科推出的一款集成度非常高的立体声 FM收发芯片.该芯片具有以下 特点:   FM 发射和接收一体   支持 65Mhz~115Mhz的全球 FM接收频段,收发天线共用. ...