JQuery中的事件及动画用法实例
编程学习 2021-07-04 21:47www.dzhlxh.cn编程入门
这篇文章主要介绍了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>
<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>
$(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>
$(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
/
$(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
/