day81-jQuery-文档操作

1. 文档操作：因为方法是jQuery的方法，所以先写 jQuery对象
    内容简要：
        1.1 追加标签    (不同级)
        1.2 前追加标签    (不同级)
        1.3 后置标签    (同级)
        1.4 前置标签    (同级)
    
    1.1 标签内部的后面追加子标签，不同级
    1.1.1 jQuery对象.append(DOM对象)：jQuery对象追加DOM对象
    示例：
        <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
        </ul>
    var liEle4 = document.createElement('li');    //增加li标签，jQuery没有这方法。
    liEle4.innerText = '4';    //设置内容

    $('ul').append(liEle4);    //追加li标签
        浏览器显示：
                1
               2
                3
                4

    1.1.2 jQuery对象.appendTo(DOM对象)：jQuery对象追加到DOM对象
        var liEle0 = document.createElement('li');
        liEle0.innerText = '0';
        
        $(liEle0).appendTo($('ul')[0]);
        浏览器显示：
                1
               2
                3
                0

    1.2 标签内部的前面追加子标签，不同级    
    1.2.1  jQuery对象.prepend(DOM对象)：jQuery对象前追加DOM对象
        var liEle0 = document.createElement('li');
        liEle0.innerText = '0';

        $('ul').prepend(liEle0);
        浏览器显示：
                0
               1
                2
                3

    1.2.2 jQuery对象.prependTo(DOM对象)：jQuery对象前追加到DOM对象
        var liEle4 = document.createElement('li');
                liEle4.innerText = '4';

        $(liEle4).prependTo($('ul')[0]);
        浏览器显示：
                4
               1
                2
                3

    1.3 后置标签，同级
        jQuery对象.after(DOM对象)：jQuery对象后面放置(DOM对象)
        jQuery对象.insertAfter(DOM对象)：jQuery插入到(DOM对象)的后面

    1.4 前置标签，同级
        jQuery对象.before(DOM对象)：jQuery对象前面放置(DOM对象)
        jQuery对象.insertBefore(DOM对象)：jQuery插入到(DOM对象)的前面

    1.5 移除和清空元素
        remove()// 从DOM中删除所有匹配的元素。
        empty()// 删除匹配的元素集合中所有的子节点。

    示例：表格按行删除，remove()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格按行删除</title>
</head>
<body>
<table border="1">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>tom</td>
            <td>18</td>
            <td><input type="button" value="删除"></td>
        </tr>
        <tr>
            <td>2</td>
            <td>marry</td>
            <td>18</td>
            <td><input type="button" value="删除"></td>
        </tr>
        <tr>
            <td>3</td>
            <td>alex</td>
            <td>38</td>
            <td><input type="button" value="删除"></td>
        </tr>
    </tbody>
</table>

<script src="jquery-3.4.1.min.js"></script>
<script>
//通过button找到的标签有三个，this是DOM对象，指的是当前点击对象
    $(':button').click(function () {
        $(this).parent().parent().remove();
    });

</script>
</body>
</html>    

    1.6 替换
        replaceWith()
        replaceAll()

    1.7 克隆
        clone();    //克隆标签，但是不克隆标签绑定的事件，也就是说克隆出来的新标签，点击它无法继续克隆新的标签。
        clone(true);    //克隆标签，并且克隆标签绑定的事件
    示例：点击克隆按钮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>点击复制按钮-clone</title>
</head>
<body>
<button>点我送迈腾</button>
<script src="jquery-3.4.1.min.js"></script>
<script>
    //this是当前点击的DOM对象，也是具体的标签
    $('button').click(function () {
        $(this).clone(true).insertAfter(this);//克隆出来的新标签插入到this的后面
    });
    // $('button').click(function () {
    //     $(this).clone().insertAfter(this);
    // });
</script>
</body>
</html>
day81-jQuery-文档操作

猜你喜欢
