文档的增删改
添加元素
- 添加/替换元素
append(content) - 向当前内容的最后插入指定内容
prepend(content) - 向当前匹配的所有元素的最前面插入指定的内容
before(content) - 将指定内容插入到当前所有匹配元素的前面
after(content) - 将指定内容替换所有匹配的标签
replaceWith(content)
删除元素 - 删除所有匹配元素的子元素
empty() - 删除所有匹配元素
remove()
<ul id="ul1">
<li>AAAAA</li>
<li title="hello">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two">EEEEE</li>
<li>FFFFF</li>
</ul>
<br>
<br>
<ul id="ul2">
<li>aaa</li>
<li title="hello">bbb</li>
<li class="box">ccc</li>
<li title="hello">ddd</li>
<li title="two">eee</li>
</ul>
<script>
$(function () {
//1.向id为ul1的ul下添加一个span(最后)
$('#ul1').append('<span>append()添加的span标签</span>');
$('<span>appendTo添加的span</span>').appendTo('#ul1');
//2.向id为ul1的ul下添加一个span(最前)
$('#ul1').prepend('<span>prepend添加的span标签</span>');
$('<span>prependTo()添加的span标签</span>').prependTo('#ul1');
//3.在id位ul1的ul下的li(title位hello)的前面添加span
$('#ul1>li[title=hello]').before('<span>before()添加的span</span>');
//4.在id为ul1的ul下的li(title为hello)的后面添加span
$('#ul1>li[title=hello]').after('<span>after添加的span</span>');
//5.将在id为ul2的ul下的li(title=hello)全部替换为span
$('#ul2>li[title=hello]').replaceWith('<p>replaceWith()替换的p</p>');
//6.移除id为ul2下的所有li
$('#ul2').empty();
});
</script>
事件的绑定
- 事件的绑定(两种方式)
eventName(function(){});
绑定对应事件名的监听,例如:KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲div').click(fun…(’#div).on(‘click’,function(){});
优缺点:
eventName:编码方便,但是只能加一个监听,且有的事件监听不支持
on:编码不方便,但是可以添加多个监听,且更加通用
下面的回调函数我使用的是ES6的写法,也可以使用ES5的回调函数写法替换掉ES6的回调函数,效果一样
<div class="out">
外部DIV
<div class="inner">内部div</div>
</div>
<div class='divBtn'>
<button id="btn1">取消绑定所有事件</button>
<button id="btn2">取消绑定mouseover事件</button>
<button id="btn3">测试事件坐标</button>
$(function () {
// 需求:
// 1. 给.out绑定点击监听(用两种方法绑定)
$('.out').click(() => {
console.log('out click1');
})
$('.out').on('click', () => {
console.log('out click12');
})
// 2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
$('.inner').mouseenter(() => {
console.log('进入...');
}).mouseleave(() => {
console.log('离开...');
})
$('inner').on('mouseenter', function () {
console.log('进入');
}).on('mouseleave', function () {
console.log('离开...');
})
$('.inner').hover(() => {
console.log('进入')
}, () => {
console.log('离开');
})
});
解除绑定(off(eventName))
// 3. 点击btn1解除.inner上的所有事件监听
$('#btn1').click(() => {
$('inner').off();
})
事件坐标
event.clientX,event.ClientY 相对于视口的左上角
event.pageX,event.pageY 相对于页面的左上角
event.offsetX,event.offsetY 相对于事件元素的左上角
// 4. 点击btn2解除.inner上的mouseover事件
$('#btn2').click(() => {
$('.inner').off('mouseoff');
})
$('#btn3').click(function (event) {
console.log('click inner');
//停止事件冒泡
event.stopPropagation();
})
// 5. 点击btn3得到事件坐标
$('#btn3').click((event) => {
//
console.log(event.offsetX, event.offsetY);
// 相对于页面左上角
console.log(event.clientX, event.clientY);
//
console.log(event.pageX, event.pageY);
})
事件的相关处理
停止事件冒泡:event.stopPropagation()
阻止事件默认行为:event.preventDefault()
$('.inner').click((event) => {
console.log('click inner');
//停止事件冒泡
event.stopPropagation();
})
// 7. 点击链接, 如果当前时间是偶数不跳转
$('#test4').click((event) => {
var time = Date.now(event);
alert(time);
if (time % 2 === 0) {
//阻止事件的默认行为
event.preventDefault();
}
})