<!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. java集合系列——List集合之ArrayList介绍（二）

    一:List概述 List是 java.util包下面的类,从<a href="http://blog.csdn.net/u010648555/article/details/5604 ...

  2. ElasticSearch入门（2） —— 基础概念

    在Elasticsearch中,文档归属于一种类型(type),而这些类型存在于索引(index)中,我们可以画一些简单的对比图来类比传统关系型数据库: Relational DB -> Dat ...

  3. android-蓝牙通信

    一:简介 由于项目曾经想用蓝牙通信,但由于蓝牙传输速度比较慢,最终还是没有使用蓝牙,不过还是在空闲之余研究了蓝牙通信,鉴于目前网上蓝牙这块教程并不多,尤其是从蓝牙扫描,蓝牙配对,蓝牙通信等完整的教程更 ...

  4. Perfect Pth Powers poj1730

    Perfect Pth Powers Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 16383   Accepted: 37 ...

  5. python之路第五篇之模块和加密算法（进阶篇：续）

    模块 Python中,如果要引用一些内置的函数,该怎么处理呢?在Python中有一个概念叫做模块(module) 简单地说,模块就是一个保存了Python代码的文件. 模块分类: 1)内置模块 2)自 ...

  6. LCT学习笔记

    最近自学了一下LCT(Link-Cut-Tree),参考了Saramanda及Yang_Zhe等众多大神的论文博客,对LCT有了一个初步的认识,LCT是一种动态树,可以处理动态问题的算法.对于树分治中 ...

  7. git 忽略文件夹

    $ vim .gitignore 添加要忽略的文件或文件夹 esc + :wq 退出vim命令行

  8. Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. MySQL笔记 存储过程 游标 触发器

    第二十三章 使用存储过程 MySQL5 中添加了存储过程的支持. 大多数SQL语句都是针对一个或多个表的单条语句.并非所有的操作都怎么简单.经常会有一个完整的操作需要多条才能完成 存储过程简单来说,就 ...

  10. 超全面！这可能是最全面的 jQuery 知识总结

    个人建议:学习 jQuery 前先掌握基本的 JavaScrpit 语法,特别是对函数要掌握,jQuery 基本上是使用函数. jQuery 简介 jQuery 是一个轻量级 JavaScript 库 ...