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)
 })