jQuery 之文档_增删改

最新推荐文章于 2023-11-13 21:10:07 发布

启之灵

最新推荐文章于 2023-11-13 21:10:07 发布

阅读量148

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/85565728

版权

jQuery 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用jQuery库进行DOM元素的操作，包括如何添加、删除和修改DOM节点，提升网页动态交互性能。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>17_文档_增删改</title>
</head>
<style type="text/css">
    * {
        margin: 0px;
    }

    .div1 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 20px;
        left: 10px;
        background: blue;
    }

    .div2 {
        position: absolute;
        width: 100px;
        height: 100px;
        /*top: 50px;*/
        background: red;
    }

    .div3 {
        position: absolute;
        top: 250px;
    }
</style>

<body>
<ul id="ul1">
    <li>AAAAA</li>

    <li title="hello">BBBBB</li>
    <li class="box">CCCCC</li>

    <li title="hello">DDDDDD</li>
    <li title="two">EEEEE</li>
    <li>FFFFF</li>

</ul>
<br>
<br>
<ul id="ul2">
    <li>aaa</li>
    <li title="hello">bbb</li>
    <li class="box">ccc</li>
    <li title="hello">ddd</li>
    <li title="two">eee</li>
</ul>

<!--
1. 添加/替换元素
  * append(content)
    向当前匹配的所有元素内部的最后插入指定内容
  * prepend(content)
    向当前匹配的所有元素内部的最前面插入指定内容
  * before(content)
    将指定内容插入到当前所有匹配元素的前面
  * after(content)
    将指定内容插入到当前所有匹配元素的后面替换节点
  * replaceWith(content)
    用指定内容替换所有匹配的标签删除节点
2. 删除元素
  * empty()
    删除所有匹配元素的子元素
  * remove()
    删除所有匹配的元素
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
    /*
     需求:
     1. 向id为ul1的ul下添加一个span(最后)
     2. 向id为ul1的ul下添加一个span(最前)
     3. 在id为ul1的ul下的li(title为hello)的前面添加span
     4. 在id为ul1的ul下的li(title为hello)的后面添加span
     5. 将在id为ul2的ul下的li(title为hello)全部替换为p
     6. 移除id为ul2的ul下的所有li
     */

    //1. 向id为ul1的ul下添加一个span(最后)
    var $ul1 = $('#ul1')
    // $ul1.append('<span>append()添加的span</span>')
    $('<span>appendTo()添加的span</span>').appendTo($ul1)

    //2. 向id为ul1的ul下添加一个span(最前)
    // $ul1.prepend('<span>prepend()添加的span</span>')
    $('<span>prependTo()添加的span</span>').prependTo($ul1)

    //3. 在id为ul1的ul下的li(title为hello)的前面添加span
    $ul1.children('li[title=hello]').before('<span>before()添加的span</span>')

    //4. 在id为ul1的ul下的li(title为hello)的后面添加span
    $ul1.children('li[title=hello]').after('<span>after()添加的span</span>')

    //5. 将在id为ul2的ul下的li(title为hello)全部替换为p
    $('#ul2>li[title=hello]').replaceWith('<p>replaceAll()替换的p</p>')
    //6. 移除id为ul2的ul下的所有li
    // $('#ul2').empty()  // <p>也会删除
    $('#ul2>li').remove()
</script>
</body>
</html>

启之灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 之文档_增删改

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;17_文档_增删改&lt;/title&gt;&lt;/head&gt;&lt;style type="text/css"&gt; *
复制链接

扫一扫