Jquery - Jquery中的DOM操作 - 《代码知识》

插入操作
- 内部插入
- 外部插入
删除
克隆
替换
包裹
查找
案例:

插入操作

内部插入

append（content）向匹配的元素内部追加内容。
appendTo（content）把匹配的元素追加到另一个指定的元素集合中prepend（content）内容前置到匹配的元素内部；
prependTo（content）把匹配的元素前置到另一个、指定的元素集合中

外部插入

after（content）在匹配的元素之后插入内容。
before（content）在匹配的元素之前插入内容。
insertAfter（content）把匹配的元素插入到另一个、指定的元素集合的后面。
insertBefore（content）把匹配的元素插入到另一个、指定的元素元素集合的前面

删除

<!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="../jquery-3.3.1.min.js"></script>
</head>
<body>
    <input type="button" id="btu" value="点击">
    <ul id="chi">
        <li id="lzj">辣子鸡</li>
        <li id="xsy">香酥鸭</li>
    </ul>
    <script>
        $('btu').click(function(){
            //删除选中节点的内容
            $('#chi').empty();
            //删除选中节点
            $('#chi').remove();
            //删除指定节点
            $('#chi').remove('lzj');
        });
    </script>
</body>
</html>

Empty（）：删除选中元素的子节点及所有内容；
Remove（）：删除选中节点，

克隆

<!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="../jquery-3.3.1.min.js"></script>
</head>
<body>
    <input type="button" id="btu" value="点击">
    <ul id="chi">
        <li id="lzj">辣子鸡</li>
        <li id="xsy">香酥鸭</li>
    </ul>
    <script>
        $('#lzj').click(function(){
            alert(33);
        });
        $('#btu').click(function(){
            //克隆节点并添加到指定节点下
            $('#lzj').clone.appendTo('#chi');
            //克隆节点并添加到指定节点下，同时克隆事件绑定
            $('#lzj').clone(true).appendTo('#chi');
        });
    </script>
</body>
</html>

clone（[Even]）
克隆匹配的DOM元素
Even：一个布尔值（true或者false）指示事件处理函数是否会被复制。

替换

<!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="../jquery-3.3.1.min.js"></script>
</head>
<body>
    <input type="button" id="btu" value="点击">
    <ul id="chi">
        <li id="lzj">辣子鸡</li>
        <li id="xsy">香酥鸭</li>
    </ul>
    <script>
        $('#btu').click(function(){
            //替换选中元素的内容
            $('#lzj').html('sasdasdas');
            //替换选中的元素
            $('#lzj').replaceWith('<li>sasdasdas</li>');
        });
    </script>
</body>
</html>

replaceWith（content）将所有匹配的元素替换成指定的HTML或DOM元素。
html（[val]）val有值，则用于设定HTML内容的值，没有则获取内容值；

包裹

<!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="../jquery-3.3.1.min.js"></script>
</head>
<body>
    <input type="button" id="btu" value="点击">
    <ul id="chi">
        <li id="lzj">辣子鸡</li>
        <li id="xsy">香酥鸭</li>
    </ul>
    <script>
        $('#btu').click(function(){
            //将所有匹配的元素使用指定标签包裹
            $('li').wrap('<s>asad</s>');
            //删除父级节点
            $('li').unwrap();
            //使用一个元素包含所有选中元素
            $('li').wrapAll('<strong></strong>');
            //将选中元素的子节点或者内容，使用指定节点包裹
            $('li').wrapInner('<i></i>');
        });
    </script>
</body>
</html>

wrap（htmllelelfn）
把所有匹配的元素用其他元素的结构化标记包裹起来。
unwrap（）
移出选中元素的父元素
wrapAll（htmllele）
将所有匹配的元素用单个玩素包裹起来
wraplnner（htmllelelfn）
将每一个匹配的元素的子内容（包括文本节点）用一个HTML结构包裹起来

查找

案例:

<!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="../jquery-3.3.1.min.js"></script>
    <style>
        #box{
            width: 400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="box">
        <input type="text" value="" id="list_value" style="width: 300px;">
        <input type="button" value="添加任务" id="add">
        <div class="lists">
            <div><input type="checkbox"><span>明天去吃小龙虾</span></div>
        </div>
        <hr>
        <p id="s">隐藏</p>
        <div id="hide">
            <div><s>看电影</s></div>
        </div>
    </div>
</body>
<script>
    $('#add').click(function(){
        //获取文本框内容
        var val = $('list_value').val();
        if(val != ''){
            //创建任务表单
        var lists = '<div><div><input id="t2" type="checkbox"><span>'+val+'</span></div></div>';
        //添加到任务列表
        $('.lists').prepend(lists);
        //添加完成后将文本框内容清空
        $('#t2').on('click',function(){
            var v =$(this).next().html();
            var o = '<div><s>'+v+'</s></div>';
            $('#hide').parent(o);
            $(this).parent().remove();
        });
        $('#list_value').val('');
        }else{
            alert('任务不能为空');
        }
    });
$('#s').toggle(function(){
    $('#hide').hide(1000,function(){
        $('#s').html('显示');
    });
},function(){
    $('#hide').show(1000,function(){
        $('#s').html('隐藏');
    });
});
</script>
</html>