<!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. ThinkPHP中：RBAC权限控制的实习步骤

    使用版本ThinkPHP3.1.3 第一步,建表及数据 第二步,建关联模型 第三步,控制器使用关联模型.配置文件 第四步,模板显示数据 第一步,建表及数据 在数据库中,建立一个companysvn数据 ...

  2. java集合系列——java集合概述（一）

    在JDK中集合是很重要的,学习java那么一定要好好的去了解一下集合的源码以及一些集合实现的思想! 一:集合的UML类图(网上下载的图片) Java集合工具包位置是java.util.* 二:集合工具 ...

  3. 在ASP.NET Core中如何支持每个租户数据存储策略的数据库

    在ASP.NET Core中如何支持每个租户数据存储策略的数据库 不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻喷,如觉得我翻译有问题请挪步原博客地址 本博文翻译自: ht ...

  4. ubuntu 11.04侧边栏怎么添加图标

    打开想添加的软件,图标会出现在侧边栏,右击之,点Keep In Launcher即可

  5. Java面向对象 线程技术--上篇

     Java面向对象   线程 知识概要:                   (1)线程与进程 (2)自定义线程的语法结构 (3)多线程概念理解 (4)多线程状态图 (5)多线程--卖票 (6)同 ...

  6. jS判断浏览器终端

    在做移动端项目的时候,常常会遇到需要判断页面浏览终端的需求.要想判断是什么浏览器终端,先打印 navigator.userAgent 出来.所以收集了几种比较常用的方法: if(/(iPhone|iP ...

  7. jquery事件使用方法总结

    jquery提供了许多的事件处理函数,学习前端一段时间了,下面对其总结一下,梳理一下知识点. 一.鼠标事件 1. click():鼠标单击事件 $div = $("div") $d ...

  8. win10 uwp clone

    clone 可以用MemberwiseClone来复制一个类 但这个复制是浅复制,创建一个新的object然后复制值字段,对于引用就直接复制引用,不复制引用的本身,指向同样引用 如果要复制引用,可以使 ...

  9. [js插件开发教程]实现一个比较完整的开源级选项卡插件

    在这篇文章中,我实现了一个基本的选项卡功能:请猛击后面的链接>>   [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件. 还缺少两个常用的切换(自动切换与透明度渐变),当然 ...

  10. Django数据库操作性能相关

    Django数据库操作性能相关 案例: 现在我们的数据库中有两张表如下: 1.职员表: class UserInfo(models.Model): name = models.CharField(ma ...