jQuery中的事件 与 BOM,DOM操作
1、元素宽高
#box {
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
var box = $('#box'); console.log(box.css('width')); // 100px // 比原生强大：可以获取隐藏元素的宽高 // 返回元素的宽高（没有单位） console.log(box.width()); // 100 width console.log(box.innerWidth()); // 120 width + padding console.log(box.outerWidth()); // 122 width + padding + border console.log(box.outerWidth(true)); // 142 width + padding + border + margin // 设置元素的宽高 box.width(200); box.innerWidth(200); box.outerWidth(200); box.outerWidth(200, true);
可视区、文档宽高
// 获取可视区的宽高 alert($(window).width()); alert($(window).height()); // 文档的宽高 alert($(document).width()); alert($(document).height());
2、元素的位置
jQuery对象.offset(); 返回元素相对于文档的距离
// 原生封装的getPos var box3 = $('.box3'); console.log(box3.offset()); // { top: 88, left: 108 }
3、滚动条
jQuery对象.scrollTop();
jQuery对象.scrollLeft();
// 获取滚动条的高度 // jQuery对象.scrollTop(); // jQuery对象.scrollLeft(); // 设置滚动条的高度 // jQuery对象.scrollTop(值); // jQuery对象.scrollLeft(值); // 滚动事件：scroll // 在窗口滚动时，不断的打印出滚动条的高度 $(window).scroll(function () { console.log($(window).scrollTop()); // 获取 }); // 在页面上点击一下，让滚动要的高度到500 $(document).click(function () { $(window).scrollTop(500); // 设置 });
2、DOM操作
1、创建节点
我们只需要给$()中传入html片段，就可以创建相应的html节点。
格式：$(html片段); // 创建节点
$('<div></div>').appendTo('body'); // 创建一个div添加到body中
$('<div id="box">平头哥</div>').appendTo('body'); // div带内容和id属性，添加到body中
2、插入节点
每种插入方法都有两个，原因是后续的链式操作不同
1、将元素插入目标中，作为子元素，放在最后
-
元素.appendTo(目标);
-
目标.append(元素);
2、将元素插入目标中，作为子元素，放在最前
-
元素.prependTo(目标);
-
目标.prepend(元素);
3、将元素插入到目标元素的后面，作为兄弟元素
-
元素.insertAfter(目标);
-
目标.after(元素);
4、将元素插入到目标元素的前面，作为兄弟元素
-
元素.insertBefore(目标);
-
目标.before(元素);
<ul> <li>吃饭</li> <li class="abc">睡觉</li> <li>打豆豆</li> </ul>
var li = $('<li>我是小邓子</li>'); // 创建节点 // 同一个操作，有两个操作方法，是因为后续的链式操作不同 // 将元素插入目标中，作为子元素，放在最后 // 元素.appendTo(目标); // 目标.append(元素); li.appendTo($('ul')).css('background', 'red'); $('ul').append(li).css('background', 'red'); // 将元素插入目标中，作为子元素，放在最前 // 元素.prependTo(目标); // 目标.prepend(元素); li.prependTo($('ul')); $('ul').prepend(li); // 将元素插入到目标元素的后面，作为兄弟元素 // 元素.insertAfter(目标); // 目标.after(元素); li.insertAfter($('.abc')); $('.abc').after(li); // 将元素插入到目标元素的前面，作为兄弟元素 // 元素.insertBefore(目标); // 目标.before(元素); li.insertBefore($('.abc')); $('.abc').before(li);
3、删除节点
jQuery提供了三种删除节点的方法，即remove()、detach()、empty()
<button>remove</button> <button>detach</button> <button>empty</button> <ul class="list"> <li>11</li> <li>11</li> <li>11</li> </ul>
var btn = $('button'); var ul = $('.list'); ul.click(function () { console.log(123); }); // jQuery对象.remove(); 返回被删除的节点，如果之前元素上面有事件，返回的元素不会保留之前的事件 btn.eq(0).click(function () { var v = ul.remove(); setTimeout(function () { v.appendTo('body'); }, 3000); }); // jQuery对象.detach(); 同remove，但是返回的元素，保留着之前的事件 btn.eq(1).click(function () { var v = ul.detach(); setTimeout(function () { v.appendTo('body'); }, 3000); }); // jQuery对象.empty(); 严格来说，它不是删除元素，它是清空元素 btn.eq(2).click(function () { ul.empty(); // 推荐使用 // ul.html(''); });
4、复制节点
jQuery元素.clone(true); 参数true，可以克隆之前的操作行为。
<button>复制</button> <div class="box">123</div>
// jQuery对象.clone(true); // 参数true，会保留元素之前的事件 var btn = $('button'); var box = $('.box'); box.click(function () { console.log(123); }); btn.click(function () { // box.clone().appendTo('body'); box.clone(true).appendTo('body'); });
5、替换节点
替换节点.replaceAll(被替换的元素);
被替换的元素.replaceWith(替换节点);
<button>按钮</button> <div class="box">平头哥</div> <span>我就是我</span>
$('button').click(function () {
// 利用页面中原有的元素实现替换
// $('p').replaceAll('div');
// $('div').replaceWith($('p'));
// 利用创建出来的元素替换
$('<span>隔壁老王</span>').replaceAll('div');
});
3、jQuery中的事件
1、事件对象
$('.box').click(function (ev) {
console.log(ev); // jQuery封装过以后的事件对象
console.log(ev.originalEvent); // 返回原生的事件对象（jQuery虽然很强大，但有些方法也没有封装，所以我们要返回原生的事件对象来获取）
console.log(ev.clientX, ev.clientY); // 鼠标相对于可视区的位置
console.log(ev.pageX, ev.pageY); // 鼠标相对于文档区的位置
console.log(ev.offsetX, ev.offsetY); // 鼠标相对于触发这个事件的元素的位置
console.log(ev.screenX, ev.screenY); // 鼠标相对于屏幕的位置
console.log(ev.which); // 相当于keyCode，但比keyCode强大，还可以记录鼠标的键值，返回1\2\3即左\中\右;
console.log(ev.target); // 事件源
console.log(ev.delegateTarget); // 事件绑定的对象
console.log(ev.type); // 事件类型
console.log(ev.ctrlKey); // 返回true或false，相应的ctrl键是否按下
console.log(ev.shiftKey); // 返回true或false，相应的shift键是否按下
console.log(ev.altKey); // 返回true或false，相应的alt键是否按下
ev.preventDefault(); // 阻止默认事件
ev.stopPropagation(); // 阻止冒泡的操作
return false; // 阻止默认事件 + 阻止冒泡的操作
});
2、事件的绑定
我们之前常用click()来绑定事件，jQuery中其实把原生的事件都用函数的形式来实现了。如：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。
另一种写法格式：jQuery对象.on(事件名, 函数); （内部用addEventListener来绑定）
var box = $('#box'); box.click(function () { console.log('点了我2'); }); // 同上（最基本用法） box.on('click', function () { console.log('点了我1'); }); // 一次绑定多个事件 box.on('click mouseover mouseout', function () { console.log('执行了'); }); // 写成对象的形式 box.on({ 'click': function () { console.log('点了我'); }, 'mouseover': function () { console.log('滑上了我'); }, 'mouseout': function () { console.log('滑离了'); } }); // 绑定自定义事件 // abc为自定义事件 box.on('abc', function () { console.log('我是abc事件'); }); box.trigger('abc'); // 自定义事件要主动触发
3、取消事件绑定
jQuery对象.off(事件);
// jQuery对象.off(); var box = $('#box'); box.on('click mouseover', function () { console.log('我执行了'); }); // box.off(); // 没有参数，取消这个元素上绑定的所有的事件 box.off('click'); // 取消对应的事件
4、命名空间
我们给元素绑定一个事件，还可以给这个事件名添加一个命名空间，这样，同一个事件，我们也可以通过命名空间来区分，取消事事件时，也可以取消特定的有命名空间的事件。
var box = $('#box'); // 加上了命名空间a box.on('click.a', function () { console.log('a'); }); // 加上了命名空间b box.on('click.b', function () { console.log('b'); }); box.off('click.b'); // 取消有命名空间b的事件（取消的时候，可以不要事件名）
5、事件绑定one
// 绑定只执行一次的事件 // jQuery对象.one(事件名, 函数) $('#box').one('click', function () { console.log('打印了'); }); // 模拟一次的事件 $('#box').on('click', function () { console.log('执行了'); $(this).off('click'); });
6、事件代理
// 原生的事件代理 var ul = document.getElementsByTagName('ul')[0]; ul.onclick = function (ev) { if (ev.target.nodeName === 'LI') { ev.target.style.backgroundColor = 'red'; } } // -------------------------------- // jQuery对象.on('事件名', '子级', 函数) $('ul').on('click', '.ab', function (ev) { // console.log(this); // 原生的 $(this).css('background', 'red'); console.log(ev.delegateTarget); // 事件绑定的对象 });
7、合成事件
// jQuery对象.hover(滑上执行的函数, 滑离执行的函数); // hover实现的是类似于onmouseenter onmouseleave // 而不同于onmouseover onmouseout $('#box').hover(function () { console.log('滑上了'); $(this).css('background', 'blue'); }, function () { console.log('滑离了'); $(this).css('background', 'red'); });
8、滑上事件
<div class="box"> <span></span> </div>
var box = document.querySelector('.box'); var n = 0; // 有冒泡 onmouseover 和 onmouseout 是一对 box.onmouseover = function () { n++; console.log(n); } // 没有冒泡 onmouseenter 和 onmouseleave 是一对 box.onmouseenter = function () { n++; console.log(n); }
