jQuery中的事件与动画
2017-05-03 15:52
281 查看
1.简单的单击事件
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
alert($(this).val()
);
});
});
</script>
2.事件绑定
type:事件类型,包括blur,focus,load,resize,scroll,unload,click,dbclick,mousedouwn,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error,
params:可选参数,作为event.data属性值传递给事件对象的额外数据对象
fn:绑定的处理函数
*jQuery中的时间绑定类型比普通的javascript少了on,如onclick()——click()
<div id="panel"><h5 class="head">jQuery的事件绑定</h5><div class="content">It's a ......</div></div>
//当Dom加载完毕,找到标题所在的元素,绑定click事件,找到内容元素,将内容元素显示
$(function(){$("#panel").bind("click",function(){$(this).next().show();})});
与ready()方法一样,bind()方法也可以多次调用,this引用的是相应行为的Dom元素,为了使Dom 元素能够使用jQuery中的方法,可以使用$(this)将其转换为jQuery对象
//承上,显示内容后,再点击标题后,内容被隐藏
//当Dom加载完毕,找到标题所在的元素,绑定click事件,找到内容元素,如果内容元素是显示的,则隐藏,如果内容是隐藏的,则显示
$(function(){
$("#panel h5.head").bind("click",
function(){
if($(this).next().is(":visible")){
$(this).next().hide();}
else{$(this).next().show();
}});
});
//$(this).next()被多次使用,因此可以为它定义一个局部变量
var $content=$(this).next();
$(function(){
$("#panel h5.head").bind(function(){
var $content=$(this).next();
if($content.is(":visible"))
{
$content.hide();
}
else
{
$content.show();
}
});
});
3.合成事件
jQuery有两个合成事件——hover()和toggle(),类似前面的ready(),hover(),toggle()方法都属于jQuery自定义方法
hover:用于模拟鼠标光标悬停事件,当光标移动到元素上时,会触发指定的第一个函数——enter,当鼠标移出这个元素时,会触发指定的第二个函数——leave
$(function(){
$("#panel h5.head").hover(function(){
$content.show();
}).function(){
$content.hide();
}
});
==>代码运行效果与下面代码运行效果是一样的
$(function(){
$("#panel h5.head").mouseover(function(){
$content.show();
}).mouseout(function(){
$(this).next().hide();
});
});
4.toggle(fnN):toggle()
用来模拟鼠标连续单击事件,第一次单击元素时,触发指定的第一个函数,当在此点击同一个元素时,则触发第二个函数,如果有更多的函数,则依次触发,知道最后一$("#panel h5.head").toggle(
function(){$content.show();},
function(){$content.hide();});
toggle()在jQuery中还有另外一个作用:切换元素的可见状态,如果元素是可见的,单击切换后则为隐藏,如果元素是隐藏的,单击切换后则为可见的,则上面的代码可写成如下jQuery代码:
$(function(){
$("#panel h5.head").toggle(function(){
$content.toggle();
$(this).addClass("highlight");
}),function(){
$(this).removeClass("highlight");
$content.toggle();
}
});
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
alert($(this).val()
);
});
});
</script>
2.事件绑定
type:事件类型,包括blur,focus,load,resize,scroll,unload,click,dbclick,mousedouwn,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error,
params:可选参数,作为event.data属性值传递给事件对象的额外数据对象
fn:绑定的处理函数
*jQuery中的时间绑定类型比普通的javascript少了on,如onclick()——click()
<div id="panel"><h5 class="head">jQuery的事件绑定</h5><div class="content">It's a ......</div></div>
//当Dom加载完毕,找到标题所在的元素,绑定click事件,找到内容元素,将内容元素显示
$(function(){$("#panel").bind("click",function(){$(this).next().show();})});
与ready()方法一样,bind()方法也可以多次调用,this引用的是相应行为的Dom元素,为了使Dom 元素能够使用jQuery中的方法,可以使用$(this)将其转换为jQuery对象
//承上,显示内容后,再点击标题后,内容被隐藏
//当Dom加载完毕,找到标题所在的元素,绑定click事件,找到内容元素,如果内容元素是显示的,则隐藏,如果内容是隐藏的,则显示
$(function(){
$("#panel h5.head").bind("click",
function(){
if($(this).next().is(":visible")){
$(this).next().hide();}
else{$(this).next().show();
}});
});
//$(this).next()被多次使用,因此可以为它定义一个局部变量
var $content=$(this).next();
$(function(){
$("#panel h5.head").bind(function(){
var $content=$(this).next();
if($content.is(":visible"))
{
$content.hide();
}
else
{
$content.show();
}
});
});
3.合成事件
jQuery有两个合成事件——hover()和toggle(),类似前面的ready(),hover(),toggle()方法都属于jQuery自定义方法
hover:用于模拟鼠标光标悬停事件,当光标移动到元素上时,会触发指定的第一个函数——enter,当鼠标移出这个元素时,会触发指定的第二个函数——leave
$(function(){
$("#panel h5.head").hover(function(){
$content.show();
}).function(){
$content.hide();
}
});
==>代码运行效果与下面代码运行效果是一样的
$(function(){
$("#panel h5.head").mouseover(function(){
$content.show();
}).mouseout(function(){
$(this).next().hide();
});
});
4.toggle(fnN):toggle()
用来模拟鼠标连续单击事件,第一次单击元素时,触发指定的第一个函数,当在此点击同一个元素时,则触发第二个函数,如果有更多的函数,则依次触发,知道最后一$("#panel h5.head").toggle(
function(){$content.show();},
function(){$content.hide();});
toggle()在jQuery中还有另外一个作用:切换元素的可见状态,如果元素是可见的,单击切换后则为隐藏,如果元素是隐藏的,单击切换后则为可见的,则上面的代码可写成如下jQuery代码:
$(function(){
$("#panel h5.head").toggle(function(){
$content.toggle();
$(this).addClass("highlight");
}),function(){
$(this).removeClass("highlight");
$content.toggle();
}
});
相关文章推荐
- 锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
- 锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
- 锋利的jQuery第四章:jQuery中的事件和动画
- 《锋利的jQuery》读书笔记 第4章 jQuery中的事件和动画
- jquery中的事件和动画
- jquery事件,动画1
- jQuery动画和事件
- 《锋利的jQuery》要点归纳(三) jQuery中的事件和动画(下:动画篇)
- jQuery 1.7 正式版已经可以下载使用。jQuery是一个JavaScript库,它简化了HTML文档遍历,事件处理,动画和为网络快速发展的Ajax交互。jQuery 1.7 版本加入了新的事件API .on() 和 .off(),提
- jQuery中的属性操作,jQuery中的事件处理、jQuery 中的动画简单介绍
- 《锋利的jQuery》要点归纳(三) jQuery中的事件和动画(上:事件篇)
- jquery学习笔记(三)事件和动画
- jQuery在学习之四、jQuery事件与动画
- 【锋利的JQuery】0x04 JQuery中的事件与动画
- JQuery学习笔记(4)JQuery中的事件和动画
- 锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
- Jquery中的事件和动画
- jQuery 选择器、DOM操作、事件、动画
- 第四讲 jQuery中的事件与动画
- jQuery事件及动画