jQuery第三课 ——元素尺寸、滚动距离、元素距离、jq事件、event对象

23、元素尺寸
(1)width() height() 不带单位，即css中设置的值
(2)innerWidth() innerHeight() width + padding 注意clientWidth也是width + padding
(3)outerWidth() outerHeight() width + padding + border
(4)outerWidth(true) width + padding + border +margin

上面的方法，既可以获取也可以设置，width(399)
与原生js的区别 ：原生js获取不到隐藏（display：none）元素的尺寸，但是jQ可以

(5)可视区的尺寸 
$(window).width()   $(window).height()         原生js  document.documentElement.clientX

(6)整个页面的高
$(document).height()    原生js  document.body.offsetHeight

(7)滚动距离  : 可获取，可设置，整屏切换
$(document).scrollTop()    $(document).scrollLeft()    原生js  document.body.scrollTop || document.documentElement.scrollTop;

滚动到了底部 ： $(document).scrollTop() = $(document).height() - $(window).height()

24、元素的距离
(1)、$('.div1').offset().left   $('.div1').offset().top  
注意 ： 它是距离整个页面来说的，与元素的父级或本身是否有定位无关

(2)、position()
$('.div1').、position().left   $('.div1').、position().top
注意 ： 看有没有定位的父级，或祖先节点，有的话，则到父元素，没有的话，则到整个页面。
它不认子元素的margin，但认float

(3)、offsetParent()  找到有定位父级的祖先节点

eg：懒加载图片


25、JQ的事件 ：jq中的事件操作都是绑定的形式，不会覆盖
(1)on() : click()、one()、delegate()最终都会调on();
基本写法 ：  $('div').on('click',function(){})
扩展写法(与委托写法detegate一样) ：$('div').on('click','input',{name : 'hello'},function(ev){
    console.log(ev.data)  //{name : 'hello'}
    //注意此时的ev是jQuery下的，并不是原生js的，
    //如何获取 ：ev.originalEvent
})

(2)off()  取消事件
$('.div').on('click,mouseover',function() {
    alert(11);
    $('.div').off() //无参数则取消全部，有参数('click')，则取消click事件
})
eg：多次添加’on‘的操作方式
$('div').on('click',function(){  
    $('span').on('click',function(){
        alert(1)
    })
})
假如div点击10次，span点击一次，也会弹10次，
解决办法 ：
$('span').off().on('click',function(){
        alert(1)
    })

26、Event对象
(1)、pageX() clientX();  整个页面  可视区的
(2)、which  键盘键值，注意没有(); 左1  中2  右3 
(3) target 事件源
(4) stopPropagation() 阻止冒泡,但不能阻止自身事件
(5) preventDefault()  阻止默认事件
(6) return false   阻止冒泡和阻止默认事件
(7) stopImmediatePropagation() 阻止冒泡，也能阻止自身事件的触发
$(document).on('click',function(ev) {
    ev.which;
    ev.target
})
eg：阻止右键事件
$(document).on('contextmenu',function() {
    ev.preventDefault()
})

eg：拖拽  ，会写原生的，在写jq就很简单了

27、delegate() 重点：  对后续添加的元素依然拥有事件行为
$('.ul1').delegate('li','click',function(ev){
    $(ev.delegateTarget).css('border','1px solid #0cf')  //ev.delegateTarget == .ul1
    $(this).css('background','red');  //this == li
    $(ev.delegateTarget).undelegate()  //undelegate()取消绑定 就是只执行一次，加在父级，利用冒泡
})

28、trigger()  主动触发
（1）比click更强大
（2）事件的命名空间 ，如下例子
$('#btn').on('click',function() {
    alert(123)
})
$('#btn').on('click.abc',function() {
    alert(456)
})
$('#btn').trigger('click.abc')  //自动弹出456

29、JQ工具方法 
 (1)类型 ：$.type();
 (2)是否是函数（true false） ：$.isFunction()
 (3)是否是数字（如果是字符’123‘，也会隐式转） ：$.isNumeric();
 (4)是否是空对象 : $.isEmptyObject();  空对象 [] {}
 (5)判断是不是对象自变量 ： $.isPlainObject();

 (6)$.extend(obj1，obj2) 对象继承操作，不影响父级，默认是浅复制，深层复制，第一个参数，写成true

 (7)$.proxy() 改this指向
 第一种写法 ：$.proxy(show,document)(arguments1,arguments2)  //show :函数名  document ：this指向  (arguments1,arguments1)参数与调用
 第二种写法 ： $(document).on('click',$.proxy(show,document,arguments1,arguments2),function(){})

 eg：
 $(document).on('click',function(){
    setTimeout($.proxy(function(){  //不该，则这里的this是window
        $(this).find('body').css('background','red')
    },this),1000)
 })