jQuery中的事件与动画

来源：互联网发布：数据库设计原则和步骤编辑：程序博客网时间：2024/05/21 12:30

01.基础事件

001.window事件

常用的Window事件有文档就绪事件，它对应的方法是ready().

002.鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的时间，常用的鼠标事件如下：

click( ) 触发或将函数绑定到指定元素的click事件单机鼠标时

mouseover( ) 触发或将函数绑定到指定元素的mouseover事件鼠标指针事件

mouseout( ) 触发或将函数绑定到指定元素的mouseout事件鼠标指针移除时

mousemove( ) 触发或将函数绑定到指定元素的mousemove事件鼠标移动

003.键盘事件

键盘事件指当键盘集聚到Wed浏览器时，用户每次按下或者释放键盘上的按键时都会产生事件。常用键盘事件方法：

keydown( ) 触发或将函数绑定到指定元素的keydown事件按下按键时

keyup( ) 触发或将函数绑定到指定元素的keyup事件释放案件时

keypress( ) 触发或将函数绑定到keypress事件产生可打印的字符时

004.表单事件

表单事件是所有事件类型中最稳定，且支持最稳定的事件之一。除了用户选取单选框，复选框产生的click事件外，当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件。常用的事件方法：

focus( ) 触发或将函数绑定到指定元素的focus事件获得焦点

blur( ) 触发或将函数绑定到指定元素的blur事件失去焦点

例：

$(function(){

$("[name=member]").focus(function(){ //当name属性值为member的元素获得焦点时

$(this).addClass("input_focus"); //为该元素添加类样式.input_focus

});

$("[name=member]").blur(function(){ //当name属性值为member的元素失去焦点时

$(this).removeClass("input_focus"); //为该元素移除类样式.input_focus

});

005.移除和绑定事件

1.绑定事件

语法：bind( type,[data],fn )

bind( )方法的参数说明

type 事件类型主要包括blur，focus，click，mouseout等基础事件，此外，还可以是自定义事件

[data] 可选参数作为event.data属性值传递给事件对象的额外数据对象，该参数不是必须的

fn 处理函数用来绑定的处理函数

2.移除事件

移除事件与绑定事件是相对的，在jQuery中，为匹配的元素移除单个或多个事件，可以使用unbind( )方法，语法：

unbind([type],[fn])

unbind()方法有2个参数，这两个参数不是必须的，当unbind（）不带参数时，表示移除所绑定的全部事件。

[type] 事件类型主要包括blur，click，mouseouot等基础事件，此外，还可以是自定义事件

[fn] 处理函数用来解除绑定的处理函数

006.复合函数

jQuery中的两种复合事件方法 ---------hover( )和toggle( )方法，这两个方法与ready( )类似，都是jQuery自定义的方法。

hover( )方法用于模拟鼠标指针悬停事件。当鼠标指定移动到元素上时，会触发指定的第一个函数（enter）；当鼠标指针移除这个元素时,会触发指定的第二个函数（leave），该方法相当于mouseover与mouseout事件的组合。

语法：

hover( enter ,leave );

例：

$(document).ready(function(){

$("#ccound").hover(function(){

#("#men").css("dispaly","block");

},function(){

$("#mun").css("dispaly","none");

});

2.toggle()方法

toggle（）方法用于模拟鼠标连续click事件。第一次单击元素，触发指定的第一个函数（fn1），当再次单击同一个元素时，则触发指定的第一个函数（fn2），如果有更多函数，则依次触发，直到最后一个。

语法： toggle( fn1,fn2.......fnN);

控制元素显示：

语法：

$(selector).show( [speed],[callback] )

speed:可选，规定元素从隐藏到完全可见的速度，默认值为0；

callback：可选，show函数执行完之后，要执行的函数。

控制元素隐藏：

语法：

$(selector).hide( [speed],[callback]) 参数方式与show（）方法相同

例：

$(document).ready(function(){

$("#del").click(function(){

$(".tip").show("slow");

});

$("input[name=cancel]").click(function(){

$(".tip").hide("fast");

});

改变元素透明度：

使用fadeln( )方法和fadeOut( )方法实现元素的谈入和淡出，使用slideup（）方法和slideDown（）方法实现元素的收缩和展开。

上机题

<title>My JSP 'shangji5.jsp' starting page</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css" >
*{
margin:0px;
padding:0px;
font-size:12px;
}
a{
color:#999;
text-decoration:none;
}
body{
background:#fff url(sj5/bg.jpg) no-repeat;
}
ul{
list-style:none;
}
.pos{
position:absolute;
}
#menu{
left:931px;
top:5px;


}
#menu li{
display:block;
height:20px;
line-height:20px;
background-color:#fff;
padding:4px;
}

#tabs{
left:222px;
top:237px
}
#tab-top{
height:30px;
line-height:30px;
padding-left:20px;
border-bottom:1px solid #15B69A;

}
#tab-top ul li{
display:block;
float:left;
padding:0px 15px;
border:1px solid #C6C5C5;
border-bottom:1px solid #15B69A;
background-color:#F0F0F0;
margin-right:10px;
margin-top:-1px;
cursor:pointer;
}
#tab-top ul li.on{
border:1px solid #15B69A;
border-top:2px solid #15B69A;
border-bottom:none;
background-color:#F0FCF1;
}

</style>
<script type="text/javascript">
$(function(){
<span style="white-space:pre"> </span>$("#menu a").hover(function(){
<span style="white-space:pre"> </span>$("#menu-ul").toggle();
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span>$("#tab-top ul li").click(function(){
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>$(".content").hide();
<span style="white-space:pre"> </span>$(".content").eq($(this).index()).show(1800);
<span style="white-space:pre"> </span>});




<span style="white-space:pre"> </span>});

</script>


</head>

<body>

<div id="menu" class="pos">
<a href="#">我的当当</a>
<ul id="menu-ul" style="display:none;">
<li><a href="#">我的订单</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的礼品卡</a></li>
<li><a href="#">我的积分</a></li>
<li><a href="#">我的余额</a></li>
</ul>
</div>


<div id="tabs" class="pos">
<div id="tab-top">
<ul>
<li class="on">我的订单</li>
<li>我的团购订单</li>
</ul>
</div>
<div class="content" >
<img src="sj5/order.jpg" />
</div>
<div class="content" style="display:none;">
<img src="sj5/tuan.jpg" />
</div>
</div>


</body>
</html>

----------------------------------------------------------------------

<title>My JSP 'shangji4.jsp' starting page</title>
<style type="text/css" >
.one{
width:600px;
font-size:12px;
}
.one .top{
background-color:#fff;
height:33px;
line-height:33px;
width:700px;
padding-left:28px;
color:#168750;
font-weight:bold;
margin-top:10px;
}
.iocn{
display:block;
width:14px;
height:14px;
background-image:url(sj4/+.jpg);
background-repeat:no-repeat;
float:left;
margin:10px 0px 0px 3px;
padding-right:10px;
}
.one span.jian{
background-image:url(sj4/-.jpg);

}
.one span.jia{
background-image:url(sj4/+.jpg);

}
.one div.bgreen{
background-image:url(sj4/bg.jpg);
}
div.content{
display:none;
padding:5px;
width:716px;
border:1px solid #D9EFED;
}
</style>
<script type="text/javascript">
$(function() {
$(".top").hover(function() {
$(this).addClass("bgreen");
},function(){
$(this).removeClass("bgreen");
});
$(".top").toggle(
function(){
$(this).find(".iocn").removeClass("jia").addClass('jian');
$(this).siblings(".content").show(1500);
},
function(){
$(this).find(".iocn").removeClass("jian").addClass('jia');
$(this).siblings(".content").hide('slow');
});
});







</script>

</head>

<body>
<div id="fq">
<div class="one">
<div class="top"><span class="iocn"></span>什么是人身保险？</div>
<div class="content">
<img src="sj4/gd.jpg" /><br/>
<p>人身保险是人的寿命和身体为...... </p>
</div>
</div>
<div class="one">
<div class="top"><span class="iocn"></span>什么是保险合同？</div>
<div class="content">
<img src="sj4/gd.jpg" /><br/>
<p>保险合同是......</p>
</div>
</div>
<div class="one">
<div class="top"><span class="iocn"></span>什么是保险人？</div>
<div class="content">
<img src="sj4/gd.jpg" /><br/>
<p>保险人是......</p>
</div>
</div>
<div class="one">
<div class="top"><span class="iocn"></span>什么是投保人？</div>
<div class="content">
<img src="sj4/gd.jpg" /><br/>
<p>投保人是......</p>
</div>
</div>
</div>


</body>
</html>

0 0