jQuery基础笔记（5）

day56

参考：https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-5

文档处理

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文档操作示例</title>
</head>
<body>

<ul id="u1">
    <li id="l1">1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script src="jquery-3.2.1.min.js"></script>
</body>
</html>

实践：

 

添加到内部的前后两端。

另一种方式append、appendTo：

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

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

02点击在表格最后添加一条记录.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>点击在表格最后添加一条记录</title>
</head>
<body>
<table border="1" id="t1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>

    <!--表格的整体-->
    <tbody>
    <tr>
        <td>1</td>
        <td>小强</td>
        <td>吃冰激凌</td>
        <td>
            <button class="delete">删除</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>二哥</td>
        <td>Girl</td>
        <td>
            <button class="delete">删除</button>
        </td>
    </tr>

    </tbody>
</table>

<button id="b1">添加一行数据</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 绑定事件
    $("#b1").click(function () {
        // 生成要添加的tr标签及数据
        var trEle = document.createElement("tr");
        $(trEle).html("<td>3</td>" +
            "<td>小东北</td>" +
            "<td>社会摇</td>" +
            "<td><button class='delete'>删除</button></td>");
        // 把生成的tr插入到表格中
        $("#t1").find("tbody").append(trEle);//添加 找到tbody标签添加
    });
    
    // 每一行的=删除按钮绑定事件
    $(".delete").click(function () { //this表示删除这一个键
        $(this).parent().parent().remove(); //删除，父标签的父标签，整行删除
    });

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

效果：

替换

replaceWith()
replaceAll()

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>替换操作示例</title>
</head>
<body>
<!--跳转-->
<p><a href="http://www.sogo.com">aaa</a></p>
<p><a href="">bbb</a></p>
<p><a href="">ccc</a></p>

<button id="b1">点我!</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $("#b1").click(function () {
            // 创建一个img标签
    var imgEle = document.createElement("img");//生成src标签
    $(imgEle).attr("src", "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2927529377,3058292508&fm=27&gp=0.jpg");
    $("a").replaceWith(imgEle);//将a标签中全部替换为img标签
//    $(imgEle).replaceAll("a");
    });


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

实践：

克隆

clone()// 参数

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>克隆示例</title>
</head>
<body>

<button id="b1">屠龙宝刀,点我就送!</button>


<script src="jquery-3.2.1.min.js"></script>
<script>
    $("#b1").click(function () {
        $(this).clone(true).insertAfter(this);//克隆一份添加,关注clone()和clone(true)的区别
    });
</script>
</body>
</html>

实践：

以上每个id都一样。

 

posted on 2019-01-08 19:40  嘟嘟嘟啦  阅读(130)  评论(0)  编辑  收藏  举报

导航