前端基础之操作标签—文档处理

一、操作标签

　　1、文档处理

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

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

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

$(A).prepend(B);            // 把B添加到A的前面
$(B).prependTo(A);         // 把B添加到A的前面

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

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

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

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

　　　 <5>移除和清空元素

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

　　　 <6>替换

$(A).replaceWith(B)        //把A替换成B
$(B).replaceAll(A)           // 把所有匹配到的A替换成B

　　　 <7>克隆

clone()        // 有true参数，加上true会把点击事件等一块复制

　　　 <8>克隆示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<button class="b1" type="button">点我哈哈</button>
<!--type='button'取消点击会刷新页面的这个动作-->
<script>
    $('.b1').on('click',function () {
        $(this).clone(true).insertAfter(this);
    //    this谁点击就是谁
    })
</script>

</body>
</html>

二、事件

　　1、常用事件

　　2、事件绑定

　　　 <1> .on(events[,selector],function(){})

　　　　　★events：事件

　　　　　 ★selector：选择器（可选的）

　　　　　 ★function：事件处理函数

　　　 <2>给标签绑定事件的方式

　　　　　 a、在标签上写 onclick=函数名();

　　　　　 b、在js代码中标签对像.onclick = function () {}

　　　 <3>jQuery绑定事件方式

　　　　　 a、$('选择器').click(function () {} )

　　　　　 b、$('选择器').on('click',function () {} )/$('选择器').on('click','.delete',function () {} )

　　3、移除事件

　　4、阻止后续事件执行

　　　 <1>return false;　　// 常见阻止表单提交等

　　　 <2>e.preventDefault();　　// e为自定义的一个变量

　　5、阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="d1">
    <p class="p1">点我哈哈</p>
</div>
<script>
    $('.d1').click(function () {
       alert('div')
    });
    $('.p1').click(function (e) {
        alert('p');
    //    点击'点我哈哈'会弹出'p'和'div'弹框
    //     e.stopPropagation();    // 用来阻止冒泡的
    })
</script>
</body>
</html>

阻止事件冒泡

　　6、页面载入

　　7、事件委托

　　　事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

　　　示例：

　　　表格中每一行的编辑和删除按钮都能触发相应的事件。

$('table').on('click','.delete',function () {
        // 删除按钮绑定的事件
        $(this).parents().remove('tr');
})

前端基础之操作标签—文档处理

猜你喜欢