<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建插入节点</title>
    <script type='text/javascript' src="jquery-3.2.1.js"></script>
    <script>
        $(function () {
            //创建一个<li id="aa">aa</li>
            //并加入到#city的子节点
            //1加入到元素的末(2种写法)
//            $("<li id='aa'>aaa</li>").appendTo($("#city"));
//            alert($("#aa").text());
//            $("#city").append("<li id='bb'>bbb</li>")
//            alert($("#bb").text());
//            //2加入到元素的开始(2种写法)
//            $("<li id='cc'>ccc</li>").prependTo($("#city"));
//            alert($("#cc").text());
//            $("#city").prepend("<li id='dd'>ddd</li>")
//            alert($("#dd").text());
//            //加入到某个节点后
//            $("<li id='ee'>eee</li>").insertAfter($("#bj"));
//            $("#bj").after("<li id='ff'>fff</li>");
//            //加入到某个节点前
//            $("<li id='gg'>ggg</li>").insertBefore($("#bj"));
//            $("#bj").before("<li id='hh'>hhh</li>");

            //删除节点
//            $("#city li").click(function(){
//                $(this).remove();
//            });

//            $("#city").remove();
             //清空
//              alert("要清空了")
//              $("#city").empty();
//            复制bj节点 添加到hj后面
           // clone节点时需要注意克隆后的节点的ID属性，若元节点有ID属性，
           // 则克隆后，会出现一个文档中右两个ID相同的节点的情况。

   //         $("#bj").clone().attr("id","bj2").insertAfter($("#hj"));
            //创建一个li节点，替换#city的最后一个li子节点
     //       $("<li id='asdf'>asdf</li>").replaceAll($("#city li:last"));
            //创建一个li节点，替换#city的第二li子节点
     //       $("#city li:eq(1)").replaceWith($("<li id='asbf'>[asbd]</li>"))
            //互换bj 和hj(换过去就没有了)
            //$("#bj").replaceWith($("#hj"));
//            alert(1);
//            var $bj2 = $("#bj").clone(true);
//            var $hj = $("#hj").replaceWith($bj2);
//            alert(2);
//            $("#bj").replaceWith($hj);

            //包装单个li
            $("#game li").wrap("<font color='red'></font>")
            //所有li包一起
            $("#city li").wrapAll("<font color='red'></font>")
            //包装li里面的子内容
            $("#body li").wrapInner("<font color='red'></font>")

        })
    </script>

</head>
<body>
<p>你喜欢那里</p>
<ul id="city">
    <li id="bj" value="1">北京</li>
    <li id="sh" value="2">上海</li>
    <li id="dj" value="3">东京</li>
    <li id="sr" value="4">首尔</li>
</ul>
<p>你喜欢游戏</p>
<ul id="game">
    <li id="hj" value="1">红警</li>

    <li id="ms" value="12">魔兽</li>

</ul>
<p>你喜欢哪个人</p>
<ul id="body">
    <li id="man" value="1">男</li>

    <li id="woman" value="12">女</li>

</ul>

name: <input type="text" name="username" value="ll">

</body>
</html>

jQuery选择器(添加节点及删除节点及克隆及替换及包装)第九节的更多相关文章

  1. jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法

    jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容   ,html() - 设置或返回所 ...

  2. jQuery---清空节点和删除节点

    清空节点和删除节点 //可以清空一个元素的内容 //清理门户 $("div").empty(); //完全移除元素 $("div").remove(); $(f ...

  3. JavaScript实验一(添加节点，删除节点)

    静态html页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  4. Hadoop下添加节点和删除节点

    添加节点 1.修改host   和普通的datanode一样.添加namenode的ip 2.修改namenode的配置文件conf/slaves   添加新增节点的ip或host 3.在新节点的机器 ...

  5. Hadoop记录-Hadoop集群添加节点和删除节点

    1.添加节点 A:新节点中添加账户,设置无密码登陆 B:Name节点中设置到新节点的无密码登陆 C:在Name节点slaves文件中添加新节点 D:在所有节点/etc/hosts文件中增加新节点(所有 ...

  6. c#操作xml的代码(插入节点、修改节点、删除节点等)

    bookstore.xml文件内容: 复制代码代码示例: <?xml version="1.0" encoding="gb2312"?><bo ...

  7. Redis集群增加节点和删除节点

    本文主要是承接上一篇文章Redis集群的离线安装成功以后,我们如何进行给集群增加新的主从节点(集群扩容)以及如何从集群中删除节点(集群缩容),也就是集群的伸缩,集群伸缩的原理是控制虚拟槽和数据在节点之 ...

  8. Hadoop动态增加节点与删除节点

    Hadoop的全分布式安装网上也很多教程,踩过很多坑,整理不出来了……赶紧把增加删除节点留住. 均衡数据 (1)设置数据传输带宽为64M(默认值比较低) hdfs dfsadmin -setBalan ...

  9. Docker swarm集群增加节点和删除节点

    Docker swarm集群增加节点 docker swarm初始化 docker swarm init docker swarm 增加节点 在已经初始化的机器上执行:# docker swarm j ...

随机推荐

  1. Thread.Join 和 Task.Wait 方法

    这两个方法 可以说是类似的功能,都是对当前任务进行等待阻塞,执行完毕后再进行后续处理 talk is cheap, show you code,下面一个是异步执行,一个是加了阻塞,可以对比不同执行结果 ...

  2. LInux ugo权限详解

    Linux 中的用户和组是用来控制使用者或者进程可以或者不可以使用哪些资源和硬件,是Linux权限控制最基本的方式. 用户和组可以看一下上一章的部分,先来看一下权限. 一.权限概览 在Linux下,使 ...

  3. Dynamic Inversions 50个树状数组

    Dynamic Inversions Time Limit: 30000/15000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others ...

  4. bzoj3997组合数学（求最长反链的dp）

    组合数学 给出一个网格图,其中某些格子有财宝,每次从左上角出发,只能向下或右走.问至少走多少次才能将财宝捡完.此对此问题变形,假设每个格子中有好多财宝,而每一次经过一个格子至多只能捡走一块财宝,至少走 ...

  5. vue环境搭建

    1.Window 上安装Node.js 1.Windows 安装包(.msi) 32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86 ...

  6. 大数据开发 | MapReduce介绍

    1.  MapReduce 介绍 1.1MapReduce的作用 假设有一个计算文件中单词个数的需求,文件比较多也比较大,在单击运行的时候机器的内存受限,磁盘受限,运算能力受限,而一旦将单机版程序扩展 ...

  7. 22.Linux-块设备驱动之框架详细分析(详解)

    本节目的: 通过分析块设备驱动的框架,知道如何来写驱动 1.之前我们学的都是字符设备驱动,先来回忆一下 字符设备驱动: 当我们的应用层读写(read()/write())字符设备驱动时,是按字节/字符 ...

  8. SpringMVC中redirect跳转后如何保存Model中的数据？

    @RequestMapping(value = "delete-user", method = RequestMethod.POST) public String deleteUs ...

  9. Cmder 软件中修改λ符号方法

    以前的版本 网上都有,我就不介绍了,  只介绍现在的 1. 打开Cmder软件安装位置 2. 打开vendor文件夹 profile.ps1文件 3. 找到第77行  Write-Host " ...

  10. Myeclipse 配置Tomcat 出现 “Value must be an existing directory”错误

    今天上午配了一下本机上的Myeclipse的tomcat,因为我本机上有两个版本的myeclipse,一个是用来公司开发的,一个是自己玩的,本机上装了两个版本jdk和两个版本的tomcat.配置自己玩 ...