day22jQuery链式调用原理、元素三大宽高、操作节点、事件对象、事件绑定、命名空间、事件解绑、合成事件、extend（浅拷贝，深拷贝）

链式调用原理

链式调用: jq的方法都有返回值, 返回操作的对象或被操作以后的对象

// var mn = $('.box');
// console.log(mn);
// var a = mn.css('background', 'red');
// console.log(a);
// var b = a.prevAll(); // 前面所有的li
// console.log(b);
// var c = $('.box').css('background', 'red').prevAll().css('background', 'pink').eq(0).html('12345');
var c = $('.box')
    .css('background', 'red')
    .prevAll()
    .css('background', 'pink')
    .eq(0)
    .html('12345');
console.log(c);

元素三大宽高

内容:

​ width(); 内容宽

​ height(); 内容高

client:

​ content + padding

​ innerWidth(); 内容 + 内边距

​ innerHeight(); 内容 + 内边距

offset:

​ content + padding + border

​ outerWidth/outerHeight(布尔值);

​ 设置成true: 表示 content + padding + border + margin

​ false/不传: content + padding + border

​ outerWidth(值, 布尔值);

scroll:

​ scrollTop();

获取元素距离具有定位父元素:

​ position(): 只能获取不能设置

​ {top: 33, left: 33}

console.log($('div').width());
//    $('div').width(500); // 将div的内容的宽变成500

console.log($('div').innerWidth()); // 200 + 22 + 3  225 
// $('div').innerHeight(500); // 内容 + 上下内边距 = 500  上下内边距根据样式不变  内容改变

console.log($('div').outerWidth()); // 200 + 22 + 3  + 2 + 5  232
console.log($('div').outerWidth(true)); // 200 + 22 + 3  + 2 + 5 + 10 + 10 252

$('div').outerHeight(500); // 内容 + 内边距 + 边框 = 500 内容 = 464
$('div').outerHeight(500, true); // 内容 + 内边距 + 边框 + 外边距 = 500 内容 = 424

$(document).scroll(function(){
    console.log($(document).scrollTop());
});

$('button').click(function(){
    $(document).scrollTop(0);
});

console.log($('div').position());
console.log($('div').position().top);

操作节点

创建节点

var 变量 = $(‘标签+内容’);

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

追加节点

父元素开头

父元素.prepend(新节点);

新节点.prependTo(父元素);

// $('ul').prepend(li);
// li.prependTo('ul');

父元素末尾

父元素.append(新节点);

新节点.appendTo(父元素);

//  $('ul').append(li);
// li.appendTo('ul');

兄弟之前

// $('.box').before(li);
li.insertBefore('.box');

兄弟之后

// $('.box').after(li);
// li.insertAfter('.box');

注意

如果一个元素已经存在于页面中 再次追加 会发生物理位移

如果页面中符合父元素选择器的元素有多个 追加元素的时候 每个父元素都会加一个

// 如果一个元素已经存在于页面中  再次追加 会发生物理位移
// $('div').append(li);

// 如果页面中符合父元素选择器的元素有多个 追加元素的时候 每个父元素都会加一个
// $('ul').append(li);

删除节点

detach: 删除节点, 返回被删除的节点, 保留事件

remove: 删除节点, 返回被删除的节点, 不保留事件

empty: 清空子节点

$('li').click(function(){
    $(this).css('background', 'red');

});
/* 
    detach: 删除节点, 返回被删除的节点, 保留事件
    remove: 删除节点, 返回被删除的节点, 不保留事件
    empty: 清空子节点
*/
// var li = $('.box').detach();
var li = $('.box').remove();
console.log(li);

li.appendTo('ul');

$('ul').empty();

克隆节点

节点.clone(布尔值);

​ true: 克隆行为

​ false/不传: 不克隆行为

$('li').click(function () {
    $(this).css('background', 'red');

});
/* 
    克隆节点:
        节点.clone(布尔值);
            true: 克隆行为
            false/不传: 不克隆行为
*/
// var m = $('.box').clone();
var m = $('.box').clone(true);
console.log(m);

$('ul').append(m);

替换节点

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

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

var li = $('<li>12345</li>');
// $('.box').replaceWith(li);
// li.replaceAll('.box');

// $('li').replaceWith(li); // 一次性替换所有的li

事件对象

事件对象: 事件处理函数的一个形参

$('div').click(function(ev){
    console.log(ev);
    console.log(ev.originalEvent); // 原生事件对象
    console.log(ev.type); // 事件类型
    console.log(ev.target); // 触发源
    console.log(ev.delegateTarget); // 事件绑定对象
    console.log(ev.which); // 与keyCode类似, 比keyCode强大  输出鼠标的左中右(123)
    console.log(ev.ctrlKey, ev.shiftKey, ev.altKey); // 相应的按键是否被按下
    console.log(ev.clientX, ev.clientY); // 可视区域的左上角的距离
    console.log(ev.pageX, ev.pageY); // 页面的左上角的距离
    console.log(ev.screenX, ev.screenY); // 屏幕左上角
    console.log(ev.offsetX, ev.offsetY); // 触发源左上角

    // 阻止冒泡 stopPropagation  cancelBubble = true
    // ev.stopPropagation();

    // 阻止默认行为: preventDefault  returnValue = false
    // ev.preventDefault();

    // 阻止冒泡 + 阻止默认行为
    return false;
});

$('a').click(function(ev){
    // ev.preventDefault();
    return false;
});

$(document).click(function(ev){
    // console.log(ev.target); // 触发源
    // console.log(ev.delegateTarget); // 事件绑定对象
    console.log('冒泡了');
});

事件绑定

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

jq对象.on({

​ ‘click’: 函数,

​ ‘mouseenter’: 函数1

});

1. 元素的一个事件添加一个处理函数

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

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

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

3. 元素的不同事件添加同一个处理函数

   $('div').on('click mouseenter mouseleave', function(){
       console.log(3);
   });
   
   

4. 元素的不同事件添加不同处理函数

   // 在对象中  如果属性名相同 后面的会覆盖前面的
   $('div').on({
       'click': function(){ console.log(4); },
       'mouseenter': function(){console.log(5);},
       'mouseleave':function(){console.log(6);},
       'click': function(){console.log(7);} // 1 2 3 7
   });
   
   

5. 绑定自定义事件

   $('div').on('callme', function(){
       console.log('请给我拨打电话');
   });
   
   // 触发自定义事件: jq对象.trigger('事件类型');
   
   // 点击document 触发callme 
   $(document).click(function(){
       $('div').trigger('callme');
   });
   // 对象的处理代码挂在自己元素的自定义事件上  在有需要的时候去触发
   
   

6. 事件委托: jq对象.on(事件类型, 子元素选择器, 事件处理函数);

   // 隐式迭代
   $('li').click(function(){
       $(this).css('background', 'red');
   });
   
   // 6. 事件委托: jq对象.on(事件类型, 子元素选择器, 事件处理函数);
   $('ul').on('click', 'li', function(){
       console.log(this);
       $(this).css('font-size', 30);
   });
   
   var li = $('<li>这是一个新的</li>');
   $('ul').append(li);
   
   

命名空间

事件.变量名

$('div').on('click.a', function(){
    console.log(2);
});
// 避免全局变量污染

事件解绑

jq对象.off(事件类型, 事件处理函数的名字);

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

$('div').on('click.a', function(){
    console.log(2);
});
// 避免全局变量污染

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

/* 
    解除事件绑定: off
        jq对象.off(事件类型, 事件处理函数的名字);
*/
$('div').off('click', a); // 移除点击事件的a函数(全局)
$('div').off('click.a'); // 移除点击事件的a函数
$('div').off('click'); // 移除所有的点击事件的函数

one

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

one用法与on完全一致

$('div').one({
    'click': function (){ console.log(2); },
    'mouseenter': function (){ console.log(3); },
});

合成事件

jq对象.hover(函数1, 函数2);

/* 
    jq对象.hover(函数1, 函数2);
    如果只有一个函数作为参数，移入和移出都会触发这个函数
    如果有2个函数作为参数, 第一个函数是移入函数, 第二个是移出函数
*/
// $('div').hover(function(){
//     console.log(1);
// });

// css实现就不用js
$('div').hover(function(){
    console.log(1);
    $(this).css('background', 'blue');
}, function(){
    console.log(2);
    $(this).css('background', 'red');
});

extend

浅拷贝

1. 会改变target, 将后面对象的属性和值添加到目标源中
2. 浅拷贝中 如果变量的属性名重复 用后面的属性值 覆盖前面的属性值

var obj = {
    name: '彭于晏',
    age: 33
};
var obj1 = {
    height: 188,
    age: 38,
    money: ['银行', '基金', '电影', '私房钱']
};
var obj2 = {
    beauty: true,
    shuai: false
};

// 浅拷贝:
// 1. 会改变target, 将后面对象的属性和值添加到目标源中
// 2. 浅拷贝中 如果变量的属性名重复  用后面的属性值 覆盖前面的属性值 
// $.extend(tar, obj1, obj2....);
// var oo = $.extend(obj, obj1, obj2);
// console.log(obj);
// console.log(obj1);
// console.log(obj2);
// console.log(oo); // 返回拷贝以后的对象
// console.log(oo == obj); // true

如果想要保留原对象不改变 将所有内容拷贝到一个空对象中 接收返回值

var oo = $.extend({}, obj, obj1, obj2);
console.log(oo);
console.log(obj);

深拷贝

将extend的第一个参数设置成true, 会进行递归拷贝. 在拷贝的过程中, 如果属性名相同，并且值都是对象, 对比的子属性, 如果属性名相同且都不为对象, 用后面覆盖前面的

var obj = {
    name: '彭于晏',
    age: 33
};
var obj1 = {
    height: 188,
    age: 38,
    money: ['银行', '基金', '电影', '私房钱'],
    zi:{
        name: 'abc',
        height: 177
    }
};
var obj2 = {
    money: 1546789765373,
    beauty: true,
    shuai: false,
    zi:{
        name: 'dcb',
        age: 20
    }
};
var oo = $.extend(true, {}, obj, obj1, obj2);
console.log(obj);
console.log(oo);