当前位置: 首页 > 编程笔记 >

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

潘哲
2023-03-14
本文向大家介绍JQuery中的事件及动画用法实例,包括了JQuery中的事件及动画用法实例的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍Vue动画事件详解及过渡动画实例,包括了Vue动画事件详解及过渡动画实例的使用技巧和注意事项,需要的朋友参考一下 为了应用过渡效果,需要在目标元素上使用 transition 特性: transition 特性可以与下面资源一起用: v-if v-show v-for (只在插入和删除时触发,使用 vue-animated-list 插件) 动态组件 在组件的根节点上,并且被 Vue

  • 本文向大家介绍jQuery之动画ajax事件(实例讲解),包括了jQuery之动画ajax事件(实例讲解)的使用技巧和注意事项,需要的朋友参考一下 废话不多说,直接上代码 以上这篇jQuery之动画ajax事件(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍jQuery中事件与动画的总结分享,包括了jQuery中事件与动画的总结分享的使用技巧和注意事项,需要的朋友参考一下 1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是等待标签完毕,即可执行 区别:前者在HTML页面中只能解析最后一个,二后者是N个 第一

  • 本文向大家介绍iOS中UIActivityIndicatorView的用法及齿轮等待动画实例,包括了iOS中UIActivityIndicatorView的用法及齿轮等待动画实例的使用技巧和注意事项,需要的朋友参考一下 基础 @派生自UIView,所以它是视图,也可以附着在视图上。 一.创建 二. 属性设置风格 系统给你提供了3种风格: UIActivityIndicatorViewStyleWh

  • 本文向大家介绍jquery事件preventDefault()方法用法实例,包括了jquery事件preventDefault()方法用法实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery事件preventDefault()方法用法。分享给大家供大家参考。具体实现方法如下: 补充说明: (1)如果想获取事件的相关信息,则给匿名函数添加一个参数。例子中的e表示事件的对象。 (2

  • 本文向大家介绍jQuery事件用法实例汇总,包括了jQuery事件用法实例汇总的使用技巧和注意事项,需要的朋友参考一下 本文以实例形式详细汇总了jQuery中事件的用法,对jQuery的学习有很好的参考价值。分享给大家供大家参考之用。具体用法如下: 1.通过方法名给元素绑定事件: 2.通过bind方法给元素绑定事件: 可见,通过bind,可以给元素绑定多个事件。 3.事件的命名空间 为什么需要事件