JQuery的方便之处——宽高设置、坐标值和滚动条+事件绑定机制

1、元素的宽高

  可以通过css来进行设置,例如:$("元素").css({"宽度":"值","高度":"值"});

  也可以通过JQuery中的函数直接进行设置,比如$("元素").width(数字或字符串);$("元素").height(数字或字符串);不给值的话就相当于获取宽高

  两种方法获取宽高的区别,css获取宽高返回值是带单位px的,而JQuery的函数获取宽高是不带单位的。如果用于数学计算还是选择JQuery好一点。

2、坐标值

  有两个函数:offset()和position()。offset()能设置位置,position()不能设置坐标值。

  offset()函数:获取坐标值:相对浏览器页面的便移。返回的是一个对象Object{top:值,left:值}

          设置坐标值:传递参数对象{top:值,left:值},设置之后元素自动变为相对定位

  position()函数:获取在坐标值:相对最近的定位的父元素的便移

          设置坐标值:无法设置

4、滚动条(滚动显示,原理就是儿子元素的宽高超出了父元素的宽高,所以我们要滚动显示,所以要给父元素加一个overflow:scroll;就会出现一个滚动条)

  水平滚动条和垂直滚动条

  获取滚动条位置:$("父元素").scrollTop();

          $("父元素").scrollLeft();

  设置滚动条位置:$("父元素").scrollTop(数字或字符串);

          $("父元素").scrollLeft(数字或字符串);

  浏览器滚动事件:$(window).scroll(function(){    });

5、JQuery的事件介绍

6、JQuery的事件绑定机制bind

  以前如果给一个元素绑定两个或多个事件的时候,是在这个元素对象之后一直.函数就好了。例如要给一个按钮绑定两个事件:

$("button").click(function(){   })

      .mouseenter(function(){     });

  JQuery很强大,给我们提供了一种事件绑定机制:bind

$("button").bind({

  "click":function(){

  },

  "mouseenter":function(){

  }

});

  绑定事件之后动态添加元素将不会绑定事件。

7、JQuery事件委托机制delegate(这个也是一种绑定,主要是性能优化)

  例如:你有100个li标签,需要给所有的li都绑定一个点击事件,传统的方法:$("li").click(function(){     });这样的话太浪费时间了。所以我们委托给父元素,这样能节省时间。例如:100个li标签的父元素是ul,$("ul").delegate("li","click",function(){

                     //参数含义  哪些子元素    事件    事件处理程序

                   });

  绑定事件之后动态添加的元素也会绑定事件

 8、on绑定事件 (强烈推荐使用,但是版本1.7以上)

  这是绑定的根源,其余所有的绑定事件都是通过on来实现的。提供了一种统一的绑定事件的方法。保留了delegate的优点。

  $("父元素").on("事件","子元素",function(){   });

9、off事件的解绑

  这个和on对应,$("父元素").off("事件");

10、JQuery提供了一种事件触发机制,用一个事件去触发另一个事件

11、事件对象

  阻止事件冒泡:e.stopPropagation();

  阻止默认行为:例如 :一个超链接的点击默认行为是跳转  $("a").click(function(e){  e.preventDefault();    });这样在点击的时候就可以阻止默认行为。

  获取事件类型:e.type

  鼠标的按键类型:左键1  中键2   右键 3    

  获取按键字母:e.keyCode

  获取事件来源:e.target==this  说明是从自己来的,并不是事件冒泡触发的事件。  

原文地址:https://www.cnblogs.com/sylz/p/5775069.html