jQuery第三十一篇 增 删 替换 复制

最新推荐文章于 2022-03-02 20:03:59 发布
最新推荐文章于 2022-03-02 20:03:59 发布
阅读量460 收藏
点赞数 1
分类专栏： jQuery最详解
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37805832/article/details/108011749
版权

//增

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="./jquery-1.10.1.min.js"></script>
</head>
<body>
	<script>
      $(function()
        {
            $("button").click(function()
            {
                var $li=$("<li>李文</li>");
                //增加节点
                /*$("ul").append($li);//后面
                $("ul").prepend($li);//前面
                */
                //$li.appendTo("ul");
                //$li.prependTo("ul");
                //$("ul").after($li);
               // $("ul").before($li);
               //$li.insertAfter("ul");
               核心:注意一下多的话，会覆盖的哦
            });
        });
	</script>
<button>添加节点</button>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>
<div>我是div</div>
</body>
</html>

//删除

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="./jquery-1.10.1.min.js"></script>
</head>
<body>
	<script>
      $(function()
        {
            $("button").click(function()
                {
                    //$("div").remove();//删除div,包括里面的内容
                    //$("div").empty();//删除div里面的内容,不删除div
                    // 利用remove方法删除之后,删掉remove那段,再浏览器里面刷新,然后事件无法响应
                    // 但是利用detach事件可以响应哦
                    //$("div").detach();
                    
                });
        });
	</script>
<button>删除节点</button>
<ul>
    <li class="item">我是第1个li</li>
    <li>我是第2个li</li>
    <li class="item">我是第3个li</li>
    <li>我是第4个li</li>
    <li class="item">我是第5个li</li>
</ul>
<div>我是div
    <p>我是段落</p>
</div>
</body>
</html>

//替换

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="./jquery-1.10.1.min.js"></script>
</head>
<body>
	<script>
      $(function()
        {
          $("button").click(function()
            {
                var $h6=$("<h6>我是标题</h6>");
                //$("h1").replaceWith($h6);
                //$h6.replaceAll("h1");
            });
        });
	</script>

<button>替换节点</button>
<h1>我是标题1</h1>
<h1>我是标题1</h1>
<p>我是段落</p>
</body>
</html>

//复制

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="./jquery-1.10.1.min.js"></script>
</head>
<body>
	<script>
      $(function()
        {
            $("button").eq(0).click(function()
                {
                    //浅复制
                    var $li=$("li:first").clone(false);
                    $("ul").append($li);

                });
             $("button").eq(1).click(function()
                {
                    //深复制
                    var $li=$("li:first").clone(true);
                    $("ul").append($li);
                     
                });
             $("li").click(function()
                {
                    alert($(this).html());
                });
        });
	</script>

<button>浅复制节点</button>
<button>深复制节点</button>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
</ul>
</body>
</html>
贵哥的编程之路(热爱分享)
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery对table表格进行增删改查
10-20
主要为大家详细介绍了jQuery对table表格进行增删改查操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery之设置元素内容(克隆元素,使用clone()方法)
fhd001的专栏
04-08 6199
jquery之设置元素内容(克隆元素,使用clone()方法)
2021/10/28 前端开发之JavaScript+jQuery入门 第十一章jQuery操作DOM
Abcdzzr的博客
10-29 879
1.DOM操作分为三类 DOM Core(核心)：任何一种支持DOM的编程语言都可以使用它，getElementById(“title”) HTML-DOM：用于处理HTML文档，如document.getElementById(“title”).innerHTML CSS-DOM：用于操作CSS，如document.getElementById(“title”).style.color="green" jQuery继承并发扬了JavaScript对DOM对象的操作特性，使开发者可以方便地操作DOM对
【JavaScript】第二十三天 (jQuery)
wu12378900的博客
03-02 440
jquery 1.1jQuey介绍 1.1.1javascript库 javaScript库：即 library ，是一个封装好的特定集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。我们可以快速高效的使用这些封装好的功能了。 比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。  &nbsp
jQuery基础篇
全栈攻城狮JSON的博客
06-09 307
目录 一、概念 二、jQuery的安装 1、版本 2、下载 3、jQuery使用 三、jQuery语法结构 1、基础语法 2、文档就绪事件 四、jQuery选择器 1、元素/标签选择器 2、id选择器 3、class选择器 4、全局选择器 5、并集选择器 6、后代选择器 7、子选择器 8、相邻元素选择器 9、同辈元素 10、属性选择器 11、可见性选择器 12、选择器案例 五、jQuery常用函数 六、jQuery与js对象转换 七、jQuery中的事件 1
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查
03-01
ssm框架整合+jQuery+Bootstrap实现表格数据增删改查 适用于学习ssm框架 jQuery 和 Bootstrap的案例
MVC+jQuery.Ajax异步实现增删改查和分页
10-22
主要为大家详细介绍了MVC结合jQuery.Ajax异步实现增删改查和分页的相关资料，感兴趣的小伙伴们可以参考一下
纯Jquery表格全选+反选+增删查找
11-13
纯Jquery表格全选+反选+增删查找,一个简陋版本，仅供参考，细节处理不周到处请评论，后期有空修改
jQuery实现表格的增、删、改操作示例
10-17
主要介绍了jQuery实现表格的增、删、改操作,涉及基于jQuery的事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
jQuery第二十一篇 scrollTop
qq_37805832的博客
08-11 517
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .scroll{ width: 100px;
jQuery第十三篇 内容选择器（:empty :parent :contains(text） :has(selector)
qq_37805832的博客
08-03 517
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script&g
jQuery第二十三篇 移除事件
qq_37805832的博客
08-12 492
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> &l
jQuery第十篇 map方法
qq_37805832的博客
08-03 489
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script> var a
jQuery第二十二篇 事件绑定
qq_37805832的博客
08-12 485
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> &l
jQuery第二十篇 位置和尺寸操作的方法
qq_37805832的博客
08-11 480
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px;
jQuery1第十九篇 操作CSS样式的方法
qq_37805832的博客
08-11 478
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; he
jQuery第十六篇 prop
qq_37805832的博客
08-10 476
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> </head> <body> <script> $(fun
jQuery第二十四篇 事件冒泡和默行为
qq_37805832的博客
08-12 470
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px;
jquery ajax实现增删
最新发布
08-27
引用中的代码展示了使用jQuery的ajax方法进行增删操作。其中，可以使用ajax的url参数指定请求的地址，method参数指定请求的方法（如"GET"或"POST"），data参数指定发送到服务器的数据，headers参数可以设置请求头...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

贵哥的编程之路(热爱分享)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值