首页 > 代码库 > JQuery中的事件以及动画
JQuery中的事件以及动画
嘿嘿，今天学习了JQuery的事件以及动画，感觉即将学习完JQuery，在回忆起上周学习的JavaScript，感觉好多刚刚学习的知识点都记得模 糊啦，这个是很让失望的，这里只说明了一点，课是听过啦，但是没有好好的练习，于是就加快了刚学习的知识的遗忘力度。在一周的时间里学习了JavaScript， 那时间没感觉可得节奏很快，现在顿时发现课真的是快啦，我需要认真的对待，好好的在练习练习，而写发现最近的态度也有很大的问题，总是在赶今天学习的任 务，发现没有更多的时间去复习前面学习的知识，感觉还是有点苦恼的。这个事需要迅速解决的问题。好啦，来总结一下今天的知识吧。
一.简单的点击事件
上面就是在JQuery中实现的单击事件，这个与JavaScript中的单击事件相比，JavaScript使用的是onclick来实现其单击事件。
二.bind事件
<script src="http://www.mamicode.com/script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#divid h5.head").bind("click", function () { //bind事件，其中包含三个参数，第一个为事件，第二个为事件 alert($(this).text()); }); $("#divid h5.content").css("display", "none"); //css方法就是可以动态设置标签样式 }); $(function () { $("#btnid").bind("click", function () { if (bool == true) { $("#btnid .content").css("display", "none"); bool = false; $(this).val("显示"); } else { $("#btnid .content").css("display", ""); bool = true; $(this).val("隐藏"); } }); }); $(function () { $("input[type=button]").bind("click", function () { //内容的显示与隐藏 var content = $("#divid .content"); if (content.is(":visible")) { content.hide(); $(this).val("显示"); } else { content.show(); $(this).val("隐藏"); } }); }); </script><body> <div id="divid"> <h5 class="head">Rocky?</h5> <div class="content">就让雨下下来 不用带伞 让一切完蛋 看被淋湿的心 多久才会晒干</div> </div> <input type="button" name="name" value="http://www.mamicode.com/显示" id="btnid" /></body>在上面的操作中我们新学习了bind事件，而bind事件是三个参数，第一个参数是事件的名字，例如：click，dbclick，mouseover等，第二个参数是data，即传递过来的事件对象，第三个参数是一个方法，即用来处理处 理绑定的事件函数这就是我们的一个特殊的事件；另外在这里还举例写了一个动画中的例子，即文本信息的显示或者隐藏，在还没有学习show（）和 hide（）之前我们一般是按照上面第一种方式来写的，定义一个bool类型的变量即可，这样写起来还是很简单的，但是在写显示隐藏时间处理按钮上面还是 蛮蛮烦的，所以在学习了show（）和hide（）后就简单许多了，就是直接可以隐藏和显示。可以对比一下，显然在代码的处理上简单啦。
三.toggle事件和事件冒泡等
<script> $(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()); }); }) </script><body> <input type="button" name="btnname" value="http://www.mamicode.com/按钮" id="btn"/> <div id="ouuerdiv"> 外部div<div id="div">中部div<div id="innerdiv">内部div</div></div></div> <a href="http://www.baidu.com" id="a">百度</a> <textarea id="txt" rows="5" cols="5"> </textarea></body> Toggle事件：模拟鼠标点击事件，当鼠标移动到元素上时触发第一个事件，当鼠标离开元素时触发第二个事件。两个事件之间相互切换触发；另外还要说下事 件冒泡，事件冒泡其实简单的理解为：在一个页面上可以有多个事件，也可以多个元素相应一个事件。像上面一样假设页面中存在两个元素，其中一个div元素嵌 套在另一个div元素中并且都绑定了一个click事件，那么当你点击内部中div元素时间，外部的div也会显示，这就是事件冒泡。在这里需要注意的是都绑定了一个事件，容易想当然的认为仅仅的内部发生click事件。
四.移除事件和连续添加多个事件
<script> $(function () { $("removeall").click(function () { $("#btn").unbind(); //实现移除事件 }); $("#btn").bind("click", function () { //可以连续添加多个事件 $("#text").append("<p>我是第一个添加的事件</p>") }) .bind("click", function () { $("#text").append("<p>我是第二个添加的事件</p>") }) .bind("click", function () { $("#text").append("<p>我是第三个添加的事件</p>") }) }); </script><body> <button id="btn">单击我吧</button><button id="removeall">删除所有的事件</button> <div id="text">div文本信息</div></body>上面我们学习了bind事件，就是添加一个事件，而unbind就是移除事件，我们可以对比一下，嘿嘿，而针对连续添加多个事件其实就是当你添加玩一个事件后继续.bind添加事件即可。
五.模拟事件
我们学习的上面的bind事件、click事件等一般都是通过单击按钮才能触发的事件，但是有时间，需要通过模拟用户操作，来达到单击的效果，例如：在用户进入也买年后就触发click事件，而不需要用户去单击，那么我们就使用trigger（）方法来完成模拟操作。
六.一些其他的事件
<script> $(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 //}); }); </script><body> <div id="div" style="width:300px; height:300px;" >1234</div> <input type="button" name="name" value="http://www.mamicode.com/操作动画" id="btn" /></body>七.动画方法
八.多行文本框的应用-高度变化
<script src="http://www.mamicode.com/script/jquery-1.7.1.min.js"></script> <style> input:focus,textarea:focus { border:1px solid #f00; background-color:#fcc; } </style> <script> $(function () { var comment = $("#comment"); $(".bigger").click(function () { if (comment.height() < 500) { comment.height($("#comment").height() + 100); //在原有高度的基础上增高100 } }); $(".smaller").click(function () { if (comment.height() > 100) { comment.height($("#comment").height() - 100); //在原有高度的基础上降低100 } }); }) </script><body> <form action="#" method="post" id="regform"> <div class="msg"><span class="bigger">放大</span><span class="smaller">缩小</span></div> <div style="" data-mce-style="color: #800000;">"><textarea rows="8" cols="20" id="comment">海海海海</textarea></div> </form></body> 
上面的操作实现了点击放大时间，textarea的高度变高即面积变大，当点击缩小时间textarea的面积变小，即实现了动画的效果。
九.复选框应用
<script src="http://www.mamicode.com/script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#checkall").bind("click", function () { $(":checkbox").each(function () { $(this).attr("checked", "checked"); //点击按钮时间需要全部选中 }); }); $("#checkno").bind("click", function () { $(":checkbox").attr("checked", false); //点击按钮时间需要全部不选中 }); $("#checkRev").bind("click", function () { $(":checkbox").each(function () { if ($(this).attr("checked") == "checked") { $(this).attr("checked", false); } else { $(this).attr("checked", true); //点击按钮时间需要选中的清除，未选中的被选中 } }); }); //或者： $(this).attr("checked", !$(this).attr("checked")); }); </script><body> <form>你爱好的运动?<br /> <input type="checkbox" name="names" value="http://www.mamicode.com/足球" />足球<br /> <input type="checkbox" name="names" value="http://www.mamicode.com/篮球" />篮球<br /> <input type="checkbox" name="names" value="http://www.mamicode.com/排球" />排球<br /> <input type="checkbox" name="names" value="http://www.mamicode.com/羽毛球" />羽毛球<br /> <input type="button" id="checkall" value="http://www.mamicode.com/全选" /><br /> <input type="button" id="checkno" value="http://www.mamicode.com/全不选" /><br /> <input type="button" id="checkRev" value="http://www.mamicode.com/反选" /><br /> <input type="button" name="send" value="http://www.mamicode.com/提交" /><br /></form></body>在这里需要注意的是，判断复选框选中或者不选中的状态，必须通过控制元素的checked属性来达到目的，如果属性checked为true，说明被选中，如果为false，则说明未被选中。
十.下拉框的应用
<script src="http://www.mamicode.com/script/jquery-1.7.1.min.js"></script> <script> $(function () { $("#add").click(function () { var selectoption = $("#select1 option:selected"); selectoption.remove(); selectoption.appendTo(‘#select2‘); //把选中的项添加到右边的aelect框中 }); $("#addAll").bind("click",function () { var options = $("#select1 option"); options.appendTo(‘#select2‘); }); }); </script><body> <div class="center"> <select multiple="multiple" id="select1" style="width: 100px; height: 160px"> <option value="http://www.mamicode.com/1">选项1</option><option value="http://www.mamicode.com/2">选项2</option> <option value="http://www.mamicode.com/3">选项3</option> <option value="http://www.mamicode.com/4">选项4</option><option value="http://www.mamicode.com/5">选项5</option><option value="http://www.mamicode.com/6">选项6</option> <option value="http://www.mamicode.com/7">选项7</option><option value="http://www.mamicode.com/8">选项8</option><option value="http://www.mamicode.com/9">选项9</option> </select> <div> <span id="add">添加到右边</span> <span id="addAll">全部添加到右边</span> </div> </div> <div class="center" style="float:right"> <select multiple="multiple" id="select2" style="width: 100px; height: 160px" > </select> </div> 
上面的操作是实现了在在左边点击选择的项，然后添加到右边的框中，可以一个一个的添加，也可以全部一次性添加。
十一.表格的应用
<script src="http://www.mamicode.com/script/jquery-1.7.1.min.js"></script> <style> .even { background-color: #fff38f; } .odd { background-color: #ffffee; } </style> <script> $("#table tr:odd").addClass("odd"); //选取索引为奇数的行数 $("#table tr:even:not(:first)").addClass("even"); //选取索引为偶数的除了索引为0的行数 $("table tr").each(function () { $(this).click(function () { $(this).css("backgroundColor","red").siblings().css("backgroundColor",""); }); }) </script><body> <table border="1" id="table"> <thead><tr><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead><tbody> <tr class="parent" id="row1"><td colspan="3">前台设计组</td></tr> <tr class="child1"><td>张三</td><td>男</td><td>浙江宁波</td></tr> <tr class="child1"><td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr class="parent" id="row2"><td colspan="3">前台开发组</td></tr> <tr class="child2"><td>王五</td><td>男</td><td>湖南长沙</td></tr> <tr class="child2"><td>赵六</td><td>男</td><td>湖南长沙</td></tr> <tr class="parent" id="row3"><td colspan="3">后台开发组</td></tr> <tr class="child3"><td>孙七</td><td>男</td><td>湖南长沙</td></tr> <tr class="child3"><td>周八</td><td>男</td><td>湖南长沙</td> </tr> </tbody> </table></body>上面主要学习了对表格的简单操作，嘿嘿，今天就总结到这里，简单的学习动画的操作还是要灵活的掌握，其实这些都是简单的实例，我们在实际操作中当然不会这样的简单的，要加油喽。
JQuery中的事件以及动画