<!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. servlet自动获取前端页面提交数据

    servlet自动获取前端页面jsp提交数据 以下是本人在学习过程中,因前端页面提交参数过多,后台servlet封装实体类过于麻烦而写的一个工具类,应用于jsp/servlet数据提交后,基于MVC+ ...

  2. Python面试题之生成器/迭代器

    1.为什么要有生成器? 通过列表生成式,我们可以直接创建一个列表.但是,受到内存限制,列表容量肯定是有限的.而且,创建一个包含100万个元素的列表,不仅占用很大的存储空间,如果我们仅仅需要访问前面几个 ...

  3. 初识Hibernate之关联映射（二）

    上篇我们介绍了关联映射的几种形式,有单向多对一,单向一对多,还有双向一对多.本篇接着介绍有关关联映射的其他几种映射方式,主要有以下几种: 基于外键的单向一对一关联映射 基于主键的单向一对一关联映射 单 ...

  4. ASP.NET没有魔法——ASP.NET MVC 与数据库之EF实体类与数据库结构

    大家都知道在关系型数据库中每张表的每个字段都会有自己的属性,如:数据类型.长度.是否为空.主外键.索引以及表与表之间的关系.但对于C#编写的类来说,它的属性只有一个数据类型和类与类之间的关系,但是在M ...

  5. ZOJ2212 Argus 优先队列 结构体

    #include <iostream> #include <string> #include <queue> using namespace std; struct ...

  6. 简单的CSS颜色查看工具

    可以通过输入ARGB(A代表透明度)格式或者HEX格式查看颜色,也可以进行ARGB格式和者HEX格式转换,如下图 使用C#编写,我已将源代码压缩上传 下载地址:http://files.cnblogs ...

  7. every();some();filter();map();forEach()各自区别：

    every();some();filter();map();forEach()各自区别: (1)every()方法:(返回值为boolean类型) 对数组每一项都执行测试函数,知道获得对指定的函数返回 ...

  8. Sql Server 数据库中调用dll文件

    1.首先新建一个空的解决方案,并添加一个类库,代码如下,编译并生产dll using System; using System.Collections.Generic; using System.Da ...

  9. 一些精妙的sql语句收集

    --1.说明:复制表(只复制结构,源表名:a 新表名:b) (Access可用) --法一: select * into b from a where 1<>1 --法二: select ...

  10. angular添加,查找与全部删除

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...