编程 Javascript

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

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

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

33种Javascript 表格排序控件收集

Dec 03 Javascript

复制小说文本时出现的随机乱码的去除方法

Sep 07 Javascript

了解了这些才能开始发挥jQuery的威力

Oct 10 Javascript

解决bootstrap导航栏navbar在IE8上存在缺陷的方法

Jul 01 Javascript

JavaScript如何实现跨域请求

Aug 05 Javascript

Jquery针对tr td的一些实用操作方法(必看篇)

Oct 05 Javascript

微信小程序实战实例开发流程详细介绍

Jan 05 Javascript

ES6中Symbol类型用法实例详解

Apr 06 Javascript

把vue-router和express项目部署到服务器的方法

Feb 21 Javascript

vue.js多页面开发环境搭建过程

Apr 24 Javascript

在Vue项目中用fullcalendar制作日程表的示例代码

Aug 04 Javascript

Vue 一键清空表单的实现方法

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