<!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. ARKit 增强现实平台 尝试(Xcode9 iOS11 A9处理器)

    一, Xcode 将加​​载其主页面并显示模板选择页面.模板简化了入门过程.然后选择增强现实应用程序图标,单击"下一步"按钮. 二, 运行程序会看到一个飞机 三,尝试更换模型 在这 ...

  2. hdu4614 线段树+二分 插花

    Alice is so popular that she can receive many flowers everyday. She has N vases numbered from 0 to N ...

  3. [Sdoi2010]星际竞速

    个人对山东省选已经十分无语了,做了三道题,都TM是费用流,这山东省选是要干什么,2009--2011连续三年,只要会费用流,然后建个边,跑一跑就过了. 10 年一度的银河系赛车大赛又要开始了.作为全银 ...

  4. OpenVPN client端配置文件详细说明(转)

    本文将介绍如何配置OpenVPN客户端的配置文件.在Windows系统中,该配置文件一般叫做client.ovpn:在Linux/BSD系统中,该配置文件一般叫做client.conf.虽然配置文件名 ...

  5. 单独创建一个Android Test Project 时junit 的配置和使用

    现在的集成ADT后Eclipse都可以直接创建Android Test Project 如图所示: 命名后选择你要测试的单元程序,比如我自己准备测试sms,便可以如图所示那样选择 本人新建的测试工程为 ...

  6. Sql语句构造类,多字段新增或修改时,拼装sql语句比较方便

    using System; using System.Collections.Generic; using System.Text; namespace MSCL { #region 使用示例 /* ...

  7. 学习总结---OSPF协议

    总结: 1.ospf协议报文不会泛洪扩散,而是逐级路由器处理后,再从所有ospf启用端口发送出去,也就是说,只能从邻居接收到ospf报文,报文的源ip是邻居的ip地址,目的ip是组播ip. 2.开启o ...

  8. java中重载变长参数方法

    一.测试代码 package com.demo; public class Interview { public static void test(int i){ System.out.println ...

  9. [ZJOI2005]九数码游戏

    [ZJOI2005]九数码游戏 题目描述 输入输出格式 输入格式: 输入文件中包含三行三列九个数,同行的相邻两数用空格隔开,表示初始状态每个方格上的数字.初始状态不会是目标状态. 输出格式: 如果目标 ...

  10. JavaScript函数之作用域 / 作用链域 / 预解析

    关于作用域和作用链域的问题,很多文章讲的都很详细,本文属于摘录自己觉得对自己有价值的部分,留由后用,仅供参考,需要查看详细信息请点击我给出的原文链接查看原文件 做一个有爱的搬运工~~ -------- ...