jquery常用事件介绍及使用

一:jq中事件
1.页面载入事件

	ready()方法
	格式:
		$(document).ready(function(){});
		$(function(){});

2.绑定事件

	click(),dblclick(),focus(),blur(),mouseover(),mouseout(),change(),select()
	keydown(),keyup()

js事件模型:

		第一种:在html标签上增加事件属性,让属性值等于处理该事件的函数名或程序代码
		第二种:在js代码中设置元素的事件属性,让属性值等于处理该事件的函数名或程序代码

jq事件一种统一的事件模型:

		在页面加载完毕后,为每个选取元素的事件绑定响应函数
		$(function(){
			$("#btn").click(function(){//执行代码});	//统一的事件模型
			$("#btn").bind(type,function(){//执行代码});	//type表示事件类型
			//为所选对象绑定多个事件处理函数
			$("#btn").bind({type:function(){//执行代码},type:function(){//执行代码}});
		});

3.切换事件

	hover():使元素在鼠标移入与移出的事件中进行切换
		hover(over,out);	//over:移入时处理的函数,out:移出时处理的函数
	toggle():依次调用N个指定的函数,直到最后一个,然后重复对函数进行调用
		toggle(
			function(){},
			function(){},
			function(){},...
		);

4.其它事件

	one():为所选的元素绑定一个仅触发一次的处理函数
		one(type,function(){});		//type表示事件类型
	trigger():在所选的元素上触发指定类型的事件
		trigger(type);	//type表示触发事件的类型

二:事件机制

事件在触发后分为两个阶段:一个是捕获(capture),另一个是冒泡(bubbling).
	往往事件触发后,直接执行冒泡过程,冒泡实质就是事件执行中的顺序.(大部分浏览器不支持捕获,jq也不支持)
	
(单击按钮,按钮的父标签div的单击事件也被触发,同时div的父标签body的单击事件也随之触发)
冒泡过程:整个事件波及的过程就行水泡一样向外冒,故称为冒泡过程
停止事件的冒泡过程:可以通过return false;语句实现.(单击按钮就执行单击事件,不触发其它父元素的单击事件)

三:开关

toggleClass():样式添加/删除开关
hover():鼠标移入/移出开关
toggle():显示/隐藏开关(没参数时)

四:获取元素的宽高

$("body").css("width");		//获取页面内容css样式中的宽度属性值
$("body").height();			//获取页面内容的高度
$(window).width();			//获取浏览器窗口的宽度
$(window).css("height");	//获取浏览器窗口css样式中的高度属性值
css("width/height"):值得形式是包含了单位"px"的字符串 -- "160px"
height()/width():值是数字型的,更方便进行数学运算 -- 160