js-day21 jquery第二天

元素宽高

client: 可视宽高

innerWidth/innerHeight: 内容+内边距

offset: 占位宽高

outerWidth/outerHeight(布尔值):

false/不传: 内容 + 内边距 + 边框

true: 内容 + 内边距 + 边框 + 外边距

scroll: 滚动距离

console.log($('div').width(), $('div').height()); // 内容宽 内容高
console.log($('div').innerWidth(), $('div').innerHeight()); // 可视宽 可视高
console.log($('div').outerWidth(), $('div').outerHeight()); // 占位宽 占位高
console.log($('div').outerWidth(true), $('div').outerHeight(true)); // 占位宽 占位高
​
$(window).scroll(function () {
    // console.log($('body,html').scrollTop(), $('body,html').scrollLeft());
    console.log($(window).scrollTop(), $(window).scrollLeft());
});
​
/* 
    取赋值一体化
*/
console.log($('div').width(500), $('div').height(200));
console.log($('div').innerWidth(500), $('div').innerHeight(200));
console.log($('div').outerWidth(500), $('div').outerHeight(200));
console.log($('div').outerWidth(500, true), $('div').outerHeight(200, true));
​
$('button').click(function () {
    console.log($(window).scrollTop(500), $(window).scrollLeft(500));
});

元素的位置

position: 获取到的结果是当前元素的定位距离 以对象方式返回

{

left: 0,

top: 0

}

offset: 获取的元素距离body的一个偏移距离

/* 
    position: 获取到的结果是当前元素的定位距离 以对象方式返回
        {
            left: 0,
            top: 0
        }
*/
console.log($('div').position()); // {top: 33, left: 8}
console.log($('div').position().left);
​
/* 
    offset: 获取的元素距离body的一个偏移距离
*/
console.log($('div').offset());
console.log($('div').offset().left);

添加节点

1. 创建节点: $('标签节点');

   var li = $('<li>12344</li>');
   console.log(li);

2. 父元素末尾:

   父.append(子);

   子.appendTo('选择器');

   $('ul').append('<li>a1234</li>');
   $('<li>b1234</li>').appendTo('ul');

3. 父元素开头:

   父.prepend(子);

   子.prependTo('选择器');

   $('ul').prepend('<li>c1234</li>');
   $('<li>d1234</li>').prependTo('ul');

4. 插入某个元素之前:

   参考节点.before(新节点);

   新节点.insertBefore(参考节点);

   $('.box').before('<li>新Li1</li>');
   $('<li>新Li2</li>').insertBefore('.box');

5. 插入到某个元素之后:

   参考节点.after(新节点);

   新节点.insertAfter(参考节点);

   $('.box').after('<li>新Li3</li>');
   $('<li>新Li4</li>').insertAfter('.box');

删除节点

remove: 删除当前元素 返回被删除掉的元素 不包含原来元素的行为

detach: 删除当前元素 返回被删除掉的元素 包含原来元素的行为

empty: 清空元素 删除当前元素中所有子节点

$('li').click(function () {
    console.log($(this).html());
});
​
/* 
    remove: 删除当前元素 返回被删除掉的元素 不包含原来元素的行为
    detach: 删除当前元素 返回被删除掉的元素 包含原来元素的行为
    empty: 清空元素 删除当前元素中所有子节点
*/
// $('ul').empty();
​
$('button').click(function () {
    // var li = $(this).parent().remove();
    var li = $(this).parent().detach();
    console.log(li);
​
    $('ul').append(li);
});

克隆节点

clone(布尔):

false/不传: 不克隆行为 不保留事件函数

$('li').click(function () {
    console.log($(this).html());
});

/* 
    clone(布尔):
        false/不传: 不克隆行为 不保留事件函数
*/
// var li  = $('li').eq(0).clone().appendTo('ul');
var li  = $('li').eq(0).clone(true).appendTo('ul');
console.log(li);

替换节点

参考节点.replaceWith(新节点);

新节点.replaceAll(参考节点);

/* 
    参考节点.replaceWith(新节点);
    新节点.replaceAll(参考节点);
*/
// $('li').replaceWith('<p>1234</p>');
$('<hr>').replaceAll('li');

事件对象

/* 
    以事件处理函数的第一个形参
*/
$(window).click(function (ev) {
    console.log(ev); // jQuery.Event 
    console.log(ev.originalEvent); // js原生事件对象
    console.log(ev.type); // 事件类型
    console.log(ev.target);
    console.log(ev.keyCode); // 键盘编码
    console.log(ev.which); // 跟keyCode一致  比keyCode强大 左中右 123
    console.log(ev.pageX, ev.pageY); // 距离页面
    console.log(ev.clientX, ev.clientY); // 可视区域左上角
    console.log(ev.screenX, ev.screenY); // 屏幕
    console.log(ev.offsetX, ev.offsetY); // 触发源内容左上角 边框会出现负数
});

on

1. 给一个元素绑定一个事件

   jq对象.on(事件类型, 事件处理函数);

   $('div').on('click', function () {
       console.log(this);
   });
   

2. 给一个元素的多个事件添加同一处理函数

   jq对象.on('事件 事件 事件...', 事件处理函数)

   $('div').on('click mousedown mouseup', function (ev) {
       console.log(ev.type);
   });
   

3. 给不同事件添加不同处理函数

   jq对象.on({

   事件: 函数,

   事件: 函数

   });

   $('div').on({
       mousemove: function (ev) {
           console.log(ev.clientX);
       },
       contextmenu: function () {
           console.log('contextmenu');
       }
   });
   

4. 绑定自定义事件:

   由程序员自己定义的事件

   $('div').on('call', function () {
       console.log('okk');
   });
   
   // 手动触发自定义事件: jq对象.trigger('自定义事件名称');
   setTimeout(function () {
       $('div').trigger('call');
   }, 3000);
   

5. 事件委托

   jq对象(父).on(事件类型, '子选择器', 事件处理函数);

   this指向的就是每一个子元素

   $('ul').on('click', 'li', function () {
       console.log(this);
   });
   
   $('ul').append('<li>1234</li>');
   

one

one: 与on是一样的 只会触发一次

$('div').one('click', function () {
    console.log(1);
});

off

// div添加事件
function aa() {
    console.log(1);
}
$('div').click(aa);
$('div').click(function () {
    console.log(2);
});
$('div').mousedown(function () {
    console.log('down');
});
// $('div').off(); // 取消所有的事件
// $('div').off('click'); // 取消所有的click的事件
// $('div').off('click', aa); // 取消click中名字为aa的事件
// $('div').off('click mousedown'); // 取消所有的click和mousedown所有事件

// jq中事件具有命名空间 事件.名 设置命名空间 避免全局变量的影响
$('div').on('click.cc', function () {
    console.log(3);
});

$('div').off('click.cc mousedown');

合成事件

jq对象.hover()

一个函数: 滑入滑出都触发

两个函数: 第一个滑入 第二个滑出

// $('div').hover(function (ev) {
//     console.log(ev.type);
// });

$('div').hover(function (ev) {
    console.log(ev.type);
}, function (ev) {
    console.log(ev.type, '1-----');
});

阻止冒泡和取消默认行为

$('p').click(function (ev) {
    console.log('p');

    // 阻止冒泡
    // ev.stopPropagation();
    // 取消默认行为
    // ev.preventDefault();

    // 阻止冒泡 + 取消默认行为
    return false;
});
$('div').click(function () {
    console.log('div');
});