49 jQuery 文档操作
主要内容:
1 append操作 : 添加到指定元素的后面
prepend操作 : 添加到指定元素内部的前面
1 )语法 : $(A).append(B) // 把b追加到a的内部
$(A).appendTo(B) // 把a追加到b的内部
var liele = document.createElement('li');
liele.innerText = '444';
$('[type="none"]')
$('[type="none"]').append(liele)
2 after操作 : 添加到指定元素外部的后面
before操作 : 添加到指定元素外部的前面
1 )语法: $(A).after(B) // 把b放在a的后面
$(A).afterTo(B) // 把a放在b的后面
u3ele = document.createElement('ul');
u3ele.innerText = 'this 标签'
$('ul').before(u3ele)
3 替换操作 :replaceWith/replaceAll
1)语法: $(A).replaceWith(B) // b替换a
aele = document.createElement('a');
$(aele).attr('href','http://www.sogo.com') 给dom对象设置属性, 需要把dom对象转换成jQuery对象
aele.innerText = 'sogo'
$('ul').replaceWith(aele)
4 克隆clone()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="屠龙宝刀,点击就送">
<script>
$("[type='button']").click(function () {
//自己复制自己, 然后把复制的结果加入到我的后面
$(this).clone(true).insertAfter(this);
// 如果clone里面不加ture, 则复制的结果不能再次复制
注意参数true,加上true会把标签绑定的事件也复制
})
// $("[type='button']").clone().insertBefore()
</script>
</body>
</html>
5 移除和清空操作
$('.u1').empty()
$('#u1').prev().remove()
6 事件委托
1 ) 定义: 事件委托就是利用事件冒泡原理实现的！
2 ) 事件冒泡：就是事件从最深节点开始，然后逐步向上传播事件；
例：页面上有一个节点树，div > ul > li > a
比如给最里面的a 加一个click 事件，那么事件就会一层一层的往外执行，执行顺序 a > li > ul > div, 有这样一个机制，当我们给最外层的div 添加点击事件，那么里面的ul ， li ， a 做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托他们父集代为执行事件；
事件冒泡的例子:
<body>
<div class="d1">
<p class="p1">
<span class="s1">div>span</span>
</p>
</div>
<script>
// $('.d1').click(function () {
// console.log(alert(789))
// });
// $('.p1').click(function () {
// console.log(alert(456))});
$('.s1').click(function (e) {
console.log(alert(123));
// e.stopPropagation()
// // 阻止事件向上传递
});
</script>
</body>
</html>
3 ) 事件委托的例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" class="b1" value="点我">
<script>
$('body').on('click','.b1',function () {
console.log(alert(123))
});
buttonele = document.createElement('button');
buttonele.innerText = '点我1';
$(buttonele).addClass('b1');
$('body').append(buttonele)
// 由于先绑定事件, 后再添加jQuery, 当刷新页面的时候,点击点我1 是不会被绑定事件的.
//由此引出事件冒泡: 当给最外层事件添加事件时, 点击最里面的事件都会冒泡到最外层事件, 所以都会触发, 这就是事件委托,委托他们父级代为执行
//所以用到on
// $('body').on('click','.b1',function () {
// console.log(alert(123))
// });
</script>
</body>
</html>
