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

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

1.bind事件

复制代码 代码如下:

<script><br /> $(function () {<br /> $("#divid h5.head").bind("click", function () { //bind事件，其中包含三个参数，第一个为事件，第二个为事件<br /> alert($(this).text());<br /> });<br /> $("#divid h5.content").css("display", "none"); //css方法就是可以动态设置标签样式<br /> });<br /> $(function () {<br /> $("#btnid").bind("click", function () {<br /> if (bool == true) {<br /> $("#btnid .content").css("display", "none");<br /> bool = false;<br /> $(this).val("显示");<br /> }<br /> else {<br /> $("#btnid .content").css("display", "");<br /> bool = true;<br /> $(this).val("隐藏");<br /> }<br /> });<br /> });<br /> $(function () {<br /> $("input[type=button]").bind("click", function () { //内容的显示与隐藏<br /> var content = $("#divid .content");<br /> if (content.is(":visible")) {<br /> content.hide();<br /> $(this).val("显示");<br /> }<br /> else {<br /> content.show();<br /> $(this).val("隐藏");<br /> }<br /> });<br /> });<br /> </script>

Rocky?

就让雨下下来 不用带伞 让一切完蛋 看被淋湿的心 多久才会晒干

在上面的操作中我们新学习了bind事件，而bind事件是三个参数，第一个参数是事件的名字，例如：click，dbclick，mouseover等，第二个参数是data，即传递过来的事件对象，第三个参数是一个方法，即用来处理处 理绑定的事件函数这就是我们的一个特殊的事件；另外在这里还举例写了一个动画中的例子，即文本信息的显示或者隐藏，在还没有学习show（）和 hide（）之前我们一般是按照上面第一种方式来写的，定义一个bool类型的变量即可，这样写起来还是很简单的，但是在写显示隐藏时间处理按钮上面还是 蛮蛮烦的，所以在学习了show（）和hide（）后就简单许多了，就是直接可以隐藏和显示。可以对比一下，显然在代码的处理上简单啦。

2.toggle事件和事件冒泡

复制代码 代码如下:

<script><br /> $(function () {<br /> $("input[type=button]").toggle(function () { //toggle两个参数都为事件，轮番调用<br /> $(this).css("backgroundColor","red");<br /> }, function () {<br /> $(this).css("backgroundColor", "yellow");<br /> });<br /> });<br /> $(function () {<br /> $("div").each(function () {<br /> $(this).bind("mouseup", function (e) {<br /> alert(e.pageX); //输出鼠标的x方向的位置<br /> alert(e.pageY); //输出鼠标的y方向的位置<br /> alert(e.which); //输出鼠标的按键的选择，1为鼠标左键，2为滚轴按键，3为鼠标右键<br /> });<br /> });<br /> });<br /> $(function () {<br /> $("#txt").keydown(function () {<br /> e.preventDefault(); //阻止a标签链接<br /> alert(e.keyCode); //键盘获取其ask码<br /> });<br /> });<br /> $(function () {<br /> $("#ouuerdiv").click(function () {<br /> alert($(this).text());<br /> });<br /> $("#div").click(function () {<br /> alert($(this).text());<br /> });<br /> $("#innerdiv").click(function () { //在这里是写了一个事件的冒泡现象，组织冒泡可以使用preventDefault或者precentDefault<br /> alert($(this).text());<br /> });<br /> })<br /> </script>

外部div

中部div

内部div

百度
<br>

Toggle事件：模拟鼠标点击事件，当鼠标移动到元素上时触发第一个事件，当鼠标离开元素时触发第二个事件。两个事件之间相互切换触发；另外还要说下事 件冒泡，事件冒泡其实简单的理解为：在一个页面上可以有多个事件，也可以多个元素相应一个事件。像上面一样假设页面中存在两个元素，其中一个div元素嵌 套在另一个div元素中并且都绑定了一个click事件，那么当你点击内部中div元素时间，外部的div也会显示，这就是事件冒泡。在这里需要注意的是都绑定了一个事件，容易想当然的认为仅仅的内部发生click事件。

3.移除事件和连续添加多个事件

复制代码 代码如下:

<script><br /> $(function () {<br /> $("removeall").click(function () { <br /> $("#btn").unbind(); //实现移除事件<br /> });<br /> $("#btn").bind("click", function () { //可以连续添加多个事件<br /> $("#text").append("<p>我是第一个添加的事件")<br /> })<br /> .bind("click", function () {<br /> $("#text").append("<p>我是第二个添加的事件")<br /> })<br /> .bind("click", function () {<br /> $("#text").append("<p>我是第三个添加的事件")<br /> })<br /> });<br /> </script>

单击我吧删除所有的事件

div文本信息

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

4.模拟事件

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

5.一些其他的事件

复制代码 代码如下:

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

1234

动画方法

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

复制代码 代码如下:

<script><br /> $(function () {<br /> var comment = $("#comment");<br /> $(".bigger").click(function () {<br /> if (comment.height() < 500) {<br /> comment.height($("#comment").height() + 100); //在原有高度的基础上增高100<br /> }<br /> });<br /> $(".smaller").click(function () { <br /> if (comment.height() > 100) {<br /> comment.height($("#comment").height() - 100); //在原有高度的基础上降低100<br /> }<br /> }); <br /> })<br /> </script>

放大缩小

">海海海海

上面的操作实现了点击放大时间，textarea的高度变高即面积变大，当点击缩小时间textarea的面积变小，即实现了动画的效果。

7.复选框应用

复制代码 代码如下:

<script><br /> $(function () {<br /> $("#checkall").bind("click", function () {<br /> $(":checkbox").each(function () {<br /> $(this).attr("checked", "checked"); //点击按钮时间需要全部选中<br /> });<br /> });<br /> $("#checkno").bind("click", function () {<br /> $(":checkbox").attr("checked", false); //点击按钮时间需要全部不选中<br /> });<br /> $("#checkRev").bind("click", function () {<br /> $(":checkbox").each(function () {<br /> if ($(this).attr("checked") == "checked") {<br /> $(this).attr("checked", false);<br /> }<br /> else {<br /> $(this).attr("checked", true); //点击按钮时间需要选中的清除，未选中的被选中<br /> }<br /> });<br /> });<br /> //或者：<br /> $(this).attr("checked", !$(this).attr("checked"));<br /> });<br /> </script>

你爱好的运动?

足球

篮球

排球

羽毛球

在这里需要注意的是，判断复选框选中或者不选中的状态，必须通过控制元素的checked属性来达到目的，如果属性checked为true，说明被选中，如果为false，则说明未被选中。

8.下拉框的应用

复制代码 代码如下:

<script><br /> $(function () {<br /> $("#add").click(function () {<br /> var selectoption = $("#select1 option:selected");<br /> selectoption.remove();<br /> selectoption.appendTo('#select2'); //把选中的项添加到右边的aelect框中<br /> });<br /> $("#addAll").bind("click",function () {<br /> var options = $("#select1 option");<br /> options.appendTo('#select2');<br /> });<br /> });<br /> </script>

选项1 选项2 选项3
选项4 选项5 选项6
选项7 选项8 选项9

添加到右边
全部添加到右边

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

9.表格的应用

复制代码 代码如下:

<script><br /> $("#table tr:odd").addClass("odd"); //选取索引为奇数的行数<br /> $("#table tr:even:not(:first)").addClass("even"); //选取索引为偶数的除了索引为0的行数<br /> $("table tr").each(function () {<br /> $(this).click(function () {<br /> $(this).css("backgroundColor","red").siblings().css("backgroundColor","");<br /> });<br /> })<br /> </script>

姓名	性别	暂住地
前台设计组
张三	男	浙江宁波
李四	女	浙江杭州
前台开发组
王五	男	湖南长沙
赵六	男	湖南长沙
后台开发组
孙七	男	湖南长沙
周八	男	湖南长沙

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