jQuery中的事件 与 BOM,DOM操作

1、BOM操作

1、元素宽高

原生不能获取隐藏元素的宽高，但jQuery可以获取隐藏元素的宽高。

#box {
     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强大，还可以记录鼠标的键值，返回123即左中右;
    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);
}