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


Posted in Javascript onJanuary 26, 2015

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

1.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()后就简单许多了,就是直接可以隐藏和显示。可以对比一下,显然在代码的处理上简单啦。

2.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事件。

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

<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添加事件即可。

4.模拟事件

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

5.一些其他的事件

<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>

动画方法

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

<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的面积变小,即实现了动画的效果。

7.复选框应用

<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,则说明未被选中。

8.下拉框的应用

<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>

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

9.表格的应用

<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程序设计有所帮助。

Javascript 相关文章推荐
javascript中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
javascript折半查找详解
Jan 26 #Javascript
JavaScript数据类型检测代码分享
Jan 26 #Javascript
浅谈Javascript中的Function与Object
Jan 26 #Javascript
javascript实现动态加载CSS
Jan 26 #Javascript
使用jQuery实现返回顶部
Jan 26 #Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 #Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 #Javascript
You might like
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
举例区分Python中的浅复制与深复制
2015/07/02 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
python中for in的用法详解
2020/04/17 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
html5教程画矩形代码分享
2013/12/04 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
大学生求职工作的自我评价
2014/02/13 职场文书
信息管理专业自荐书
2014/06/05 职场文书
毕业证委托书范文
2014/09/26 职场文书