JQuery中的事件及动画用法实例

前端之家收集整理的这篇文章主要介绍了JQuery中的事件及动画用法实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了JQuery中的事件及动画用法分享给大家供大家参考。具体分析如下:

1.bind事件

代码如下:
在上面的操作中我们新学习了bind事件,而bind事件是三个参数,第一个参数是事件的名字,例如:click,dbclick,mouSEOver等,第二个参数是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()); }); })
@L_404_2@ 代码如下:
$(function () { $("removeall").click(function () { $("#btn").unbind(); //实现移除事件 }); $("#btn").bind("click",function () { //可以连续添加多个事件 $("#text").append("

我是第一个添加的事件

") }) .bind("click",function () { $("#text").append("

我是第二个添加的事件

") }) .bind("click",function () { $("#text").append("

我是第三个添加的事件

") }) });
上面我们学习了bind事件,就是添加一个事件,而unbind就是移除事件,我们可以对比一下,嘿嘿,而针对连续添加多个事件其实就是当你添加玩一个事件后继续.bind添加事件即可。

4.模拟事件

我们学习的上面的bind事件、click事件等一般都是通过单击按钮才能触发的事件,但是有时间,需要通过模拟用户操作,来达到单击的效果,例如:在用户进入也买年后就触发click事件,而不需要用户去单击,那么我们就使用trigger()方法来完成模拟操作。

5.一些其他的事件

代码如下:
$(function () { $("#btn").click(function () { //$("#div").hide(2000); //在2秒内隐藏 //$("#div").show(2000); //在2秒内显示 //$("#div").fadeIn(2000); //增强元素的不透明度,直至元素完全显示 //$("#div").fadeOut(2000); //降低元素的不透明度,直至元素完全消失 $("#btn").toggle(function () { $("div").slideDown(2000); //改变元素的高度,由上至下显示 $(this).val("显示") },function () { $("div").slideUp(2000); //改变元素的高度,由下至上缩短隐藏 $(this).val("隐藏") }); }); //$("#btn").click(function () { // $("div").fadeTo(600,0.2); //fadeTo方法适用于在0.6s内透明度是0.2 //}); });
1234
动画方法

6.多行文本框的应用-高度变化

代码如下:
上面的操作实现了点击放大时间,textarea的高度变高即面积变大,当点击缩小时间textarea的面积变小,即实现了动画的效果

7.复选框应用

代码如下:
你爱好的运动?@H_404_96@ 足球@H_404_96@ 篮球@H_404_96@ 排球@H_404_96@ 羽毛球@H_404_96@ @H_404_96@ @H_404_96@ @H_404_96@ @H_404_96@
在这里需要注意的是,判断复选框选中或者不选中的状态,必须通过控制元素的checked属性来达到目的,如果属性checked为true,说明被选中,如果为false,则说明未被选中。

8.下拉框的应用

代码如下:
上面的操作是实现了在在左边点击选择的项,然后添加到右边的框中,可以一个一个的添加,也可以全部一次性添加

9.表格的应用

代码如下:
姓名前台设计组前台开发组后台开发组

希望本文所述对大家的jQuery程序设计有所帮助。

原文链接:https://www.f2er.com/jquery/56105.html

猜你在找的jQuery相关文章

性别暂住地