本文实例讲述了JQuery中的事件及动画用法。分享给大家供大家参考。具体分析如下:
1.bind事件
在上面的操作中我们新学习了bind事件,而bind事件是三个参数,第
一个参数是事件的名字,例如:click,dbclick,mou
SEOver等,第二个参数是data,即传递过来的事件对象,第三个参数是
一个方法,即用来处理处 理绑定的事件
函数这就是我们的
一个特殊的事件;另外
在这里还举例写了
一个动画中的例子,即文本信息的
显示或者隐藏,在还没有学习show()和 hide()之前我们一般是按照上面第一种方式来写的,定义
一个bool类型的变量即可,这样写起来还是很简单的,但是在写
显示隐藏时间处理按钮上面还是 蛮蛮烦的,所以在学习了show()和hide()后就简单许多了,就是直接可以隐藏和
显示。可以对比一下,显然在
代码的处理上简单啦。
2.toggle事件和事件冒泡
$(function () {
$("input[type=button]").toggle(function () { //toggle两个参数都为事件,轮番
调用
$(this).css("backgroundColor","red");
},function () {
$(this).css("backgroundColor","yellow");
});
});
$(function () {
$("div").each(function () {
$(this).bind("mouseup",function (e) {
alert(e.pageX); //
输出鼠标的x方向的位置
alert(e.pageY); //
输出鼠标的y方向的位置
alert(e.which); //
输出鼠标的按键的选择,1为鼠标左键,2为滚轴按键,3为鼠标右键
});
});
});
$(function () {
$("#txt").keydown(function () {
e.preventDefault(); //阻止a
标签链接
alert(e.keyCode); //
键盘获取其ask码
});
});
$(function () {
$("#ouuerdiv").click(function () {
alert($(this).text());
});
$("#div").click(function () {
alert($(this).text());
});
$("#innerdiv").click(function () { //
在这里是写了
一个事件的冒泡现象,组织冒泡可以使用preventDefault或者precentDefault
alert($(this).text());
});
})
Toggle事件:模拟鼠标点击事件,当鼠标移动到元素上时触发第一个事件,当鼠标离开元素时触发第二个事件。两个事件之间相互切换触发;另外还要说下事 件冒泡,事件冒泡其实简单的理解为:在一个页面上可以有多个事件,也可以多个元素相应一个事件。像上面一样假设页面中存在两个元素,其中一个div元素嵌 套在另一个div元素中并且都绑定了一个click事件,那么当你点击内部中div元素时间,外部的div也会显示,这就是事件冒泡。在这里需要注意的是都绑定了一个事件,容易想当然的认为仅仅的内部发生click事件。
$(function () {
$("removeall").click(function () {
$("#btn").unbind(); //实现移除事件
});
$("#btn").bind("click",function () { //可以连续
添加多个事件
$("#text").append("
我是第一个添加的事件
")
})
.bind("click",function () {
$("#text").append("
我是第二个添加的事件
")
})
.bind("click",function () {
$("#text").append("
我是第三个添加的事件
")
})
});