码迷,mamicode.com
首页 > Web开发 > 详细

jQuery之文档

时间:2020-07-10 17:19:18      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:remove   节点   一个   round   abs   eee   内容替换   jquery   hello   

添加节点

append(content)/appendTo():向当前匹配的所有元素内部的最后插入指定内容。

prepend(content)/preppendTo():向当前匹配的所有元素内部的最前面插入指定内容。

before(content):将指定内容插入到当前所有匹配元素的前面。

after(content):将指定内容插入到当前所有匹配元素的后面。

替换节点

replaceWith(content):用指定内容替换所有匹配的标签。

删除节点

empty():删除所有匹配元素的子元素。

remove():删除所有匹配的元素。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档_增删改</title>
    <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>
</head>
<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>

<script type="text/javascript" src="../js/jquery.min.js"></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
     */
    $(function (){
        //1.向id为ul1的ul下添加一个span(最后)
        $(#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>li[title=hello]).before(<span>before()添加的span</span>);
        //4.在id为ul1的ul下的li(title为hello)的后面添加span
        $(#ul1>li[title=hello]).after(<span>after()添加的span</span>);
        //5.将在id为ul2的ul下的li(title为hello)全部替换为p
        $(#ul1>li[title=hello]).replaceWith(<p>replaceWith()替换的p</p>);
        //6.移除id为ul2的ul下的所有li
        $(#ul2).empty();
    });
</script>
</body>
</html>

jQuery之文档

标签:remove   节点   一个   round   abs   eee   内容替换   jquery   hello   

原文地址:https://www.cnblogs.com/hfl1996/p/13279923.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!