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); }