<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>选择器和事件的学习</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="web/css/ui-lightness/jquery-ui-1.9.0.custom.css"
rel="stylesheet">
<link href="web/css/jqueryStudy.css" rel="stylesheet">
<script src="web/js/jquery-1.8.2.js"></script>
<script src="web/js/jquery-ui-1.9.0.custom.js"></script>
<script type="text/javascript">
var downCount=0,upCount=0;
$(document).ready(function()
{
//奇数隐藏行，偶数显示行
$("#click").toggle(function()
{
$("#p1").hide();
$(".class1").hide();
},
function()
{
$("#p1").show();
$(".class1").show();
});
//用户单击某个HTML元素后调用，比如下面的例子中用户点击<h2>标记部分后隐藏该标记的内容：
$("h2").toggle(function()
{
$(this).hide();
}
);
//双击某个HTML标记时调用，比如下面代码在双击<p>元素时隐藏其内容：
$("#p2").dblclick(function()
{
$(this).hide();
});
//在鼠标进入某个HTML元素时触发
$("#p1").mouseenter(function()
{
$("#span1").text("You entered p1!");
$("#span1").removeClass("span_color_green");
$("#span1").addClass("span_color_red");
});
//在鼠标进入离开某个HTML元素时触发，
$("#p1").mouseleave(function()
{
$("#span1").text("Bye! You now leave p1!");
$("#span1").removeClass("span_color_red");
$("#span1").addClass("span_color_green");
});
//在按下鼠标左键时触发，例如：
$("#p2").mousedown(function()
{
$("#span2").text("Mouse down over p2!");
$("#span2").removeClass("span_color_green");
$("#span2").addClass("span_color_red");
});
//在某个元素上释放鼠标左键时触发，例如：
$("#p2").mouseup(function()
{
$("#span2").text("Mouse up over p2!");
$("#span2").removeClass("span_color_red");
$("#span2").addClass("span_color_green");
});
//在鼠标指针放在某个元素之上时触发，为mouseenter和mouseleave的组合，它的第一个回调函数中鼠标进入时调用，第二个回调函数在鼠标离开时执行，例如：
$("#p3").hover(function()
{
$("#span3").text("You entered p3!");
$("#span3").removeClass("span_color_green");
$("#span3").addClass("span_color_red");
},
function(){
$("#span3").text("Bye! You now leave p3!");
$("#span3").removeClass("span_color_red");
$("#span3").addClass("span_color_green");
});
//当某个表单输入域获得焦点时调用,例如：
$("input").focus(function()
{
$(this).css("background-color","#cccccc");
});
//当某个表单输入域失去焦点时调用,例如：
$("input").blur(function()
{
$(this).css("background-color","#ffffff");
});
//jQuery的hide()和show()可以用来显示和隐藏内容。比如下面的例子：jQuery的hide()和show()可以用来显示和隐藏内容
$("#hide").click(function ()
{
$("p").hide();
});
$("#show").click(function ()
{
$("p").show();
});
// 实现淡入效果
$("#fadeInBtn").click(function ()
{
$("#divRed").fadeToggle();
$("#divGreen").fadeToggle("slow");
$("#divBlue").fadeToggle(3000);
});
// 实现淡出效果
$("#fadeOutBtn").click(function()
{
$("#divRed").fadeOut();
$("#divGreen").fadeOut("slow");
$("#divBlue").fadeOut(3000);
});
//实现淡入淡出的组合效果
$("#fadeToBtn").click(function () {
$("#divRed").fadeToggle();
$("#divGreen").fadeToggle("slow");
$("#divBlue").fadeToggle(3000);
});
//滑动效果
$("#flip").click(function ()
{
//向下滑动的效果
$("#panel").slideDown("slow");
//向上滑动的效果
//$("#panel").slideUp("slow");
//
$("#panel").slideToggle("slow");
});
//动画效果
$("#animateBtn").toggle(function()
{
$("#divRed").animate({
left:'250px',
opacity:'0.5',
height:'50px',
width:'100px'
});
},function()
{
$("#divRed").animate({
width: '80px',
height: '80px',
color: 'red',
opacity:'1',
});
// $("#divRed").stop();
});
//jquery的回调函数使用
$("#animateHideBtn").click(function()
{
$("p").hide("slow",function()
{
$("#hideParagraph").addClass("span_color_green");
$("#hideParagraph").text("The paragraph is now hidden!");
});
});
//方法链
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
</script>
</head>
<body>
<h2>
This is a heading
</h2>
<p id="p1" class="class1">
This is one paragraph.I use mouseenter and mouseleave event.
<span id="span1"></span>
</p>
<p id="p2" class="class2">
This is two paragraph.I use mousedown , mouseup and dbclick event.
<span id="span2"></span>
</p>
<p id="p3" class="class3">
This is three paragraph.I use hover event.
<span id="span3"></span>
</p>
<span> If you click on the "Hide" button, I will disappear. </span>
<div>
<button id="click">
Click me
</button>
<button id="hide">
Hide
</button>
<button id="show">
Show
</button>
</div>
<p>
Demonstrate fadeToggle() with different speed parameters.
</p>
<button id="fadeInBtn">
Click to fade in boxes
</button>
<button id="fadeoutBtn">
Click to fade out boxes
</button>
<button id="fadeToBtn">
Click to fade to boxes
</button>
<button id="animateBtn">
Click to animate
</button>
<button id="animateHideBtn">
Click to animate and hide
</button>
<span id='hideParagraph'></span>
<br>
<br>
<div>
<span id="divRed"
style="width: 80px; height: 80px; background-color: red; float: left;"></span><span
style="width: 10px; float: left"> </span>
<span id="divGreen"
style="width: 80px; height: 80px; background-color: green; float: left;"></span><span
style="width: 10px; float: left"> </span>
<span id="divBlue"
style="width: 80px; height: 80px; background-color: blue; float: left;"></span><span
style="width: 10px; float: left"> </span>
</div>
<div id="flip">
Click to slide down panel
</div>
<div id="panel">
Hello world!
</div>
</body>
</html>
本文通过实例详细介绍了jQuery中各种事件的应用，包括鼠标和键盘事件的处理，以及动画效果如淡入淡出、滑动等的实现方式。此外，还展示了如何结合事件处理进行动画效果的控制。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
