jQuery系列---【jQuery元素宽高 节点 事件】

元素宽高

// 获取宽高
console.log($('.box').width()); // width
console.log($('.box').innerWidth()); // width+padding
console.log($('.box').outerWidth()); // width+padding+border
console.log($('.box').outerWidth(true)); // width+padding+border+margin
console.log($('.box').height());
console.log($('.box').innerHeight());
console.log($('.box').outerHeight());
console.log($('.box').outerHeight(true));

// 设置宽高
$('.box').width(300); // width300
$('.box').innerWidth(300); // width240 padding30
$('.box').outerWidth(300); // width220 padding30 border10
$('.box').outerWidth(300, true); // width120 padding30 border10 margin50

// 可视区的宽高
console.log($(window).width());
console.log($(window).height());

// 文档的宽高
console.log($(document).width());
console.log($(document).height());

元素的位置

• jQuery对象.offset(): jQuery对象距离视窗的相对偏移

// jQuery对象.offset(): jQuery对象距离视窗的相对偏移
console.log($('.box1').offset()); // {top: 8, left: 8}
console.log($('.box2').offset()); // {top: 48, left: 58}
console.log($('.box3').offset()); // {top: 88, left: 108}

滚动条

• scrollTop(),scrollLeft(): 元素滚动时滚动条距离顶部和左侧的距离

// scrollTop(),scrollLeft(): 元素滚动时滚动条距离顶部和左侧的距离
$(window).scroll(function () {
    console.log($(window).scrollTop(), $(window).scrollLeft());
});

创建节点

• 把HTML片段放进 $() ,就可以创建对应的节点

// 把HTML片段放进 $() ,就可以创建对应的节点
console.log($('<div>box</div>'));
console.log($('<div class="box">box</div>'));

插入节点

• 新节点.appendTo(目标): 把新节点作为子节点拼接到目标中
• 目标.append(新节点): 把新节点作为子节点拼接到目标中
• 新节点.prependTo(目标): 把新节点作为子节点拼接到目标中(最前面)
• 目标.prepend(新节点): 把新节点作为子节点拼接到目标中(最前面)
• 新节点.insertAfter(目标): 把新节点作为兄弟元素插入到目标节点后面
• 目标.after(新节点): 把新节点作为兄弟元素插入到目标节点后面
• 新节点.insertBefore(目标): 把新节点作为兄弟元素插入到目标节点前面
• 目标.before(新节点): 把新节点作为兄弟元素插入到目标节点前面

// - 新节点.appendTo(目标): 把新节点作为子节点拼接到目标中
$('<div>div1</div>').appendTo($('body'));
// - 目标.append(新节点): 把新节点作为子节点拼接到目标中
$('body').append($('<div>div2</div>'));

// - 新节点.prependTo(目标):  把新节点作为子节点拼接到目标中(最前面)
$('<div>div3</div>').prependTo($('body'));
// - 目标.prepend(新节点):  把新节点作为子节点拼接到目标中(最前面)
$('body').prepend($('<div>div4</div>'));

// - 新节点.insertAfter(目标): 把新节点作为兄弟元素插入到目标节点后面
$('<div>div5</div>').insertAfter($('.box'));
// - 目标.after(新节点): 把新节点作为兄弟元素插入到目标节点后面
$('.box').after($('<div>div6</div>'));

// - 新节点.insertBefore(目标): 把新节点作为兄弟元素插入到目标节点前面
$('<div>div7</div>').insertBefore($('.box'));
// - 目标.before(新节点): 把新节点作为兄弟元素插入到目标节点前面
$('.box').before($('<div>div8</div>'));

删除节点

• jQuery对象.remove(): 删除并返回节点
• jQuery对象.detach(): 删除并返回节点,保留事件
• jQuery对象.empty(): 清空节点(清空节点内所有内容)

// jQuery对象.remove(): 删除并返回节点
// jQuery对象.detach(): 删除并返回节点,保留事件
// jQuery对象.empty(): 清空节点(清空节点内所有内容)

$('.list').click(function () {
    console.log('list--click');
});

$('button').eq(0).click(function () {
    var $list = $('.list').remove();
    console.log($list);

    setTimeout(function () {
        $list.appendTo($('body'));
    }, 1000);
});

$('button').eq(1).click(function () {
    var $list = $('.list').detach();
    console.log($list);

    setTimeout(function () {
        $list.appendTo($('body'));
    }, 1000);
});

$('button').eq(2).click(function () {
    var $list = $('.list').empty();
    console.log($list);

    // 已经存在DOM树上的节点进行拼接会移动位置
    // setTimeout(function () {
    //     $list.appendTo($('body'));
    // }, 1000);
});

复制节点

• jQuery对象.clone(): 复制节点. 接收一个参数, 参数为true表示复制节点和事件, false表示不复制事件.

// jQuery对象.clone(): 复制节点. 接收一个参数, 参数为true表示复制节点和事件, false表示不复制事件.
// 给box添加点击事件
$('.box').click(function () {
    console.log('click');
});
// 复制box拼接到body
$('.box').clone().appendTo($('body')); // 复制节点,不复制事件
$('.box').clone(true).appendTo($('body')); // 复制节点,复制事件

替换节点

• 被替换的元素.replaceWith(新元素): 后面新元素替换前面的元素
• 新元素.replaceAll(被替换的元素): 前面新元素替换后面的元素

// - 被替换的元素.replaceWith(新元素): 后面新元素替换前面的元素
// - 新元素.replaceAll(被替换的元素): 前面新元素替换后面的元素
$('span').replaceWith($('<div>newdiv</div>'));
$('<span>newspan</span>').replaceAll($('div'));

事件对象

$('div').click(function (event) {
    console.log(event); // 事件对象
    console.log(event.originalEvent); // 原生事件对象
    console.log(event.clientX, event.clientY); // 相对于视窗
    console.log(event.offsetX, event.offsetY); // 相对于触发事件的元素
    console.log(event.pageX, event.pageY); // 相对于页面
    console.log(event.screenX, event.screenY); // 相对于屏幕
    console.log(event.type); // 事件类型
    console.log(event.target); // 触发事件的元素
    console.log(event.delegateTarget); // 绑定事件的元素
    console.log(event.ctrlKey, event.shiftKey, event.altKey); // 功能键
    event.preventDefault(); // 阻止默认事件
    event.stopPropagation(); // 阻止事件冒泡
    return false; // 阻止默认事件+阻止事件冒泡
});

事件绑定

// jQuery对象.on()绑定事件
// $('div').on(事件类型, 事件处理函数);
// $('div').on('click', function () {
//     console.log('click');
// });
// 等同于:
// $('div').click(function () {
//     console.log('click');
// });

// 一次绑定多个事件,使用同一个事件处理函数
// $('div').on('click mouseenter', function () {
//     console.log('click mouseenter');
// });

// 使用对象的形式绑定不同的事件
// $('div').on({
//     click: function () {
//         console.log('click');
//     },
//     mouseenter: function () {
//         console.log('mouseenter');
//     },
//     mouseleave: function () {
//         console.log('mouseleave');
//     }
// });

// // 自定义事件
// $('div').on('haha', function () {
//     console.log('haha');
// });
// // 自定义事件使用trigger触发
// $('div').trigger('haha');

事件代理

// 事件代理: 事件默认是冒泡的,当子元素触发事件,会把事件传递给父元素,可以给父元素统一添加事件监听,当子元素触发事件时,父元素的事件可以被执行,事件函数中的this代表的是触发事件的元素.
// jQuery对象.on(事件类型, 子元素, 事件函数);
$('ul').on('click', 'li', function () {
    console.log($(this));
    $(this).css('background', 'red');
});
// 后添加的子元素同样可以触发该事件
$('ul').append('<li>newli</li>');

事件取消

// 事件取消: jQuery对象.off(事件类型) 取消对应事件类型 / jQuery对象.off()取消所有
$('div').on({
    click: function () {
        console.log('click');
    },
    mouseenter: function () {
        console.log('mouseenter');
    }
});
// $('div').off('mouseenter'); // 取消mouseenter事件
$('div').off(); // 取消所有事件

one()

// jQuery对象.one():绑定事件,事件只执行一次
$('div').one('click', function () {
    console.log('click');
});

hover

// jQuery对象.hover(鼠标进入事件处理函数,鼠标离开事件处理函数)
$('div').hover(
    function () { 
        console.log('鼠标进入');
    },
    function () { 
        console.log('鼠标离开');
    }
);