1.$("#id").bind("click",function(){
//dosomething
});
2.$(".className").mouseover(function(){
//dosomethind(简写)
});
3.$(function(){
$("xx xx.className").hover(function(){
//进入这个元素的时候
},function(){
//离开这个元素的时候
});
});
4.$("#idName").toggle(function(){},function(){},function(){});可以有N个参数,每单击一下元素，就触发第一个，然后第二个，第N个，再第一个
事件冒泡
5.event.stopPropagation();停止冒泡事件
6.event.preventDefault(); 阻止默认行为
###################也可以return false停止冒泡事件和阻止默认行为,而不调用上面的方法
jquery不支持事件捕获
7.event.type获得事件的类型如click
$(function(){
$("a").click(function(event){
alert(event.type);
event.preventDefault();
});
});
8.event.target获得触发事件的元素
$(function(){
$("a").click(function(event){
alert(event.target);
alert(event.target.href); //a要转到的连结地址
event.preventDefault();
});
});
9.event.pageX,event.pageY方法
$(function(){
$("p").click(function(event){
alert(event.pageX);
alert(event.pageY)
event.preventDefault();
});
});
10.event.which 鼠标单击中获得左，中，右键，分别为1,2,3
$(function(){
$("body").mousedown(function(e){
alert(e.which);
event.preventDefault();
});
});
11.键盘按下事件
$("body").keydown(function(e){
alert(e.keyCode)
});
12.删除以前注册的事件
$("input[type=button][value=submit]").unbind();//删除注册的所有事件
$("input[type=button][value=submit]").unbind("click");//删除注册的所有click事件
$("input[type=button][value=submit]").unbind("click",langhua);//只删除注册的函数名叫langhua的click事件
13.注册的事件只发生一次然后就不再发生了(one方法)
$("input[value=Click]").one("click",function(){
alert("AAAAAAAAAAAAAA");
});
模拟操作
14.常规模拟
$("input[id=langhua]").trigger("focus").trigger("select"); //模拟文本框得到焦点,并模拟全选事件
也可以简写成$("input[id=langhua]").focus().select();
15.触发自定义事件
$("input[type=button][value=submit]").bind("myClick",function(){
alert("自定义事件");
});
$("input[type=button][value=submit]").trigger("myClick");//这样就触发了自己定义的事件
16.触发要传递数据的事件
$("input[type=button][value=submit]").bind("myClick",function(field1,field2){
alert(field1+"__"+field2);
});
$("input[type=button][value=submit]").trigger("myClick",["value1","value2"]);//这样就触发了自己定义的事件
17.
$("input[id=langhua]").trigger("focus") //不仅会触发focus事件,还会触发默认的得到焦点事件
//所以如果只想单纯的触发一个事件就用$("input[id=langhua]").triggerHandler("focus");
动画
18.Jquery做的动话都要求在标准模式下,即头部的DTD为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
不然的话会有可能产生动画抖动
19. show(),hide()方法
有三个可用的参数slow,normal,fast分别是600,400,200毫秒
还可以直接用毫秒数
20. fadeIn(),fadeOut()方法,改变透明度
也可以传时间
21.slideDown()[这个是显示],slideUp()[这个是隐藏]改变高度
22.自动简单动画
animate(params,speed,callback);
(1)params:一个包含样式属性及值的映射,如{property1:"value1",property2:"value2".....}
(2)speed:速度参数,可选
(3)callback:动画完成时执行的函数,可选
例如:
#langhua{
position: relative;
width: 100px;
height: 100px;
border: 1px solid #0050d0;
background:#96E555;
cursor: pointer
}
页面DIV
<div id="langhua"></div>
为了使元素动起来必须先设置DIV的position: relative;或position: absolute;
然后加截click事件
$(function(){
$("#langhua").click(function(){
$(this).animate({left:"500px",top:"300px"},3000);
});
});
累加累减写法
$(function(){
$("#langhua").click(function(){
$(this).animate({left:"+=500px",top:"-=300px",height:"-=10px"},3000);
});
});
多重动画(动画队列,一个一个的运行)
$(function(){
$("#langhua").click(function(){
$(this).animate({left:"+=500px"},3000);
$(this).animate({top:"-=300px"},2000);
$(this).animate({height:"-=10px"},100);
});
});
$(function(){
$("#langhua").click(function(){
$(this).animate({left:"+=500px"},3000).animate({top:"-=300px"},2000)
.animate({height:"-=10px"},100)
.fadeOut();
});
});
23.停止动画stop()
停止动画对列stop(true);(page 129)
24.判断元素是否处于动画状态
if(!$("#langhua").is(":animated")){
//没有处于动画状态的就加上动画状态
}
25.toggle()方法,切换元素可见状态,如果元素是可见的,就换成不可见的,如果是不可见的,就换成可见的.
26.slideToggle()方法,同上面的方法,这个是高度变化
27.fadeTo()方法,把元素的不透明度,以渐进的方法调整到指定值
$("#panel h5.head").click(function(){
$(this).next("div.content").fadeTo(600,0.2);
});
jquery学习笔记4-事件与动画
最新推荐文章于 2024-04-19 15:29:12 发布
391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
