JQuery的追加元素小案例

最新推荐文章于 2024-09-01 12:28:44 发布

土土tu

最新推荐文章于 2024-09-01 12:28:44 发布

阅读量239

点赞数

文章标签： jquery html5 ajax

原文链接：https://blog.csdn.net/qq_46291038/article/details/120071471?spm=1001.2014.3001.5501

版权

这篇博客详细介绍了使用jQuery进行DOM操作，包括追加元素、选择子元素、删除元素、清空元素内容以及修改元素样式。通过示例展示了如何使用jQuery的`prepend`、`first-child`、`last-child`、`eq`、`addClass`、`removeClass`、`before`和`after`等方法。此外，还提供了具体的JavaScript代码片段来实现这些功能。

摘要由CSDN通过智能技术生成


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
        .fire{
            background-color: red;
        }
    </style>
 
</head>
<body>
    <ul>
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
        <li class="fire">四娃</li>
        <li>五娃</li>
        <li>六娃</li>
        <li>七娃</li>
    </ul>
    <input type="button" value="点击一下，追加一个娃娃" id="appendBtn">
    <input type="button" value="子元素选择器之查找第几个儿子，类似 eq" id="childBtn">
    <input type="button" value="删除元素" id="delBtn">
    <input type="button" value="清空标签下的所有元素" id="emptyBtn">
    <input type="button" value="给四娃添加一个背景色" id="cssBtn">
    <input type="button" value="给四娃删除一个背景色" id="delCssBtn">
    <input type="button" value="给五娃前面加个孙悟空" id="beforBtn">
    <input type="button" value="给五娃后面加个唐僧" id="afterBtn">
    
 
    <script>
        $(function() {
            //追加娃娃
            $('#appendBtn').click(function() {
              //第一步 构建一个 jquery dom元素
             var liDom=$("<li>娃娃</li>");  //这叫做构建  jquery的dom元素
             //$('ul').append(liDom);  //追加只会在末尾加
               // liDom.appendTo("ul");
                //理解，append 和 appendTo的区别
            //$('ul').prepend(liDom);  //前面追加
            liDom.prependTo("ul");   //前面追加
 
            })
        });
        
 
        //子元素 选择器  获取第几个元素
        $('#childBtn').click(function() {
          //获取第一个li元素
        //  console.log($('ul li:eq(0)'))  
          console.log($('ul li:first-child'));
          console.log($('ul li:first'));
          //获取最后一个元素
          console.log("-----------------------------")
          console.log($('ul li:last-child'));
          console.log($('ul li:last'));
          //获取指定元素 如：第三个
          console.log("-----------------------------")
          console.log($('ul li:eq(2)'));
          console.log("ul li:nth-child(1)");  //注意：nth 从1开始
 
       
 
        })
         //删除元素
         $('#childBtn').click(function() {
            $('#delBtn').click(function() {
                //比如删除第一个元素
                // $('ul li:first').remove();
                $('ul li:eq(2)').remove();
             })
        })
        //清空  一个标签下的所有元素
        $('#emptyBtn').click(function() {
                $('ul').empty();
        })
             //给元素加属性
             $("#cssBtn").click(function() {
               $("ul li:eq(3)").addClass('fire')  ;
             })
             //删除一个属性
             $("#delCssBtn").click(function() {
               $("ul li:eq(3)").removeClass('fire')  ;
             })
 
             //给指定元素前面加入元素
             $("#beforBtn").click(function() {
               $("ul li:eq(4)").before($("<li>孙悟空</li>"))
             })
 
              //给指定元素后面加入元素
              $("#afterBtn").click(function() {
               $("ul li:eq(4)").after($("<li>唐僧</li>"))
             })
 
    </script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「雪蛋不是蛋(^_−)☆」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_46291038/article/details/120071471