JQuery中的事件以及动画
.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;
}
</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 {
}
.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中的事件和动画——《锋利的jQuery》（第2版）读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- jQuery中的事件与动画<思维导图>
Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...
- 第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
- jQuery中的事件和动画 以及视频展示效果实例
经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
- 【jQuery基础学习】03 jQuery中的事件与动画
关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...
- JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
- 第4章 jQuery中的事件和动画
4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...
- 第3章 jquery中的事件和动画
一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...
随机推荐
- CentOS Mysql自动备份 .txt
http://fly.b3log.org/articles/2011/10/25/1319505473928.html MySql数据库备份: 说明:我这里要把MySql数据库存放目录/var/lib ...
- SSIS ->> Data Flow Design And Tuning
Requirements: Source and destination system impact Processing time windows and performance Destinati ...
- Oracle ->> 查看分区表的每个分区的数据行分布情况
ora_hash函数用来返回分区号,而dbms_rowid.rowid_object()函数用来返回object_id , ) part_id ,count(*) from sales_fact_pa ...
- Myeclipse 自定义代码自动格式化(ctrl+alt+F)
打开如图界面:preference->java->code style->formatter下的edit... 如设设置java代码多长换行:
- tomcat报警告 An attempt was made to authenticate the locked user
有好多这样的警报怪怪的,一分钟抛一次,大概抛了10分钟,停止 有 Anattempt was made to authenticate the locked user "root" ...
- [2014-03-13 08:46:42 - Dex Loader] Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace.
Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace. 问题提示 ...
- hdoj - 5202 Rikka with string (BestCoder Round #37 ($))
http://acm.hdu.edu.cn/showproblem.php?pid=5202 字符串处理的题,要细心. 给定一个只包含小写字母和问号的字符串,让我们还原出本来的字符串,把问号替换成任意 ...
- Open_Newtonsoft_Json 的序列化和反序列化
Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库(下载地址http://json.codeplex.com/). 特别注明:本人转自 陈 晨 博客园的 Newtonso ...
- apache 配置用户级目录
如果你只需要在用户目录下使用apache的话,还有一个最简单的方式,直接将 httpd.conf文件下的 DocumentRoot "/Library/WebServer/Documents ...
- JSON 之 SuperObject(6): 方法
SuperObject 的 JSON 对象中还可以包含 "方法", 这太有意思了; 其方法的格式是: procedure Method(const This, Params: IS ...