JQuery中的事件以及动画

嘿嘿，今天学习了JQuery的事件以及动画，感觉即将学习完JQuery，在回忆起上周学习的JavaScript，感觉好多刚刚学习的知识点都记得模糊啦，这个是很让失望的，这里只说明了一点，课是听过啦，但是没有好好的练习，于是就加快了刚学习的知识的遗忘力度。在一周的时间里学习了JavaScript，那时间没感觉可得节奏很快，现在顿时发现课真的是快啦，我需要认真的对待，好好的在练习练习，而写发现最近的态度也有很大的问题，总是在赶今天学习的任务，发现没有更多的时间去复习前面学习的知识，感觉还是有点苦恼的。这个事需要迅速解决的问题。好啦，来总结一下今天的知识吧。

一.简单的点击事件

上面就是在JQuery中实现的单击事件，这个与JavaScript中的单击事件相比，JavaScript使用的是onclick来实现其单击事件。

二.bind事件

<script src="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="显示 " 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="按钮" 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="操作动画" id="btn" /> </body>

七.动画方法

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

 <script src="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="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="足球 " />足球<br /> <input type="checkbox" name="names" value="篮球 " />篮球<br /> <input type="checkbox" name="names" value="排球 " />排球<br /> <input type="checkbox" name="names" value="羽毛球 " />羽毛球<br /> <input type="button" id="checkall" value="全选 " /><br /> <input type="button" id="checkno" value="全不选 " /><br /> <input type="button" id="checkRev" value="反选 " /><br /> <input type="button" name="send" value="提交" /><br /> </form> </body>

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

十.下拉框的应用

<script src="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="1">选项1</option><option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option><option value="5">选项5</option><option value="6">选项6</option> <option value="7">选项7</option><option value="8">选项8</option><option value="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="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中的事件以及动画相关推荐

四、jQuery 中的事件和动画(嘎嘎详细)
文章目录前言一.事件 1.1 加载 DOM 1.1.1 执行时机 1.1.2 多次使用 1.1.3 简写方式 1.2 事件绑定 1.2.1简单使用 1.2.2 简写绑定事件 1.3 合成事件 1. ...
jquery中的事件和动画
目录一.jquery中的事件 1.加载DOM 2.事件绑定 3.合成事件 4.事件冒泡 5.事件对象的属性 6.移除事件二.jquery中的动画 1.隐藏和显示 2.滑动效果 3.淡入淡出效果三 ...
锋利的Jquery【读书笔记】 -- 第四章 jQuery中的事件和动画
锋利的Jquery读书笔记第三章 jQuery中的DOM操作 jQuery中的事件事件绑定 bind方法合成事件 hover方法 toggle方法事件冒泡事件对象停止事件冒泡阻止默认行为 ...
第7章 jQuery中的事件与动画
一.事件: 1.鼠标事件 click( ) 触发或将函数绑定到指定元素的click事件单击鼠标时 dblclick( ) 触发或将函数绑定到指定元素的dblclick事件双击鼠标时 mouseov ...
10-jQuery中的事件与动画教程
jQuery中的事件作者:曾庆林事件初探加载文档完成触发:$(document).ready(function(){}) 事件可以多次执行. 代码可以简写:$(function(){}) 事件绑 ...
jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
JQuery中的事件和选择器
学习jQuery最应该了解的也就是JQuery中的事件和选择器. 那么常见的事件有哪些: 鼠标事件:mousedown鼠标按下,mouseup鼠标松开,mouseenter鼠标进入某个元素 mouse ...
java中jquery怎么学,浅谈jQuery中的事件--Java学习网
核心提示:JQuery事件初见1.JQuery中的事件绑定其实呢,JQuery中标准的事件绑定是这样写下:(如下)代码如下:$('#btn').bind('click',function(){}):但 ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...

JQuery中的事件以及动画

JQuery中的事件以及动画相关推荐

最新文章

热门文章