jquery 动态增减元素

最新推荐文章于 2022-10-31 19:38:33 发布
最新推荐文章于 2022-10-31 19:38:33 发布
阅读量154 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18932003/article/details/119703371
版权 
t176
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //删除元素
            //empty，清空元素
           $("#btn1").click(function () {
               $("ul li:nth-child(4)").empty();
           });
        });
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input type="button" id="btn1" value="删除">
</body>
</html>

t177
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //复制元素
            //clone（bool），true时也复制事件，false只复制节点
           $("li").click(function () {
               alert("虾米大王");
           });
           $("#btn1").click(function () {
               //var $li = $("ul li:nth-child(4)").clone(true);
               var $li = $("ul li:nth-child(4)").clone(false);
               $("ul").append($li);
           });
        });
</script>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
    <input type="button" id="btn1" value="删除">
</body>
</html>

t178
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //替换元素
            //$(A).replaceWith(B) ，表示用B来替换A
           $("#btn1").click(function () {
               $("strong").replaceWith("<a href='http://www.baidu.com'>百度</a>");
           });
        });
</script>
</head>
<body>
    <strong>jQuery教程</strong><br>
    <input type="button" id="btn1" value="替换">
</body>
</html>

t179
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //替换元素
            //$(A).replaceWith(B) ，表示用A来替换B
            $("#btn1").click(function () {
                $("<a href='http://www.baidu.com'>百度</a>").replaceAll("strong");
            });

            /*
            在jQuery中，replaceAll和replaceWith两个方法功能相似，但是
            两者的操作对象是颠倒的
             */
        });
</script>
</head>
<body>
<strong>jQuery教程</strong><br>
<input type="button" id="btn1" value="替换">
</body>
</html>

t180
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //包裹元素
            //$(A).wrap(B)，表示将A元素用B元素包裹。
           $("#btn1").click(function () {
               $("p").wrap("<div style='background-color: orange'></div>");
           });
        });
</script>
</head>
<body>
    <p>虾米大王</p>
    <p>虾米大王</p>
    <p>虾米大王</p>
    <input type="button" id="btn1" value="包裹">
</body>
</html>

t181
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //包裹元素
            //$(A).wrapAll(B)，表示将A元素用B元素包裹。
            $("#btn1").click(function () {
                $("p").wrapAll("<div style='background-color: orange'></div>");
            });
        });

        /*
        在jQuery中，replaceWith 和 replaceAll 这两个方法的功能是相同的，
        但是操作对象是颠倒的。
        但是，warp 和 warpAll 这两个功能与之前不同，
        warp方法是将所有元素单独包裹的，
        warpAll是将所有元素整体包裹的。
         */
</script>
</head>
<body>
    <p>虾米大王</p>
    <p>虾米大王</p>
    <p>虾米大王</p>
    <input type="button" id="btn1" value="包裹">
</body>
</html>

t182
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //包裹元素
            //$(A).wrapInner(B)，表示将A元素的内部所有元素和文本，用B包裹，但不包含A本身
           $("#btn1").click(function () {
               $("p").wrapInner("<strong></strong>");
           });
        });
</script>
</head>
<body>
    <p>虾米大王</p>
    <p>虾米大王</p>
    <p>虾米大王</p>
    <input type="button" id="btn1" value="包裹">
</body>
</html>

t183
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //遍历元素
            //each
           $("#btn1").click(function () {
              $("li").each(function (index,element) {
                 var txt = "第" + (index + 1) + "个li元素";
                 //$(element).text(txt); 与下方等价
                 $(this).text(txt);
              });
           });
        });

        /*
        在jQuery中，对元素进行遍历需要用到each，
        它有两个参数index和element，均是可选参数
        index，表示元素的索引号，即下标，从0开始，
        element，表示当前元素，可以使用$(this)替代，
        如需退出循环，调用return fales即可。
        这里插一句，这个each理解起来有些困难的，
        不像for循环那么好理解，我是理解了很长时间，
        才有点明白了怎么用的。
         */
</script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <input type="button" id="btn1" value="添加内容">
</body>
</html>

t184
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //遍历元素
            //为每个li元素添加内容
           var arr = ["HTML","CSS","Javascript","jQuery","Vue.js"];
           $("#btn1").click(function () {
               $("li").each(function (index) {
                  var text1 = arr[index];
                  $(this).text(text1);
               });
           });
        });
</script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <input type="button" id="btn1" value="添加内容">
</body>
</html>

t185
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //遍历元素
            //举例，为每个li元素设置不同的背景颜色
           var colors = ["red","orange","yellow","green","blue"];
           $("#btn1").click(function () {
               $("li").each(function (index) {
                   $(this).css("background-color",colors[index]);
               });
           });
        });
</script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <input type="button" id="btn1" value="添加内容">
</body>
</html>

t186
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //遍历元素
            //习题，将red，orange，yellow，green，blue，依次插入li元素
            var colors = ["red","orange","yellow","green","blue"];
            $("#btn1").click(function () {
                $("li").each(function (index) {
                    $(this).text(colors[index]);
                });
            });
        });
</script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <input type="button" id="btn1" value="添加内容">
</body>
</html>

t187
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //属性操作
            //获取属性，$().attr("属性名");
           $("#btn1").click(function () {
               alert($("img").attr("src"));
           });

           $("#btn2").click(function () {
               alert($("img").attr("alt"));
           });
        });
</script>
</head>
<body>
    <img src="img/jquery.png" alt="jquery"><br>
    <input type="button" id="btn1" value="获取src属性">
    <input type="button" id="btn2" value="获取alt属性">
</body>
</html>

t188
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //属性操作
            //设置属性，$().attr("属性","取值");
           var flag = true;
           $("#btn1").click(function () {
               if(flag)
               {
                   $("#pic").attr("src","img/2.png")
                       .attr("alt","2.png");
                   flag = false;
               }
               else
               {
                   $("#pic").attr("src","img/1.png")
                       .attr("alt","1.png");
                   flag = true;
               }
           });
        });

        /*
        在jQuery，设置属性有两种方式，
        一种是，设置一个属性，另外一个是设置多个属性
        语法：
        $().attr("属性","取值");

        $().attr({"属性1":"取值1","属性2":"取值2",......});
         */
</script>
</head>
<body>
    <input type="button" id="btn1" value="修改"><br>
    <img id="pic" src="img/1.png" alt="1.png">
</body>
</html>

t189
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //属性操作
            //设置属性，多个属性
            var flag = true;
            $("#btn1").click(function () {
                if(flag)
                {
                    $("#pic").attr({
                        "src":"img/2.png",
                        "alt":"2.png",
                        "title":"2.png"
                    });
                    flag = false;
                }
                else
                {
                    $("#pic").attr({
                        "src":"img/1.png",
                        "alt":"1.png",
                        "title":"1.png"
                    });
                    flag = true;
                }
            });
        });

        /*
        在jQuery，设置属性有两种方式，
        一种是，设置一个属性，另外一个是设置多个属性
        语法：
        $().attr("属性","取值");

        $().attr({"属性1":"取值1","属性2":"取值2",......});
         */
</script>
</head>
<body>
    <input type="button" id="btn1" value="修改"><br>
    <img id="pic" src="img/1.png" alt="1.png">
</body>
</html>

t190
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .content{
            color: red;
            font-weight: bold;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //属性操作
            //删除属性，removeAttr("属性名")
           $("p").click(function () {
               $(this).removeAttr("class");
           });

           $("#btn1").click(function () {
               $("p").removeAttr("class");
           });
        });
</script>
</head>
<body>
    <p class="content">虾米大王</p>
    <input type="button" id="btn1" value="删除">
</body>
</html>

t191
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .content{
            color: red;
            font-weight: bold;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
           $("#btn_add").click(function () {
               $("p").attr("class","content");
           });

           $("#btn_remove").click(function () {
               $("p").removeAttr("class");
           });
        });
</script>
</head>
<body>
    <p>虾米大王</p>
    <input type="button" id="btn_add" value="添加样式">
    <input type="button" id="btn_remove" value="删除样式">
</body>
</html>

t192
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //属性操作
            //prop，与attr方法相似，但是有区别
           $("input[type=radio]").change(function () {
               //当使用注释中的方式，获取属性时，发现无效，此时改用prop
               //var bool = $(this).attr("checked");
               var bool = $(this).prop("checked");
               if(bool)
               {
                   $("p").text("你选择的是：" + $(this).val());
               }
           });
        });

        /*
        jQuery官方建议：
        具有true或false这两种取值的属性，比如checked，selected
        和disabled等，建议使用prop方法来操作，其他属性建议使用
        attr来操作。
        这个是因为prop的出现就是为了弥补attr方法在表单属性操作中
        的不足。
        记住一句话，如果某个属性没办法使用attr方法获取，改换prop即可。
         */
</script>
</head>
<body>
    <div>
        <input type="radio" id="apple" name="fruit" value="苹果">
        <label for="apple">苹果</label>
        <input type="radio" id="banana" name="fruit" value="香蕉">
        <label for="banana">香蕉</label>
        <input type="radio" id="watermelon" name="fruit" value="西瓜">
        <label for="watermelon">西瓜</label>
    </div>
    <p></p>
</body>
</html>

t193
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            $("input[type=radio]").change(function () {
                //获取可以使用prop，但是当我们改为设置时，返回值也可以用来判断的
                //我推荐使用第一种
                var bool = $(this).attr("checked","checked");
                //var bool = $(this).attr("checked","true");
                if(bool)
                {
                    $("p").text("你选择的是：" + $(this).val());
                }
            });
        });

        /*
        jQuery官方建议：
        具有true或false这两种取值的属性，比如checked，selected
        和disabled等，建议使用prop方法来操作，其他属性建议使用
        attr来操作。
        这个是因为prop的出现就是为了弥补attr方法在表单属性操作中
        的不足。
        记住一句话，如果某个属性没办法使用attr方法获取，改换prop即可。
         */
</script>
</head>
<body>
<div>
    <input type="radio" id="apple" name="fruit" value="苹果">
    <label for="apple">苹果</label>
    <input type="radio" id="banana" name="fruit" value="香蕉">
    <label for="banana">香蕉</label>
    <input type="radio" id="watermelon" name="fruit" value="西瓜">
    <label for="watermelon">西瓜</label>
</div>
<p></p>
</body>
</html>

t194
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{
            font-weight: bold;
        }
</style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //获取属性
            //.css("属性名");
           $("#btn1").click(function () {
               var result = $("p").css("font-weight");
               alert("font-weight=" + result);
           });
        });
</script>
</head>
<body>
    <p>虾米大王</p>
    <input type="button" id="btn1" value="获取">
</body>
</html>

qq_18932003
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery动态添加元素
Mervyn的博客
11-25 297
以前写过一篇layui table点击按钮添加、删除一行。 今天学习了一种省事的动态添加元素的方法。 参考文章：JQuery动态给LayUI table赋值。 <table class="layui-table" id="table" lay-filter="table"> <thead> <tr> <td>姓名</td> ...
Jquery动态插入li元素
热门推荐
u013023515
12-16 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
jQuery表单选项动态增加删除代码
06-12
jQuery表单选项，如文本框input等元素动态增加删除代码是一款基于addel.js插件实现的动态表单增删特效。
用jquery给同级元素实现value值的加减操作
Czhongyi的博客
07-29 542
//这里先获取页面元素的dom元素，设置点击事件 $("#reduce_num").click(function () { ///然后声明一个cont接收同级元素，这里的this指向获取到的dom元素，next表示下一个同级元素， let cont = $(this).next(); //先给一个判断，如果cont元素的value值已经是0了，做出判断，return出去不执行下面的减1操作，如果大于1则执行下面的方法，这里的parseInt是为了将页面中的value值（这..
JQuery动态创建元素
玩火的稻草人的博客
01-31 2102
今天在做动态定位系统时，使用了动态创建元素，因此好好研究了一下，总结一下，供后面使用。 一、创建元素 $()可以直接创建一个元素例如创建一个img标签 var tag=$('<img class="dingwei-map-tag" id=' + tagId + ' onclick="showinfo(this)"></img>'); tag.......
jQuery中动态创建、添加元素的方法
weixin_45846357的博客
05-17 2490
jQuery中动态创建、添加元素的方法总结 <input type="button" value="创建元素" id="btn"> <div id="box"></div> <p id="main">这是文中一段话</p> 点击按钮，动态创建元素 方法一：$()创建元素，后用append()方法添加。append() 还可以把其他地方元素添加进这个对象中。 $('#btn').click(function() { 　　var el = $('
jquery动态增减选项卡
11-24
本教程将详细讲解如何使用jQuery实现动态增减选项卡的功能，这种功能常见于各种Web应用中，如浏览器界面或者自定义用户面板。 首先，我们需要创建HTML结构来承载选项卡。每个选项卡由一个标题（通常为链接）和对应...
jquery动态增减选项卡特效代码
03-20
标题 "jquery动态增减选项卡特效代码" 涉及的核心知识点是使用jQuery库来创建交互式的选项卡（Tab）效果，特别是在网页中实现动态添加和删除选项卡的功能。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、...
jquery动态增减选项卡.zip
11-20
在动态增减选项卡的场景中，`jQuery`可以帮助我们高效地创建、删除和管理DOM元素，比如选项卡的标题和内容区域。例如，我们可以使用`append()`来添加新的选项卡，`remove()`来移除已存在的选项卡，以及`show()`和`...
jQuery给动态添加的元素绑定事件的方法
12-29
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下： jquery中绑定事件一般使用bind，或者click，但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用live。但是在1.8版本以后推荐使用on。这里介绍jQuery中如何给动态添加的元素绑定事件 在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况 例如 <div id=testdiv> <ul></ul> </div> 需要给<ul>里面动态添加的<li>标签添加click事件   jquery 1.7版以前使用live
jQuery动态创建元素以及追加节点的实现方法
10-21
下面小编就为大家带来一篇jQuery动态创建元素以及追加节点的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery动态增减选项卡.rar
07-05
本资源“jquery动态增减选项卡.rar”聚焦于利用jQuery实现动态的选项卡（Tab）功能，这在网页设计中非常常见，用于组织和展示大量信息。选项卡通常用于将页面内容分割成多个部分，每个部分都有一个单独的标签来标识...
jQuery动态统计图形插件特效代码
03-20
在jQuery插件中，线图特别适合分析数据随时间的增减，例如股票价格或网站流量。 4. 饼图：饼图是将整个圆面按比例分割成多个扇区，每个扇区代表数据的一个部分。饼图能清晰地显示各部分占总体的比例，非常适合用来...
jQuery中对动态添加的元素绑定事件
weixin_66990569的博客
10-29 4130
在对元素绑定事件时可能会出现没有效果的情况，这个时候就需要考虑，你绑定的元素是否是动态添加的，动态数据也就是使用jQuery添加的数据，下面就是针对动态数据绑定事件的解决方法；
jQuery中动态操作元素（新增，移除，判断一个元素是否有子元素）的方法
SunPeng的博客
10-31 769
jQuery中动态创建添加元素的方法
jQuery与jstl实现购物车动态加减，价钱汇总功能
Maybeno1314的博客
05-15 836
先倒入js,jquery,jstl所需要的配置，其中script操作如下 <script type="text/javascript"> //"+按钮出发的事件" ，传递进来这个按钮的id function addNum(id){ //获取dom树，相邻的节点中的值...
JQuery动态添加元素
EXSHUANG的博客
02-25 833
动态添加元素 1.先写个壳子 <div class="box"> <input type="text" name="Jbox" class="inputbox"> <img class="aj" src="../res/icon/add.png" style="margin:8px"/> </div> 2.<script...
jquery 节点操作(动态创建元素/添加元素/清空元素/复制元素)
carriehaohao的博客
03-04 7323
节点操作 1.动态创建元素 // $()函数的另外一个作用：动态创建元素 var $span = $(“我是一个span元素”); 2.添加元素 append() 作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（页面中存在或者创建出来的元素都可以） //在$(selector)中追加$node $(selector).append($no
JavaScript实现动态添加的元素添加点击事件
qq_18932003的博客
10-25 1万+
在页面开发过程中常常遇到需要动态添加元素，然后给这一元素绑定相关事件的情况，这种情况下一般需要给元素加上相关属性，然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢？ 原生JavaScript 原生JavaScript主要有2种实现方式，第一种是在动态添加的html代码中添加oclick事件，然后传递一个唯一的参数来判断点击的是哪个，然后做相应的操作。 第二种是通过事件委托的原理进行处理，事件委托将一个 事件监听器实际上绑定到整个容器，然后每个列表项被点击就可以访问，这样效率更高。 具体的.
jquery 获得动态元素的数值
最新发布
05-16
如果你要获取动态元素的数值，可以使用 jQuery 的 `val()` 方法来获取其值，例如： ```javascript // 获取 id 为 dynamicInput 的输入框的值 var value = $('#dynamicInput').val(); ``` 如果你要获取 select 元素...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值