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')  //自动弹出45629、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) })