前端基础之操作标签—文档处理
一、操作标签
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
$('div').replaceWith('<p>wjs</p>').appendTo('body'); // 返回结果为div标签，
$('<p>wjs</p>').replaceAll('div').appendTo('body'); // 返回结果为p标签，
<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');
})
