on绑定，解绑事件；自动触发事件，对象拷贝，Jq元素尺寸，位置

绑定事件 on

• 可以绑定多个事件

  • $('div').on({
    	click: function() {/* 触发click事件 */},
    	mouseover: function () {/* 触发mouseover事件*/}
    });
    

• 支持事件委派

  • // 事件委托中回调函数的 this 指向被委托的对象
    $('ul').on('click', 'li', function(){/*点击每一个li都会触发*/})
    

• 动态创建的元素, click() 没法直接绑定事件，使用on也可以

  • var li = $('<li>我是最IN创建的</li>');
    $('ul').append(li);
    $('ul').on('click', 'li', function(){/*点击每一个li都会触发*/})
    

one()：此方法绑定事件只触发一次 $('div').one('click', function () {}); 当前第二次点击时就不会再触发

解绑事件

off() 方法可以移除通过 on() 方法添加的事件处理程序

$('div').off(); // 解绑所有事件；
$('div').off('click'); // 解绑 click 事件
$('div').off('click', 'li'); // 解绑事件委托事件

自动触发事件 trigger()

// 1，元素.事件();
$('div').click();
// 2，元素.trigger(事件名);
$('div').trigger('click');
// 3, 元素.triggerHandler(事件名)
$('div').triggerHandler('click'); // 不会触发元素的默认行为

对象拷贝

如果想要把某个对象拷贝（合并）给另一个对象使用，可以使用 $.extend()

$.extend([deep], target, object1, [objectN]);
1, deep: 如果设为 true为深拷贝，默认false 浅拷贝
2, target: 要拷贝的类型
3, object1: 待拷贝的第一个对象
4, objectN: 待拷贝的第n个对象
5, 浅拷贝是把拷贝的对象中的 复杂数据类型中的地址 拷贝给目标对象，修改原来的对象会影响目标对象；如果和拷贝对象有元素冲突，会覆盖
6, 深拷贝，完全拷贝，拷贝的是对象而不是地址，修改目标对象不会影响拷贝对象

jQuery 尺寸

语法	用法
width()/height()	只算元素的宽度和高度
innerWidth()/innerHeight()	元素的宽度和高度 + padding
outerWidth()/outerHeight()	元素的宽度和高度 + padding + border
outerWidth(true)/outerHeight(true)	元素的宽度和高度 + padding + border + margin

以上参数为空则代表获取相应值，返回是数字

如果参数为数字，则代表修改相应值；参数可以不带单位

jQuery位置

// offset()
$('div').offset() // 返回一个对象 left top 元素距离document的距离
$('div').offset().top // 可以动态获取
$('div').offset({top: 180}); // 可以动态设置
// position()
$('div').position(); // 获取距离最近的定位的父盒子的距离，如果没有获取document，不可以设置可以获取
// offsetTop()/offsetLeft()
$('div').scrollTop(); // 页面被卷去的头部
$('div').scrollLeft(100); // 页面被卷去的左边 都可以动态设置