每天学点jQuery（二）

搞到这么晚，开始想着明天一早起来写这篇博文吧，但是刚刚帮一个同学调试完程序之后毫无睡意，就这么写完了吧，总结下今天学的这点儿，明天上午还得看别的东西。

首先上一篇文章是关于jQuery中什么时候给节点绑定事件，如果你懂得原生的javascript那么一般常用的就是window.onload，那上一篇文章就是介绍jQuery中的这样的方法，这篇呢就说下关于jQuery中的各种事件和由时间衍生出来的动画吧。

首先就是jQuery中有哪些事件呢？其实就是原生js中的一些事件，只不过jQuery稍微改了一下名字而已，那么常用的事件包括下面这些：

blur(), focus(), scroll(), click(), mouseover(), mouseout(), change(), keydown(), keyup(), submit()等等一些，那么你可以在API中查看到所有的事件。

那么如何给一个元素绑定事件呢，加入我的页面是这样的：

<div id="title">显示内容</div>
<div id="content" style="display:none;">
	这里是内容
</div>

然后js代码中就可以这么写：

<script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	//给一个元素绑定一个事件 ： 可以多次使用,也有解绑函数： unbind() 不常用
	$("#title").bind("click", function() {
		//可以用this来指代当前发生事件的对象
		//这里将js中原生的this对象转换成jQuery中的this对象
		//alert( $(this).text() );
		//通过is来对选中的元素做判断
		//visible表示元素可见
		if ( $("#content").is(":visible") ) {
			$("#content").hide();
		} else {
			$("#content").show();	
		}
	});
	$("#title").unbind();
});
</script>

那上面这个就是最基本的一个事件绑定的方法，我们通过jQuery中的bind()方法给一个选择的节点绑定事件，那它的参数呢你可看看API文档，还有就是我用你的jQuery是1.9的版本的。

然后就是如何解绑呢，就是通过下面那句unbind()方法了。

这没什么可说的，语言设计者给你一个方法，你要使用就得按照它的规则来，你要做的就是记住并且熟悉。那上面的代码中我认为比较重要的有两个点，一个就是jQuery中将元素的js中的this对象转换成jQuery中的this对象的方法的方式：$(this)，这里如果你学过原生的js的话，那你应该知道js中的this是有些诡异的，那么你在jQuery中用的时候也要多注意了，this就是指代当前触发这个事件的元素节点。

再一个点就是判断元素是否具备某种属性，用is()函数，之所以说它有用是因为我们在操作DOM节点的过程中判断一个元素是否具备某一属性这个操作是很常用的。向上面的例子中的代码的意思即是说选中的#content元素的是否具备可见性，就是说这个节点是否可见即diaplay属性是不是block。

然后上面呢就是jQuery中一个基本的事件绑定的方法了。另外还有两个比较常用的，就是mouseover和mouseout，那么它们的绑定方式和上面绑定click事件一样的，但是这里要说的就是一个jQuery中的合成事件：hover()

这个方法将mouseover和mouseout合并了，它需要两个参数，这两个参数都是函数，第一个表示鼠标移入的操作，第二个表示鼠标移出的操作。示例如下：

$("#title").hover(function() {
		$("#content").show();		//第一个参数表示鼠标移入动作
	}, function() {
		$("#content").hide();		//第二个参数表示鼠标移出操作
	});

这个就是这个函数的基本用法，里面还有两个动画函数show()和hide()，这两个函数就是用来将选中元素“#content”设置成隐藏或者显示，具体的你可以自己查文档，简单到不行这俩函数。

那么用上面的两个示例演示了一下通过jQuery如何给一个元素加事件，那么既然有了事件，那还得注意js中一些关于事件出现的一些问题，因为jQuery仅仅是包装了js所有，对于js语言本身设计上出现的差错是没办法改变的，所以这里还得注意下。

那么这里需要注意哪些呢？

1，事件冒泡

2，默认行为

3，事件对象的获取

那么什么是js的事件冒泡呢？什么又是默认行为呢？什么又是事件对象呢？这里不记录这些，你可以去百度。这里只记录如何解决他们，以及在jQuery中是怎么解决的。

其实不管是原生的js还是jQuery对于阻止事件冒泡和默认事件都可以通过return  false;来解决，而且平时都是这么做的。对于每一个事件函数，最好是给它一个return  false;当然这个是阻止事件，你要是想返回真也是可以的。但是jQuery中提供了两个方法来实现阻止事件冒泡和默认行为，就是：event.stopPropagation()和event.preventDefault()

那么前面的那个event呢就是事件对象，那怎么获取它呢，就像下面这样：

$(document).ready(function() {
	//给span元素绑定click事件
	$("#span1").bind('click', function(event) {		//event用来捕获事件对象
		alert( 'span' );
		alert( event.type );	//通过事件对象来获取触发的事件类型
		alert( event.pageX + '|' + event.pageY );	//获取鼠标的坐标
		return false;		//阻止默认行为和事件冒泡
	});
	//给div元素绑定click事件
	$("#div1").bind('click', function() {
		alert( 'div' );
		return false;
	});
	//给body元素绑定click事件
	$("body").bind('click', function() {
		alert( 'body' );
		return false;
	});
});

那么，这样呢，就把jQuery中的事件学习了一下，另外这里还提一点就是关于鼠标点击事件的合成事件：toggle()这个函数，因为我用的jQuery1.9的版本，所以好像这个版本中toggle没有了绑定函数的功能，仅仅是改变元素的显示了，因为1.3的API文档上面说toggle可以绑定多个函数用来执行鼠标的单击事件，但是我用1.9测试的时候是不行的，而且查阅新的1.9文档的时候也是没发现它有说还能够绑定函数，所以这里需要留意下了。那么toggle是个什么东西呢，你可以去查文档，也可以去尝试着用一下。

另外这里说一点，就是如果你有看到我的文章，那么当我说查文档的时候你最好去看下，因为我觉得你如果想学习一门编程语言的话没有查文档的能力的话那么你的学习能力基本为0了！

好吧，今天就到这儿吧，这么晚了都，本来准备把动画那部分也写了的看来不能了，只能明天一早起来写了！

每天说一句，祝：保持积极的心态，快乐的学习！