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. CultureInfo中重要的InvariantCulture

    CultureInfo简述 CultureInfo类位于System.Globalization命名空间内,这个类和这个命名空间许多人都不了解也认为不需要太多了解,实际上,你写的程序中会经常间接得使用 ...

  2. 漂亮的HTML表格 - ebirdfighter的日志 - 网易博客

    一个像素边框的表格: Info Header 1 Info Header 2 Info Header 3 Text 1A Text 1B Text 1C Text 2A Text 2B Text 2C ...

  3. [iOS] 响应式编程开发-ReactiveCocoa(一)

    什么是响应式编程 响应式编程是一种面向数据流和变化传播的编程范式.这意味着可以在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将变化的值通过数据流进行传播. 例如,在命令式编程环境中 ...

  4. 用C语言写一个“事件”的模拟程序

    源:用C语言写一个“事件”的模拟程序 Example.c //定义一个函数指针 func int (*func) (void); //调用该函数相当于触发了事件. //该事件触发后,会检查函数指针fu ...

  5. codeforces #309 DIV2

    这场并没有做,做的赛后的,太晚了时间,中午做了两题,稍微贴一下,剩余的题目本周争取补完 A题: 链接:http://codeforces.com/contest/554/problem/A #incl ...

  6. tp框架 使用ajax

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  7. cf Round 594

    A.Warrior and Archer(思维) 战士一定会ban掉当前边缘的位置.而战士和射手就会选择剩下的最远的两点.我们让剩下的最远的两点最近就达到了均衡.于是我们枚举战士ban掉的边缘,ban ...

  8. X-001 FriendlyARM Tiny4412 uboot移植前奏

    版权声明:本文为博主原创文章,转载请注明出处 开发环境:win7 64位 + VMware12 + Ubuntu14.04 64位 工具链:linaro提供的gcc-linaro-6.1.1-2016 ...

  9. Python学习【第十二篇】模块(2)

    序列化 1.什么是python序列化? 把变量从内存中变成可存储或传输的过程称之为序列化,在Python中叫pickling 序列化就是将python的数据类型转换成字符串 反序列化就是将字符串转换成 ...

  10. C#中BASE64和图片相互转换

    //图片 转为    base64编码的文本        private void button1_Click(object sender, EventArgs e)        {        ...