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  说明是从自己来的，并不是事件冒泡触发的事件。